LCP(최대 콘텐츠풀 페인트)

LCP는 어디에서 쓰이나요?

서치콘솔 「핵심 웹 지표」 보고서와 PageSpeed Insights에서 확인합니다.

• 페이지를 열었을 때 체감 로딩 속도를 점검할 때
• 코어 웹 바이탈 3대 지표를 확인할 때
• 어떤 요소 때문에 로딩이 늦게 끝나는지 찾을 때

---

LCP는 어떻게 측정하나요?

화면에서 가장 넓은 면적을 차지하는 요소가 그려지는 시점을 잽니다.

LCP = 뷰포트 안 최대 콘텐츠 요소(이미지·큰 텍스트·비디오 포스터)가 그려지기까지 걸린 시간타이머는 TTFB(첫 바이트 시간)가 끝난 뒤부터 흐릅니다

LCP 요소로 잡히는 대상은 대표적으로 세 가지입니다.

• 히어로 이미지나 배경 이미지
• 화면을 크게 채우는 제목·문단 텍스트
• 재생 전 비디오의 포스터 프레임

---

LCP가 왜 중요한가요?

LCP가 느리면 사용자가 페이지를 다 봤다고 느끼는 시점도 늦어집니다.

web.dev는 LCP가 2.5초 이하면 좋음, 4초를 넘으면 나쁨으로 분류합니다.

---

LCP라는 개념은 왜 생겼나요?

과거에는 첫 콘텐츠가 그려지는 시점(FCP)이나 리소스 로딩이 모두 끝나는 시점(Onload)으로 속도를 판단했습니다. 두 지표 모두 사용자가 실제로 화면을 다 봤다고 느끼는 순간과는 차이가 있어, 가장 큰 요소가 그려지는 순간을 기준으로 삼는 LCP가 만들어졌습니다.

---

내 상황에 적용하려면?

숫자를 하나 넣어 보면 감이 잡힙니다. 아래는 설명을 위해 가정한 수치입니다.

TTFB가 0.6초, 이후 이미지 다운로드와 렌더링에 2.1초가 걸렸다고 하겠습니다. 이 페이지의 LCP는 두 구간을 더한 2.7초가 되어 개선 필요 구간에 들어갑니다.

• PageSpeed Insights에서 어떤 요소가 LCP로 잡히는지 확인했습니다
• TTFB 구간과 렌더링 구간 중 어느 쪽이 더 느린지 나눠 봤습니다
• LCP 이미지에 사전 로딩(preload) 설정을 확인했습니다
• 렌더링을 막는 CSS·JS 로딩 순서를 점검했습니다

---

LCP에 대한 흔한 오해는 무엇인가요?

LCP를 포함한 3가지 핵심 지표는 코어 웹 바이탈에서, 클릭 반응 속도는 INP에서, 화면 전체 체감 속도는 페이지 속도에서 다룹니다.

---

자주 묻는 질문

LCP 좋음 기준은 몇 초인가요?

2.5초 이하면 좋음, 2.5초에서 4초 사이면 개선 필요, 4초를 넘으면 나쁨으로 분류됩니다.

LCP 요소는 어떻게 확인하나요?

PageSpeed Insights 리포트나 크롬 개발자도구에서 어떤 요소가 LCP로 잡혔는지 하이라이트로 보여줍니다.

LCP가 느리면 가장 먼저 무엇을 점검해야 하나요?

서버 응답 시간(TTFB), 렌더링을 막는 CSS·JS 순서, LCP 이미지의 용량과 사전 로딩 설정 순으로 점검하는 것이 일반적입니다.

참고 자료

• web.dev, Largest Contentful Paint (LCP).
• Google 검색 센터, 코어 웹 바이탈과 검색결과.