Image with src "..." was detected as the Largest Contentful Paint (LCP).

백견이불여일타(百見而不如一作)

Next.js에서 LCP 문제가 발생하는 원인

1. 큰 이미지 크기: 최적화되지 않은 이미지가 로드 시간을 증가시킴.

2. 위치 상단(above-the-fold) 이미지의 지연 로딩
   → next/image는 기본적으로 lazy loading을 사용하여 LCP 이미지를 렌더링하는 데 시간이 걸릴 수 있음.

3. 비효율적인 이미지 포맷: PNG 대신 WebP 또는 AVIF와 같은 더 가벼운 형식을 사용하지 않음.

4. priority 속성 누락: 중요한 이미지에 priority 속성이 설정되지 않음.

Next.js에서 LCP를 개선하는 방법

1. 중요한 이미지에 priority 속성 추가
   → priority 속성은 중요한 이미지를 미리 로드하여 렌더링 지연을 방지합니다.

   <Image
     src="/path-to-image.jpg"
     alt="이미지 설명"
     width={800}
     height={600}
     priority
   />
   

2. 지연 로딩(lazy loading) 비활성화
   → 기본적으로 next/image는 이미지를 lazy load합니다. LCP로 감지된 주요 이미지는
   loading="eager" 속성을 사용해 즉시 로드합니다.

   <Image
     src="/path-to-image.jpg"
     alt="이미지 설명"
     width={800}
     height={600}
     loading="eager"
     priority
   />
   

3. 최적화된 이미지 포맷(WebP 또는 AVIF) 사용
   → Next.js는 next/image를 통해 자동으로 이미지를 최적화합니다.
   가능한 경우, 더 가벼운 이미지 포맷을 사용합니다.

   <Image 
     src="/path-to-image.webp" 
     alt="이미지 설명"
     width={800} 
     height={600} 
     priority
   />
   

4. 폰트 및 렌더링을 차단하는 리소스 미리 로드
   → LCP 문제는 이미지뿐만 아니라 폰트 및 CSS와 같은 리소스와도 관련이 있습니다.

   <link 
     rel="preload" 
     href="/path-to-font.woff2" 
     as="font" 
     type="font/woff2" 
     crossorigin="anonymous"
   />
   

5. CDN 및 이미지 로더 사용
   → Next.js는 커스텀 로더 또는 CDN을 사용하여 이미지를 더 빠르게 제공합니다.

   // next.config.js
   module.exports = {
     images: {
       loader: 'default',
       domains: ['example.com'],  // 사용하는 이미지 도메인 추가
     },
   };
   

LCP 진단 및 모니터링 도구

• Web Vitals 라이브러리 for Next.js: LCP, FID, CLS 데이터를 실시간으로 추적.
• Chrome DevTools의 Lighthouse: LCP와 관련된 세부 정보를 제공.

이 방법들을 적용하면 LCP 시간을 크게 단축하고 사이트 성능 및 Core Web Vitals 점수를 향상시킬 수
있습니다.

🙇🏻‍♂️참고자료

https://github.com/vercel/next.js/discussions/48255