콘텐츠가 포함된 첫 페인트 (FCP)는 Lighthouse 보고서의 성능 섹션에서 추적되는 6가지 측정항목 중 하나입니다. 각 측정항목은 페이지 로드 속도의 측면을 나타냅니다.
Lighthouse는 FCP를 몇 초 만에 표시합니다.
FCP 측정 대상
FCP는 사용자가 페이지로 이동한 후 브라우저에서 첫 번째 DOM 콘텐츠를 렌더링하는 데 걸리는 시간을 측정합니다.
페이지의 이미지, 흰색이 아닌 <canvas> 요소, SVG는 DOM 콘텐츠로 간주됩니다. iframe 내부의 콘텐츠는 포함되지 않습니다.
Lighthouse에서 FCP 점수를 결정하는 방법
FCP 점수는 HTTP 자료실의 데이터를 기반으로 실제 웹사이트의 페이지의 FCP 시간과 FCP 시간을 비교한 것입니다. 예를 들어 99번째 백분위수에서 작동하는 사이트는 약 1.2초 내에 FCP를 렌더링합니다. 웹사이트의 FCP가 1.2초이면 FCP 점수는 99입니다. Lighthouse 점수 임계값이 설정되는 방식은 측정항목 점수 결정 방식을 참고하세요.
다음 표에서는 FCP 점수를 해석하는 방법을 보여줍니다.
| FCP 시간 (초) |
색 구분 |
|---|---|
| 0~1.8 | 녹색 (빠름) |
| 1.8~3 | 주황색 (보통) |
| 3명 초과 | 빨간색 (느림) |
FCP 점수를 개선하는 방법
FCP에서 특히 중요한 한 가지 문제는 글꼴 로드 시간입니다. 글꼴 로드 속도를 높이는 방법은 웹 글꼴 로드 중에 텍스트가 계속 표시되도록 하기 게시물을 참고하세요.
실제 사용자 기기에서 FCP 추적
FCP가 실제로 사용자 기기에서 발생하는 시점을 측정하는 방법은 Google의 사용자 중심 성능 측정항목 페이지를 참고하세요. FP/FCP 추적 섹션에서는 프로그래매틱 방식으로 FCP 데이터에 액세스하여 Google 애널리틱스에 제출하는 방법을 설명합니다.
실제 사용자 측정항목 수집에 관한 자세한 내용은 Google의 Navigation 및 Resource Timing으로 실제 생활에서의 로드 성능 평가를 참고하세요.
전반적인 실적 점수를 개선하는 방법
특정 측정항목에 집중해야 하는 특별한 이유가 없다면 일반적으로 전반적인 성능 점수를 개선하는 데 집중하는 것이 좋습니다.
Lighthouse 보고서의 추천 섹션을 사용하면 페이지에 가장 큰 가치가 있는 개선사항을 파악할 수 있습니다. 기회가 클수록 실적 점수에 더 큰 영향을 미칩니다. 예를 들어 아래의 Lighthouse 스크린샷은 렌더링 차단 리소스를 제거하면 가장 큰 개선 효과를 얻을 수 있음을 보여줍니다.
Lighthouse 보고서에서 식별된 기회를 해결하는 방법은 성능 감사 방문 페이지를 참고하세요.