LCP가 느려지는 원인
LCP 측정 대상은 화면에 보이는 영역 안의 이미지, 동영상 포스터 이미지, 배경 이미지, 텍스트 블록 중 가장 큰 요소입니다. 보통 퍼스트뷰의 메인 이미지나 제목이 해당합니다. 이 요소가 늦게 뜨는 원인은 네 단계로 나눠 봅니다.
- 서버 응답이 느린 경우: 첫 바이트를 받기까지의 시간(TTFB)이 길면 이후 모든 단계가 밀립니다.
- 리소스 발견이 늦은 경우: 이미지가 CSS 배경이나 자바스크립트로 늦게 삽입되면 브라우저가 늦게 요청합니다.
- 다운로드가 느린 경우: 이미지 용량이 크거나 효율이 낮은 형식입니다.
- 그리기가 늦은 경우: 렌더링을 막는 CSS·자바스크립트 때문에 다운로드가 끝나도 화면에 표시하지 못합니다.
LCP를 개선하는 방법
LCP 이미지는 WebP·AVIF 같은 효율적인 형식으로 압축하고 화면에 맞는 크기로 제공합니다. 이 이미지에는 Lazy load를 적용하지 말고, 오히려 fetchpriority="high"로 먼저 불러오게 지정합니다. 자바스크립트로 화면을 그리는 사이트는 SSR이나 정적 생성으로 바꾸면 콘텐츠가 처음부터 HTML에 들어 있어 LCP가 빨라집니다.
개선 결과는 페이지 스피드 인사이트의 실험실 데이터로 먼저 확인하고, 실제 사용자 기준 수치는 서치콘솔 코어 웹 바이탈 보고서에서 추적합니다. 판정은 전체 방문의 75번째 백분위수 값으로 합니다.