naradesign / lcp

LCP(Largest Contentful Paint) - Example & Solution.

index.html 파일 LCP 개선하기

• https://naradesign.github.io/lcp/

LCP 개선 포인트.

• 서드 파티 라이브러리(jquery, lodash, normalize...) 줄이기.
• 웹 폰트 미리 연결하기(preconnect).
• CSS와 이미지 병렬 로딩하기(preload).
• <picture> 요소를 활용한 기능 탐지와 이미지 최적화.
• <img> 요소의 지연 로딩(loading)과 병렬 디코딩(decoding).

샘플 이미지 자원.

• https://naradesign.github.io/html5/img/small.avif
• https://naradesign.github.io/html5/img/large.avif
• https://naradesign.github.io/html5/img/small.webp
• https://naradesign.github.io/html5/img/large.webp
• https://naradesign.github.io/html5/img/small.jpg
• https://naradesign.github.io/html5/img/large.jpg
• https://naradesign.github.io/html5/img/example.avif
• https://naradesign.github.io/html5/img/example.webp
• https://naradesign.github.io/html5/img/example.jpg