[Next.js] Image with src "..." was detected as the Largest Contentful Paint(LCP)

⚠️경고 내용: Image with src "..." was detected as the Largest Contentful Paint(LCP)

Nextjs의 Image를 사용하던 도중에 위와 같은 경고가 발생했습니다.

🤷‍♀️Why?🤷‍♀️

LCP로 감지된 이미지인데 priority 속성을 사용하지 않았기 때문입니다.

---

✨해결 방법

Image에 priority={true}를 추가해서 해결했습니다.

 <Image priority={true} loader={externaImageLoader} src={image} className="w-20 h-20 bg-gray-400 rounded-md" width={80} height={80} layout="fixed"/>

 

priority를 true로 설정할 경우 해당 이미지를 높은 우선순위로 생각하기 때문에 미리 로드됩니다.

또한 priority를 사용하는 이미지에 대해 지연 로딩이 자동으로 비활성화됩니다.

 

priority 속성을 사용해야하는 경우는 언제일까요?

👉 LCP로 감지된 이미지의 경우에 priority 속성을 사용해야합니다.

- LCP(lLargest Contentful Paint)란? 페이지의 로딩 성능을 확인할 수 있는 지표입니다.

- LCP는 뷰포트 내에서 볼 수 있는 페이지에서 가장 큰 요소를 가져오는 데 걸리는 시간을 측정합니다.

 

출처: Next.js 공식문서