Next.js에서 LCP를 개선한 과정

문제와 배경

메인 랜딩의 LCP가 3.8초로 측정되었다. largest-contentful-paint 지표를 기준으로 병목을 추적했다.

해결 과정

히어로 이미지에 priority를 부여하고, 폰트 preload를 정리했다. critical-rendering-path 관점에서 렌더 차단 리소스를 줄였다.

결과

LCP가 2.1초까지 개선되었다.

배운 점

리소스 우선순위가 체감 성능에 큰 영향을 준다.