지나치게 큰 이미지
이미지를 로드할 때 다운로드한 파일의 원본 크기와 페이지에서 사용하는 이미지의 실제 크기를 비교합니다. 실제 크기는 CSS가 적용된 이미지의 렌더링 크기에 기기 픽셀 비율을 곱해 계산합니다. 다운로드한 이미지가 훨씬 크다면, 즉 가로나 세로 중 하나가 1200px 넘게 크다면 이 경고가 발생합니다. 지나치게 큰 이미지를 다운로드하면 페이지 로딩이 느려지고 코어 웹 바이탈에 부정적인 영향을 줄 수 있습니다.
지연 로드되는 LCP 엘리먼트
페이지 로딩 중 가장 큰 콘텐츠 엘리먼트를 “LCP 엘리먼트”라고 하며, 코어 웹 바이탈 중 하나인 최대 콘텐츠 렌더링 시간(Largest Contentful Paint)과 관련됩니다. LCP 엘리먼트를 지연 로드하면 페이지 성능이 크게 저하됩니다. 지연 로드 방식에서는 브라우저가 이미지 다운로드를 시작하기 전에 레이아웃 계산을 완료해 해당 엘리먼트가 뷰포트 안에 있는지 판단해야 합니다. 따라서 Angular는 LCP 엘리먼트에 loading="lazy" 속성이 지정된 것을 감지하면 경고를 표시합니다.
오류 디버깅
콘솔 경고에 표시된 이미지 URL로 해당 <img> 엘리먼트를 찾으세요.
지나치게 큰 이미지 해결 방법
- 더 작은 원본 이미지를 사용하세요.
- 레이아웃에 따라 여러 크기가 필요하면
srcset을 추가하세요. - srcset을 자동으로 생성하는 Angular 내장 이미지 디렉티브(
NgOptimizedImage)로 전환하세요.
지연 로드되는 LCP 엘리먼트 해결 방법
loading속성을"eager"같은 다른 값으로 변경하세요.- LCP 이미지의 우선순위를 쉽게 높일 수 있는 Angular 내장 이미지 디렉티브(
NgOptimizedImage)로 전환하세요.
이미지 성능 경고 비활성화하기
애플리케이션 루트에 프로바이더를 설정하면 두 경고를 각각 사이트 전체에서 비활성화할 수 있습니다.
providers: [
{
provide: IMAGE_CONFIG,
useValue: {
disableImageSizeWarning: true,
disableImageLazyLoadWarning: true
}
},
],