최대 콘텐츠 렌더링 시간 (LCP)은 Lighthouse 보고서의 성능 섹션에서 추적되는 측정항목 중 하나입니다. 각 측정항목은 페이지 로드 속도의 몇 가지 측면을 보여줍니다.
Lighthouse는 초 단위로 LCP를 표시합니다.
LCP에서 측정하는 항목
LCP는 표시 영역에서 가장 큰 콘텐츠 요소가 화면에 렌더링될 때 측정됩니다. 이는 페이지의 기본 콘텐츠가 사용자에게 표시되는 시점에 근접합니다. LCP 결정 방법에 관한 자세한 내용은 최대 콘텐츠 렌더링 시간 정의를 참고하세요.
Lighthouse에서 LCP 점수를 결정하는 방법
Lighthouse는 Chrome의 추적 도구에서 LCP 데이터를 추출합니다.
아래 표에서 LCP 점수를 해석하는 방법을 확인할 수 있습니다.
| LCP 시간 (초) |
색상 분류 |
|---|---|
| 0-2.5 | 녹색 (빠름) |
| 2.5-4 | 주황색 (보통) |
| 4명 초과 | 빨간색 (느림) |
LCP 점수를 개선하는 방법
LCP가 이미지인 경우 타이밍은 4단계로 나눌 수 있습니다. 가장 오래 걸리는 단계를 알면 LCP를 최적화하는 데 도움이 될 수 있습니다. Lighthouse는 '최대 콘텐츠 렌더링 시간 요소' 진단의 단계 분석과 함께 LCP 요소를 표시합니다.
| LCP 단계 | 설명 |
|---|---|
| TTFB (Time to First byte) | 사용자가 페이지 로드를 시작한 시점부터 브라우저가 HTML 문서 응답의 첫 바이트를 수신할 때까지의 시간입니다. TFB에 대해 자세히 알아보기 |
| 로드 지연 | TTFB와 브라우저가 LCP 리소스 로드를 시작하는 시점 사이의 델타입니다. |
| 로드 시간 | LCP 리소스 자체를 로드하는 데 걸리는 시간 |
| 렌더링 지연 | LCP 요소가 완전히 렌더링될 때까지 LCP 리소스 로드가 완료되는 시점 사이의 델타입니다. |