LCP란? 홈페이지의 중요한 콘텐츠가 화면에 나타나는 시간을 쉽게 이해하기
LCP는 첫 화면의 주요한 큰 콘텐츠가 표시되는 시점을 측정하는 지표입니다. TTFB·FCP와의 차이, 히어로 이미지·Lazy Loading·Preload·CSS/JS·RUM·병목 분석까지 초보 기준으로 정리합니다.
메뉴는 떴는데 핵심이 안 보이면
작은 아이콘·메뉴는 보이는데 메인 이미지·중요 제목만 한참 뒤라면 사용자는 「아직 안 떴다」고 느낍니다. LCP(Largest Contentful Paint)는 화면(Viewport) 안 주요한 큰 콘텐츠가 그려진 시점을 봅니다. 비유하면 매장 문은 열렸는데 핵심 상품·간판이 가려진 커튼이 걷히는 시간입니다. Paint는 브라우저가 글자·이미지 등을 실제로 화면에 그리는 과정입니다.
무엇이 LCP 요소가 되나
페이지마다 다릅니다. 큰 히어로 이미지가 흔하지만, 이미지가 없으면 큰 제목 텍스트가 될 수도 있습니다. 동영상·포스터 이미지가 첫 화면을 크게 차지하면 초기 경험에 영향을 줍니다. LCP는 푸터·아래 후기까지 전부 끝날 때까지가 아니라 Above the Fold(첫 Viewport)의 핵심에 가깝습니다. PC는 히어로, 모바일은 큰 제목이 LCP가 되는 식으로 기기별도 달라질 수 있습니다.
TTFB와의 관계
TTFB는 서버 첫 응답까지, LCP는 그 뒤 HTML·CSS·이미지 등을 거쳐 주요 콘텐츠가 보일 때까지입니다. TTFB가 길면 LCP 출발도 늦어질 수 있지만, TTFB 0.2초에 히어로 5MB면 LCP만 나쁠 수 있습니다. 서버만 업그레이드하거나 이미지만 압축하는 식의 단정은 피하고, 병목부터 찾습니다.
요청 → TTFB(첫 바이트) → HTML/CSS/JS → 리소스 다운로드 → LCP(핵심 표시) FCP = 뭔가 처음 보이기 시작 · LCP = 주요한 큰 콘텐츠가 보임
「처음 무언가가 보이기」까지는 FCP로 따로 봅니다. LCP와 숫자가 다를 수 있습니다.
흔한 원인 · 이미지 · Lazy · Preload
큰 히어로·느린 서버·늦게 발견되는 이미지·CSS/JS·웹폰트·외부 위젯이 대표적입니다. 필요 이상으로 큰 원본(예: 6000px를 1500px 자리에)을 줄이고, WebP/AVIF·반응형 이미지(srcset)로 모바일에 작은 파일을 보냅니다. Lazy Loading은 아래쪽 이미지에 유용하지만 첫 화면 LCP 이미지에 쓰면 다운로드가 늦어져 악화될 수 있습니다. JS로 늦게 삽입하거나 CSS background-image만 쓰면 발견이 늦을 수 있어 Preload·fetchpriority는 진짜 핵심만 신중히 씁니다. 슬라이드·자동재생 동영상 히어로는 초기 네트워크 경쟁을 키울 수 있습니다.
CSS·JS·폰트·외부 리소스
초기 화면에 필요한 CSS가 크면 Render Blocking으로 표시가 늦어질 수 있습니다. 무거운 JS가 콘텐츠를 나중에 만들거나 메인 스레드를 오래 쓰면, 특히 저사양 모바일에서 LCP가 나빠집니다 — Code Splitting으로 불필요한 초기 코드를 줄입니다. LCP가 큰 텍스트면 웹폰트·숨김 표시도 영향을 줄 수 있고, 외부 폰트·광고·채팅·지도 위젯도 우리 서버가 빨라도 체감을 늦출 수 있습니다. CDN은 정적 파일 전달에 도움이 될 수 있으나 다른 병목이 있으면 만능이 아닙니다.
측정 · Lab/Field · 개선 순서
RUM으로 실제 기기·지역 LCP를, Lighthouse·개발자 도구로 LCP 요소를 찾습니다. Lab과 Field 숫자가 달라도 자연스럽고, Lab으로 재현·수정 후 RUM으로 확인합니다. 첫 방문 vs 캐시 재방문, 로그인 동적 페이지도 차이가 납니다. 순서: LCP 요소 확인 → TTFB → 발견 시점 → 파일 크기 → 렌더 차단 → 실제 사용자. Skeleton·로딩 애니메이션은 UX 피드백일 뿐 처리 시간을 줄이지는 않습니다. SEO 전용 점수가 아니라 경험 지표이며, 이미지를 없애기보다 필요한 콘텐츠를 빠르게 전달하는 것이 목표입니다. INP·CLS와 함께 봅니다. 배포 전후는 합성·CI/CD와 비교하면 회귀를 찾기 쉽습니다.
자주 묻는 질문
LCP란?
Largest Contentful Paint — 첫 화면의 주요한 큰 콘텐츠가 표시되는 시점을 측정합니다.
전체 로딩 시간인가요?
아닙니다. 모든 파일이 끝날 때까지가 아니라 핵심 큰 콘텐츠가 보일 때까지입니다.
항상 이미지인가요?
아닙니다. 큰 텍스트 영역 등이 될 수 있습니다.
TTFB와의 차이는?
TTFB는 서버 첫 응답, LCP는 그 뒤 주요 콘텐츠가 화면에 그려진 시점입니다.
히어로에 Lazy를 써도 되나요?
첫 화면 핵심 이미지에 지연 로딩하면 LCP가 악화될 수 있어 주의합니다.
정리
LCP는 중요한 큰 콘텐츠가 화면에 나타나는 시점입니다. TTFB = 서버 첫 대답, LCP = 핵심 화면이 보이기까지. 요소를 찾은 뒤 서버·파일 크기·발견 시점·렌더 차단을 좁혀 개선합니다. 페이지가 빨리 보여도 버튼을 눌렀을 때 반응이 없으면 또 다른 문제입니다 — 다음으로 자주 이어지는 주제는 INP(Interaction to Next Paint)입니다.