1. 문제

Next.js를 사용하여 페이지를 개발하는 과정에서 아래와 같은 경고 메시지가 발생함.

warn-once.js:16 Image with src "/_next/static/media/basic.7bd48856.png" was detected as the Largest Contentful Paint (LCP).
Please add the "priority" property if this image is above the fold.

이 경고는 페이지에서 가장 큰 이미지(Largest Contentful Paint, LCP)가 감지되었으며, 최적화를 위해 priority 속성을 추가하라는 내용을 포함하고 있음.

2. 원인 분석

• LCP는 웹페이지 성능 측정 기준 중 하나로, 페이지 로딩 시 가장 먼저 표시되는 주요 콘텐츠의 로딩 시간을 의미함.
• Next.js의 <Image> 컴포넌트를 사용하여 위에서 가장 먼저 보이는 이미지를 렌더링할 경우, 브라우저가 이를 우선적으로 로드하도록 유도하는 것이 성능 개선에 도움이 됨.
• Next.js는 priority 속성이 없는 경우, 해당 이미지를 일반적인 비동기 로딩 처리하므로 LCP 성능이 저하될 가능성이 있음.

3. 해결 방법

✅ priority 속성 추가

가장 먼저 보이는 주요 이미지에 priority 속성을 추가하면, 브라우저가 이를 우선적으로 로드할 수 있음.

수정 전 코드:

<Image
  src="/_next/static/media/basic.7bd48856.png"
  alt="Basic Image"
  width={500}
  height={300}
/>

수정 후 코드:

<Image
  src="/_next/static/media/basic.7bd48856.png"
  alt="Basic Image"
  width={500}
  height={300}
  priority // ✅ LCP 이미지 최적화 적용
/>

📌 priority 속성의 동작 방식

• Next.js는 priority 속성이 있는 이미지를 자동으로 미리 로드(preload) 처리하여 더 빠르게 다운로드함.
• 이는 LCP 성능을 향상시키며, Lighthouse 및 Web Vitals 평가 점수를 개선할 수 있음.

4. 추가 검토 사항