최상의 페이지 로드 성능을 얻기 위해 웹 글꼴을 불러오는 방법

주의: 여기 사용crossorigin이 중요합니다.이 속성이 없으면 브라우저는 실제로 미리 불러온 글꼴을 무시하기 때문에 글꼴 파일을 새로 추출하여 귀여운 작업을 취소합니다.브라우저에서 글꼴을 익명으로 가져오기를 원합니다.이것이 바로 우리가 익명으로 글꼴 파일을 미리 불러올 것을 요청하는 이유입니다.위의 예에서 rel="preload" as="font" 속성은 브라우저가 글꼴 다운로드를 빨리...

performanceoptimisationsustainabilitywebfonts

지연 로딩으로 속도 최적화 - 자바스크립트 없이

웹사이트 로딩을 최적화하기 위해 할 수 있는 가장 좋은 방법 중 하나는 가능한 한 많은 이미지를 지연 로드하는 것입니다. 이제 네이티브 Lazy Loading 덕분에 자체 Javascript를 사용하지 않고도 그렇게 할 수 있습니다. 이미지를 비동기식으로 로드한다는 것은 이미지가 브라우저의 뷰포트에 나타날 때만(또는 직전에) 이미지를 로드한다는 의미입니다. 이것의 이점은 웹사이트의 초기 페인...

lazyloadingoptimisationjavascriptsustainability

새로운 AVIF 형식을 사용하여 이미지의 무게 줄이기

이미지 최적화는 지속 가능한 웹사이트 영역에서 큰 주제입니다. 그러나 다른 이미지 형식은 어떻습니까? 물론 잘 알려진 JPG, PNG 형식과 현재 잘 지원되는 WEBP 형식이 있지만 이제 새로운 형식이 있습니다. 잘 최적화된 WEBP 파일의 파일 크기를 절반으로 줄일 수 있다는 주장과 함께(그 자체로 JPG 크기의 절반이 될 수 있음) 웹용으로 잘 최적화된 고품질 이미지를 생성하기에 확실히 ...

avifoptimisationperformancesustainability