LCP(Largest Contentful Paint)란? | SEO 용어집

LCP(Largest Contentful Paint)는 페이지 탐색이 시작된 순간부터 뷰포트 안에서 가장 큰 요소가 렌더링을 마치기까지의 시간을 측정하는 Core Web Vitals 지표입니다. 구글이 '사용자가 페이지를 로드됐다고 느끼는 시점'을 가늠하는 가장 핵심적인 프록시 지표입니다.

왜 중요한가

LCP는 Core Web Vitals 세 지표 중 하나이자, 구글이 공식적으로 인정한 랭킹 신호입니다. 구글 기준: 좋음 ≤ 2.5초, 개선 필요 2.5~4.0초, 나쁨 > 4.0초. '좋음' 구간의 페이지는 이탈률이 눈에 띄게 낮고 전환율이 높으며, 75백분위수(p75)에서 LCP가 기준을 넘으면 경쟁 키워드에서 순위가 눌릴 수 있습니다.

'가장 큰 요소'의 판정 기준

LCP는 뷰포트에 그려진 요소 중 가장 큰 것을 추적합니다. 대상 요소는 <img>, <video> 포스터 프레임, CSS url()로 로드된 배경 이미지, 블록 단위 텍스트 노드 등입니다. 로드 중에 '가장 큰 요소'가 바뀔 수 있으며, 최종적으로 가장 크게 판정된 요소의 렌더링 시각이 LCP로 기록됩니다.

LCP가 느려지는 주요 원인

느린 서버 응답(TTFB): HTML이 도착하는 데 1.5초가 걸리면 LCP가 2.5초 이하가 될 수 없습니다.

렌더 차단 리소스: <head>의 동기 CSS·JS가 첫 페인트를 막습니다.

최적화되지 않은 이미지: 히어로 이미지가 LCP 요소인 경우가 많으며, 용량이 크거나 압축이 없거나 로드가 늦으면 LCP 실패의 대부분이 여기서 나옵니다.

클라이언트 사이드 렌더링: 하이드레이션 후 JS로 렌더링하는 SPA는 LCP를 '좋음' 기준 밖으로 밀어냅니다.

LCP 요소의 lazy-loading: 히어로 이미지에 loading="lazy"를 붙이는 실수가 흔합니다. LCP가 측정하는 바로 그 요소를 지연시키는 꼴입니다.

LCP 개선 방법

히어로 이미지 preload: <link rel="preload" as="image" href="...">로 브라우저가 일찍 받아오게 합니다.

최신 이미지 포맷 사용: WebP·AVIF는 JPEG 대비 용량을 30~50% 줄입니다.

fetchpriority="high" 속성을 히어로 이미지에 부여해 다른 리소스보다 우선 로드되게 합니다.

CDN 사용: 지리적으로 먼 사용자에게도 낮은 TTFB를 제공합니다.

Critical CSS 인라인화: 나머지 CSS는 지연 로드합니다.

SSR·SSG 채택: 콘텐츠 중심 페이지는 클라이언트 렌더링 대신 서버 렌더링을 사용합니다.

엣지 캐싱: 재방문 사용자에게 적극적으로 캐시를 태웁니다.

LCP 측정 방법

필드 데이터: Chrome UX Report(CrUX), Search Console의 Core Web Vitals 리포트, PageSpeed Insights — 실제 사용자 데이터 기반입니다.

랩 데이터: Lighthouse, WebPageTest, Chrome DevTools Performance — 재현 가능하지만 합성 환경입니다.

구글은 필드 데이터의 p75를 기준으로 랭킹을 매기므로, 합성 테스트만으로는 부족합니다.

Sources:

inblog에서 활용하기

inblog는 서버 사이드 렌더링과 자동 이미지 최적화(WebP 변환·적절한 사이즈 서빙)를 기본 제공해, 별도 설정 없이도 LCP가 '좋음' 구간에 들어갑니다. 히어로 이미지는 자동으로 preload되고, CDN 엣지에서 캐시되므로 전 세계 어디서 접속해도 빠른 첫 페인트를 보장합니다.

LCP