첫 번째 의미 있는 페인트 (FMP)는 Lighthouse 보고서의 성능 섹션에서 추적되는 6가지 측정항목 중 하나입니다. 각 측정항목은 페이지 로드 속도의 측면을 나타냅니다.
Lighthouse는 FMP를 몇 초 만에 표시합니다.
FMP가 측정하는 항목
FMP는 페이지의 기본 콘텐츠가 사용자에게 표시되는 시점을 측정합니다. FMP의 원시 점수는 사용자가 페이지 로드를 시작한 후 스크롤 없이 볼 수 있는 기본 콘텐츠를 렌더링하는 페이지 사이의 시간(초)입니다. FMP는 기본적으로 스크롤 없이 볼 수 있는 부분의 가장 큰 레이아웃 변경이 발생하는 시점의 페인트 시점을 보여줍니다. Google의 Time to First Meaningful Paint: 레이아웃 기반 접근 방식에서 FMP의 기술 세부정보에 관해 자세히 알아보세요.
콘텐츠가 포함된 첫 페인트 (FCP)와 FMP는 페이지에서 렌더링된 첫 번째 비트에 스크롤 없이 볼 수 있는 부분에 콘텐츠가 포함되는 경우가 많습니다. 그러나 이러한 측정항목은 iframe 내에서 스크롤 없이 볼 수 있는 부분에 있는 콘텐츠가 있는 경우 달라질 수 있습니다. FMP는 iframe 내의 콘텐츠가 사용자에게 표시될 때 등록되지만 FCP에는 iframe 콘텐츠가 포함되지 않습니다.
Lighthouse에서 FMP 점수를 결정하는 방법
FCP와 마찬가지로 FMP는 HTTP 자료실의 실제 웹사이트 성능 데이터를 기반으로 합니다.
FMP와 FCP가 동일하면 점수가 동일합니다. FCP 이후에 FMP가 발생하면(예: 페이지에 iframe 콘텐츠가 포함된 경우) FMP 점수는 FCP 점수보다 낮습니다.
예를 들어 FCP가 1.5초이고 FMP가 3초라고 가정해 보겠습니다. FCP 점수는 99점이지만 FMP 점수는 75점입니다.
다음 표에서는 FMP 점수를 해석하는 방법을 보여줍니다.
| FMP 측정항목 (초 단위) |
색 구분 | FMP 점수 (FCP HTTP 보관 파일 백분위수) |
|---|---|---|
| 0~2 | 녹색 (빠름) | 75~100 |
| 2~4 | 주황색 (보통) | 50~74 |
| 4명 초과 | 빨간색 (느림) | 0~49 |
FMP 점수를 개선하는 방법
사이트의 최대 콘텐츠 렌더링 시간 개선 방법을 참고하세요. FMP 개선 전략은 최대 콘텐츠 렌더링 시간 개선 전략과 대체로 동일합니다.
실제 사용자 기기에서 FMP 추적
사용자 기기에서 FMP가 실제로 발생하는 시점을 측정하는 방법을 알아보려면 Google의 사용자 중심 성능 측정항목 페이지를 참고하세요. 히어로 요소를 사용하여 FMP 추적 섹션에서는 프로그래매틱 방식으로 FCP 데이터에 액세스하여 Google 애널리틱스에 제출하는 방법을 설명합니다.
실제 사용자 측정항목 수집에 관한 자세한 내용은 Google의 Navigation 및 Resource Timing으로 실제 생활에서의 로드 성능 평가를 참고하세요. 사용자 시간 표시 및 측정 Lighthouse 감사를 사용하면 보고서에서 사용자 시간 데이터를 볼 수 있습니다.
전반적인 실적 점수를 개선하는 방법
특정 측정항목에 집중해야 하는 특별한 이유가 없다면 일반적으로 전반적인 성능 점수를 개선하는 데 집중하는 것이 좋습니다.
Lighthouse 보고서의 추천 섹션을 사용하면 페이지에 가장 큰 가치가 있는 개선사항을 파악할 수 있습니다. 기회가 클수록 실적 점수에 더 큰 영향을 미칩니다. 예를 들어 아래의 Lighthouse 스크린샷은 렌더링 차단 리소스를 제거하면 가장 큰 개선 효과를 얻을 수 있음을 보여줍니다.
Lighthouse 보고서에서 식별된 기회를 해결하는 방법은 성능 감사 방문 페이지를 참고하세요.