LCP
LCP(Largest Contentful Paint)는 페이지 이동 시점을 기준으로 뷰포트 안에서 가장 큰 콘텐츠 요소(이미지, 텍스트 블록, 비디오)가 렌더링되기까지 걸리는 시간을 측정하는 지표입니다. 구글 코어 웹 바이탈 중 하나로, 사용자가 체감하는 로딩 속도를 나타냅니다.
- LCP는 뷰포트에서 가장 큰 콘텐츠 요소가 화면에 그려지기까지의 시간으로, 로딩 체감 속도를 나타내는 코어 웹 바이탈 지표입니다.
- 2.5초 이하가 "좋음", 4초 초과가 "나쁨"이며, 사용자의 75 백분위수 값을 기준으로 평가합니다.
- 주요 원인은 느린 서버 응답(TTFB), LCP 리소스 발견·로드 지연, 렌더링 차단 리소스이며, 이미지 최적화·preload·CDN으로 개선합니다.
개요
LCP(Largest Contentful Paint)는 페이지 로드가 시작된 시점부터 뷰포트 안에서 가장 큰 콘텐츠 요소가 렌더링되기까지 걸리는 시간을 측정합니다. 이 "가장 큰 요소"는 보통 페이지의 핵심 콘텐츠에 해당하므로, LCP가 빠르면 사용자는 페이지가 쓸모 있다고 빠르게 인식하게 됩니다. 즉 LCP는 사용자가 체감하는 로딩 속도를 대표하는 지표이며, 구글이 정의한 코어 웹 바이탈(Core Web Vitals) 세 가지 중 하나입니다.
LCP 후보가 되는 요소에는 <img>, SVG 내부의 <image>, <video>, CSS url()로 지정한 배경 이미지를 가진 요소, 그리고 텍스트 노드를 포함한 블록 레벨 요소가 포함됩니다. 브라우저는 사용자가 탭, 스크롤, 키 입력 등으로 페이지와 상호작용하는 순간 더 이상 새로운 LCP 항목을 보고하지 않습니다.
기준값
LCP는 모바일과 데스크톱을 구분하여 측정한 페이지 로드의 75 백분위수 값을 기준으로 평가합니다. 즉 사용자 4명 중 3명이 좋은 경험을 하는 수준을 목표로 삼습니다.
| 평가 | LCP 값 |
|---|---|
| 좋음 | 2.5초 이하 |
| 개선 필요 | 2.5초 초과 4초 이하 |
| 나쁨 | 4초 초과 |
주요 원인
web.dev는 전체 LCP 시간을 네 가지 하위 구간으로 나눕니다. 각 구간의 비중을 파악하면 어디를 먼저 개선할지 판단할 수 있습니다.
| 하위 구간 | 설명 | 일반적 비중 |
|---|---|---|
| TTFB(첫 바이트까지의 시간) | 페이지 로드 시작부터 HTML 문서의 첫 바이트를 받기까지의 시간 | 약 40% |
| 리소스 로드 지연 | TTFB 이후 브라우저가 LCP 리소스를 불러오기 시작하기까지의 시간 | 10% 미만 |
| 리소스 로드 시간 | LCP 리소스 자체를 내려받는 데 걸리는 시간 | 약 40% |
| 요소 렌더 지연 | 리소스 로드가 끝난 뒤 LCP 요소가 완전히 렌더링되기까지의 시간 | 10% 미만 |
최적화
- TTFB 단축: 불필요한 리다이렉트를 줄이고, 효율적인 캐시 정책으로 재방문 시 캐시에서 응답하게 합니다.
- 리소스 로드 지연 제거: LCP 리소스가 초기 HTML 응답 안에서 브라우저의 preload 스캐너에 발견되게 하고, 핵심 이미지에
fetchpriority="high"를 부여합니다. LCP 이미지에는 lazy-loading을 적용하지 않습니다. - 리소스 로드 시간 단축: CDN으로 사용자와의 거리를 줄이고, 최신 이미지 포맷과 압축을 적용합니다.
- 요소 렌더 지연 감소: 렌더링 차단 스타일시트와 동기 스크립트를 최소화하고, 서버 사이드 렌더링으로 이미지 리소스가 HTML 소스에서 발견되게 합니다.
근거
2.5초·4초 기준값과 측정 방식은 구글의 공식 문서 web.dev의 LCP 문서(web.dev/articles/lcp)에 명시되어 있습니다. 하위 구간 분해와 최적화 권장 사항은 web.dev의 LCP 최적화 문서(web.dev/articles/optimize-lcp)를 따릅니다. 코어 웹 바이탈이 구글 검색 순위에 반영된다는 점은 구글 검색 센트럴 문서(Understanding Core Web Vitals and Google search results)에 정리되어 있습니다.
실행 체크리스트
- 뷰포트에서 실제 LCP 요소가 무엇인지 측정 도구로 먼저 확인합니다.
- LCP 이미지를 초기 HTML에 직접 노출하고 lazy-loading을 제거합니다.
- 핵심 이미지에
fetchpriority="high"또는 preload를 적용합니다. - 이미지를 WebP·AVIF 등 최신 포맷으로 변환하고 적절히 압축합니다.
- CDN과 캐시 정책으로 리소스 전송 거리·시간을 줄입니다.
- 렌더링 차단 CSS·JS를 인라인 처리하거나 지연 로드합니다.
- 실사용자(필드) 데이터의 75 백분위수 LCP가 2.5초 이하인지 주기적으로 점검합니다.