최대 콘텐츠 렌더링 시간 (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 리소스 로드가 완료되는 시점 사이의 델타입니다. |