이미지 lazy loading을 적용할 때 LCP 이미지에는 왜 주의해야 하나요?

이미지 lazy loading은 화면 밖 이미지를 늦게 불러와 초기 네트워크 비용을 줄이는 최적화입니다. 하지만 모든 이미지에 무조건 적용하면 오히려 성능 지표를 망칠 수 있습니다.

특히 LCP(Largest Contentful Paint) 후보가 되는 hero 이미지나 첫 화면의 큰 배너 이미지는 lazy loading 대상에서 제외하는 것이 좋습니다. 브라우저가 “나중에 필요한 이미지”라고 판단하면 요청 시작 자체가 늦어져 LCP 시간이 증가할 수 있습니다.

첫 화면 핵심 이미지는 eager 로딩, 높은 fetch priority, 적절한 사이즈 지정이 더 중요합니다.

<img
  src="/hero.webp"
  width="1200"
  height="630"
  fetchpriority="high"
  loading="eager"
  alt="서비스 소개 이미지"
/>

반대로 카드 리스트 하단, 상세 페이지 중간 이후의 이미지, 사용자 스크롤 후 보이는 콘텐츠에는 lazy loading이 효과적입니다.

실무에서는 Lighthouse 점수만 보고 기계적으로 적용하기보다 실제 LCP 요소가 무엇인지 먼저 확인해야 합니다. Chrome DevTools Performance 탭이나 Web Vitals 로그로 LCP 후보를 확인하고, 그 이미지는 빠르게 가져오도록 별도 처리하는 것이 좋습니다.