[Nextjs] Image with src "/_next/..." was detected as the Largest Contentful Paint (LCP).. 해결해보기

Warning 은 아래와 같다.  " " 속의 주소는 상황마다 다를 듯싶다.

Image with src "/_next/....." was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.

 

 

프로그램을 돌리는 데에 큰 문제는 없지만, 저 에러가 계속 콘솔창에 떠 있는 건 두고 볼 수만은 없다.

내용은 " 저 주소의 이미지는 LCP야!! 첫 화면에 보이는 이미지라면 priority 특성을 추가해! "

 

LCP

Largest Contentful Paint의 약어로 웹의 성능을 측정하기 위한 대표적인 지표입니다.

페이지가 처음 로드를 시작하고 나서 화면 내에서 가장 큰 콘텐츠가 렌더링 되는 시간을 의미합니다.

측정 방법은 여기서 간략히 알아보기도 했다! ( https://choq.tistory.com/19 )

 

해결하기

이는 해당되는 이미지가 화면 내에서 용량을 많이 차지하고 있음을 뜻한다.

이에 priority 특성을 추가해서 로드할 순서의 우선권을 해당 이미지에게 주면 해결!!!

그러면 Nextjs가 해당 우선도를 파악하고 의미 있는 부스트를 보여준다고 한다.

https://nextjs.org/docs/pages/building-your-application/optimizing/images#priority

 

방법은 Next 이미지 태그에 priority를 추가해주기만 하면 된다. 

 크롬 개발자 창에서 [네트워크] 탭에서 priority 추가해 준 이미지 요청 순서가 빨라진 것을 확인해 볼 수 있다!!

 

추가적으로 'above the fold'라는 말이 사용되었는데, 이는 처음 보여주는 뷰포트 상태를 말한다.

딱 처음 렌더링 될 때 뷰포트에 있는 이미지에 해당되는 건이기 때문이다.

참고로 이 말은 신문에서 접는 선 위로 처음 보이는 부분을 의미하는 것에서 따왔다고 한다.

 

---

 

해당 우선순위로 다른 컴포넌트 렌더링이 걱정된다면 이미지 자체를 최적화하는 수밖에 없을 것 같다.

sharp library 설치하거나 layout, sizes 등의 props 등을 사용해서 최적화할 수 있겠다.

특히나 layout = 'fill' 일 때 따로 설정되어 있지 않으면 100vw 기준으로 이미지를 불러오기에

사용 크기에 비해서 너무 큰 이미지를 불러오는 등의 일이 있을 수 있으니 한번 체크해 보면 좋을듯하다.