⭕ LCP 이미지 최적화

😤 문제

“어떤 문제가 있었나요”

LCP 점수 나쁨

🧐 문제 원인

“문제 원인이 무엇인가요”

이미지가 늦게 뜬다

😎 해결책

“해결책”

next Image에 priorty 속성 true 적용

🤔 이유

“왜 이런 해결책 사용했나요”

priorty 적용하면 이미지를 preload 한다.

공식 문서

priority가 true로 설정되면 해당 이미지는 높은 우선순위로 간주되어 사전 로드(preload)됩니다.
...
priority 속성은 이미지가 Largest Contentful Paint (LCP) 요소로 감지될 때 사용해야 합니다. 다양한 뷰포트 크기에 따라 서로 다른 이미지가 LCP 요소가 될 수 있으므로, 여러 개의 우선순위 이미지를 지정하는 것이 적절할 수 있습니다. 또한 이 속성은 화면 상단(above the fold)에 표시되는 이미지에만 사용해야 합니다. 기본값은 false입니다. Largest Content인 이미지에 priority 속성을 주자

🤩 적용

“어떻게 적용했나요”

LCP 11초 개선

before

after