[맛길] 이미지 최적화 (LCP 최적화)

LCP는 가장 큰 콘텐츠가 화면에 렌더링 되는 시간을 측정한 지표입니다. lighthouse로 측정한 결과 LCP(이미지)가 느림으로 측정되었습니다. 

LCP가 낮게 측정되었다는 것은 화면에 콘텐츠가 늦게 렌더링 된다는 얘기입니다. 이는 사용자 경험(UX)에 큰 영향을 줄 수 있고 이탈로까지 이어질 수 있습니다. Next.js에서 제공하는 Image 컴포넌트를 사용해 해당 이슈를 해결해 보겠습니다.

 

이슈를 해결하기 전에 html img 태그를 사용했을 때 결과를 먼저 측정해 보겠습니다.

 

img 태그 (제약 없음, Slow 4G, 3G)

img 태그 - No Throttling

img 태그 - Slow 4G

img 태그 - 3G

50kB의 작은 용량임에도 이미지를 내려받는데 4G 환경에서는 3.5초, 3G 환경에서는 12초가 소요됩니다. 이는 사용자에게 부정적인 경험을 줄 수 있습니다.

이제 Next.js의 Image 컴포넌트를 사용해 이미지를 최적화해보겠습니다.

 

Image 컴포넌트 적용 및 결과

<Image
  src={thumbnail}
  className="object-cover transition-transform duration-300 will-change-transform group-hover:scale-105"
  fill
  sizes={sizes}
  alt={alt}
  priority
  onLoad={() => setIsLoading(false)}
/>;

• 자동 크기 조정 : fill 속성을 사용하여 다양한 화면 크기에서 비율을 유지하며 최적의 크기로 이미지를 표시했습니다.
• 포맷 최적화: 최신 이미지 포맷(WebP)으로 자동 변환하여, 이미지 파일 크기를 줄이고 로딩 속도를 개선했습니다.
• 불필요한 이미지 로드 방지 : sizes 속성을 설정하여 디바이스 크기에 맞는 이미지만 로드하도록 하여 데이터 사용량을 줄였습니다.
• 우선 로딩: priority 속성을 사용하여 페이지의 주요 콘텐츠가 빠르게 표시되도록 했습니다.

 

Imae 컴포넌트 - No Throttling

Image 컴포넌트 - Slow 4G

Image 컴포넌트 - 3G

Image 컴포넌트를 적용한 후의 성능 측정 결과는 다음과 같았습니다.

• 용량 :  50kB에서 12kB로 75% 감소
• 이미지 로딩 속도 : No Throttling 기준 280ms에서 52ms로 약 80% 감소

img 태그 - lighthouse 측정 결과

Image 컴포넌트 - lighthouse 측정 결과

lighthouse의 성능 점수는 최적화 전 65점에서 최적화 후 81점으로 개선되었습니다.

 

참고 자료 - Next.js | Image Optimization

Optimizing: Images | Next.js