테크니컬 SEO심화
LCPLargest Contentful Paint
DEFINITION
LCP(Largest Contentful Paint)는 페이지를 연 뒤 화면에 보이는 가장 큰 이미지나 텍스트 블록이 그려지기까지 걸린 시간으로, 주요 콘텐츠의 로딩 속도를 나타내는 지표입니다.
01사용자가 첫 화면을 느리다고 느끼는 순간
사용자는 페이지의 가장 중요한 부분이 보일 때 비로소 '열렸다'고 느낍니다. LCP는 첫 화면에서 가장 큰 요소 — 보통 히어로 이미지나 제목 블록 — 가 그려지는 시점을 잽니다. 페이지 전체가 다 뜨는 시간과는 다릅니다.
좋음개선 필요나쁨
02.5초4초
02LCP를 늦추는 대표 요소
| 구간 | 흔한 원인 |
|---|---|
| 서버 응답(TTFB) | 캐시 없음, 원서버까지의 거리, 느린 백엔드 |
| 리소스 발견 지연 | LCP 이미지에 lazy loading, CSS 배경 이미지 |
| 리소스 다운로드 | 압축되지 않은 큰 이미지, 표시 크기보다 큰 원본 |
| 렌더링 지연 | 렌더링을 막는 CSS·폰트·스크립트 |
03이미지·폰트·서버 중 어디부터 확인해야 할까
PageSpeed Insights 진단에서 LCP 요소가 무엇인지부터 확인합니다. 요소가 이미지라면 아래 비교처럼 지연 로딩부터 의심하고, 텍스트라면 폰트와 렌더링 차단 리소스를, 모든 페이지가 고르게 느리다면 서버 응답을 먼저 봅니다.
첫 화면 이미지까지 지연 로딩
<img src="hero.webp" loading="lazy">
브라우저가 이미지를 늦게 요청해 LCP가 늦어짐
첫 화면 이미지는 우선 로딩
<img src="hero.webp" fetchpriority="high" width="1200" height="1200">
아래쪽 이미지에만 lazy를 씀
04개선 후 실제 수치를 확인하는 방법
- 배포 직후에는 PageSpeed Insights 실험실 결과로 LCP 요소와 시간이 줄었는지 확인합니다.
- 현장 데이터(실사용자)는 약 28일에 걸쳐 반영되므로 몇 주 뒤 다시 봅니다.
- Search Console Core Web Vitals 보고서에서 해당 URL 그룹이 '좋음'으로 이동했는지 봅니다.
GO DEEPER · NODELIX 가이드
