정의
페이지를 열었을 때 "이제 화면이 떴다"고 사용자가 느끼는 시점을 수치로 재고 싶을 때 쓰는 지표다. Largest Contentful Paint(LCP, "가장 큰 콘텐츠가 그려지기까지의 시간")는 뷰포트(viewport, 지금 화면에 실제로 보이는 영역) 안에서 가장 큰 콘텐츠 요소가 화면에 그려지기까지 걸린 시간이다. Core Web Vitals(구글이 정한 사용자 체감 성능 지표 묶음) 중 하나다.
왜 필요한가
첫 바이트가 빨리 도착해도, 정작 사용자가 보려던 큰 이미지나 제목이 늦게 뜨면 페이지는 "느리다"고 느껴진다. 서버 응답 시간(TTFB)이나 첫 픽셀이 찍히는 시점(FCP)만으로는 이 체감을 잡지 못한다. LCP는 "본문에서 제일 큰 덩어리가 언제 보였나"를 재서, 사용자가 실제로 콘텐츠를 인지하는 순간에 가장 가까운 값을 준다.
동작 원리
이미지, 비디오 poster(재생 전 미리보기 프레임), 배경 이미지, 블록 레벨 텍스트 블록 등이 LCP 후보가 된다. 브라우저는 렌더링을 진행하며 "지금까지 그려진 것 중 가장 큰 요소"를 계속 갱신하다가, 사용자 입력(스크롤·클릭)이 들어오면 갱신을 멈추고 마지막 값을 확정한다. critical-rendering-path(HTML·CSS를 파싱해 화면을 그리기까지의 브라우저 처리 순서)를 거쳐 요소가 실제로 그려질 수 있는(paintable) 상태가 되어야 측정된다.
실무 적용
히어로 이미지처럼 LCP가 될 가능성이 큰 요소는 우선순위를 높여 빨리 받아온다. Next.js Image의 priority 속성, 반응형 이미지가 올바른 크기를 고르도록 하는 sizes 속성, CDN 캐시를 적용한다. 리소스 우선순위 조정은 resource-priority 문서를 참고한다.
트레이드오프
과도한 preload(브라우저에 "이 리소스를 미리 받아둬"라고 지시)는 대역폭을 먼저 차지해 다른 리소스를 오히려 지연시킬 수 있다. 진짜 LCP 후보 하나에만 적용하는 것이 기본이다.
사용하면 안 되는 경우
- LCP 요소가 접힌 영역(뷰포트 밖)에 있어 사실상 사용자가 처음에 보지 못하는 경우 — 우선순위를 올려도 체감 개선이 없다.
- 텍스트만 있는 가벼운 페이지 — 폰트 로딩이 병목이지 이미지 우선순위 조정이 핵심은 아니다.
흔한 실수
- LCP 요소(첫 화면 히어로 이미지 등)를
loading="lazy"로 지연 로드해, 정작 가장 중요한 요소가 늦게 뜬다. - LCP 후보가 아닌 이미지에까지
priority를 남발해 우선순위 신호가 희석된다.
관련 개념
- critical-rendering-path — 요소가 paintable 상태가 되기까지의 렌더 순서
- resource-priority — LCP 리소스를 먼저 받아오는 우선순위 조정