[FE] Nextjs Image에서 priority가 미치는 영향

 

Image with src "${이미지 파일}" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.

 

위 경고를 Nextjs Image를 사용했다면 한번씩 마주했을 것이다. "특정 이미지가 LCP로 감지되는데, priority 를 추가해주세요" 라는 말이다. 경고는 쉽게도 priority를 추가해주면 자취를 감춘다. 끝~

 

근데 이 속성을 추가하면 얼마나 괜찮아지는걸까? 속성의 유무와 상관없이 새로고침하면 화면에 잘만 보이는것 같은데 말이다. 오늘은 이를 간략하게 체크해보자.

 

LCP

Largest Contentful Paint 의 준말이다. 단어적 의미로는 최대 콘텐츠 페인트이고 웹 속도를 측정하는 웹 바이털 지표이다. 페이지 로드시에 뷰포트 내에 가장 큰 이미지나 텍스트 등이 렌더링 되는데 걸리는 시간을 측정해서 표기한다. 한마디로 로드부터 사용자가 화면을 마주하게 되는데 걸리는 시간이다.

 

 

 권장하는 LCP 권장시간이다. 2.5초 내외라면 준수하게, 그외에는 개선이 필요하다고 판단한다. 

 

 

priority 속성

여기서 Nextjs Image의 priority 속성은 로드할 이미지의 우선도를 높이는 역할을 한다. 그럼으로 LCP의 시간을 단축시키려는 시도이다. 

그럼 이 속성에 의해서 얼마나 빨라질까? 그 차이는 크롬 [개발자 옵션 → 성능]에서 확인 가능하다.

 

priority 속성의 차이는 0.0X 초 정도 차이가 났다. 여러번 시도중에는 속성이 없을때  앞서는 경우도 있었다. 고작 이정도의 차이 때문에 경고까지 띄우는건가 싶었다. 하지만 차이는 네트워크의 속도에 따라서 확연한 차이를 보인다. 상단에 네트워크의 속도를 조정할 수 있는 부분이 있다. [제한없음 / 빠른4G / 느린4G] 등등.. 여기서 속도를 한번 조정해보자.

 

	빠른 4G	느린 4G	3G
Priority O	0.48 초	1.80 초	6.08 초
Priority X	1.46 초	2.98 초	10.07 초

 

 

힘의 차이가 느껴지는가? 네트워크의 속도에따라 1초에서 많게는 4초까지나 차이가 난다. 어플리케이션이나 웹을 사용할때 페이지 로드 시간이 1초 이상나는건 정말 커다란 차이다. "누가 요즘 3G씀 ㅋㅋ" 라고 해도, 유저의 일시적 인터넷 상태등에 이슈가 있어서 좋지 않은 네트워크 상태로 접근하는 경우가 생간다. 그럴 때 차이가 확실히 생기는 것이다. 

 

 

---

 

 

이제 경고를 보고나서 속성을 추가하지 말고,

미리 예상되는 이미지의 경우에는 중요함을 인지하고 priority 속성을 미리 잘 추가해두자.

이 친구는 말 없이 아주 중요한 역할을 하고 있었다.