Core Web Vitals와 이미지
이미지는 LCP, CLS 및 INP에 큰 영향을 미칩니다.
LCP (Largest Contentful Paint)
- 히어로 이미지 최적화
- 적절한 크기 사용 (srcset)
- 중요 이미지에 사전 로드 사용
- WebP/AVIF 사용
CLS (Cumulative Layout Shift)
- 이미지에 너비와 높이 속성 설정
- 종횡비 박스 사용
- 자리 표시자 사용
INP (Interaction to Next Paint)
과도한 이미지 디코딩 방지, 지연 로딩 사용, 이미지 크기 최적화.