콘텐츠가 포함된 첫 페인트 (FCP)는 인지된 로드 속도를 측정하는 중요한 사용자 중심 측정항목입니다. 페이지 로드 타임라인에서 사용자가 화면의 모든 내용을 볼 수 있는 첫 번째 지점을 표시합니다. FCP가 빠르면 사용자에게 발생한 문제가 있다고 사용자를 안심시키는 데 도움이 됩니다.
FCP는 사용자가 처음 페이지로 이동한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링된 시점까지의 시간을 측정합니다. 이 측정항목에서 '콘텐츠'는 텍스트, 이미지 (배경 이미지 포함), <svg> 요소 또는 흰색이 아닌 <canvas> 요소를 의미합니다.
첫 번째 콘텐츠 요소가 렌더링될 때 모든 콘텐츠가 렌더링되는 것은 아닙니다. 이는 페이지의 기본 콘텐츠가 로드가 완료된 시점을 측정하는 FCP와 최대 콘텐츠 렌더링 시간 (LCP)을 구분하는 중요한 차이점입니다.
좋은 FCP 점수란 무엇인가요?
우수한 사용자 환경을 제공하려면 사이트의 FCP가 1.8초 이하여야 합니다. 대부분의 사용자가 이 목표를 달성하도록 하려면 모바일 및 데스크톱 기기별로 분류된 페이지 로드의 75번째 백분위수를 측정해 보는 것이 좋습니다.
FCP 측정 방법
FCP는 실험실 또는 현장에서 측정할 수 있으며 다음 도구에서 사용할 수 있습니다.
현장 도구
실습 도구
자바스크립트에서 FCP 측정
JavaScript에서 FCP를 측정하려면 Paint Timing API를 사용하세요.
다음 예는 이름이 first-contentful-paint인 paint 항목을 수신 대기하고 콘솔에 로깅하는 PerformanceObserver를 만드는 방법을 보여줍니다.
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
console.log('FCP candidate:', entry.startTime, entry);
}
}).observe({type: 'paint', buffered: true});
이 예에서 로깅된 first-contentful-paint 항목은 콘텐츠가 포함된 첫 번째 요소가 그려진 시점을 알려줍니다. 하지만 이 항목이 FCP 측정에 유효하지 않은 경우도 있습니다.
다음 섹션에는 API 보고와 측정항목 계산 방법의 차이점이 나와 있습니다.
측정항목과 API의 차이점
- API는 백그라운드 탭에 로드된 페이지의
first-contentful-paint항목을 전달하지만 FCP를 계산할 때 이러한 페이지를 무시해야 합니다. 첫 번째 페인트 타이밍은 페이지가 완전히 포그라운드에 있었던 경우에만 고려됩니다. - 페이지가 뒤로-앞으로 캐시에서 복원될 때 API가
first-contentful-paint항목을 보고하지 않지만, 이 경우 사용자가 FCP를 측정해야 합니다. 이는 사용자가 FCP를 고유한 페이지 방문으로 경험하기 때문입니다. - API가 교차 출처 iframe의 페인트 타이밍을 보고하지 않을 수 있지만 FCP를 올바르게 측정하려면 모든 프레임을 고려해야 합니다. 하위 프레임은 API를 사용하여 집계를 위해 상위 프레임에 페인트 타이밍을 보고할 수 있습니다.
- API는 탐색 시작부터 FCP를 측정하지만 사전 렌더링된 페이지의 경우 사용자가 경험하는 FCP 시간에 해당하므로
activationStart에서 FCP를 측정해야 합니다.
개발자는 이러한 미묘한 차이를 모두 기억하지 않고 web-vitals JavaScript 라이브러리를 사용하여 FCP를 측정할 수 있습니다. FCP는 가능한 경우 이러한 차이를 처리합니다 (iframe 제외).
import {onFCP} from 'web-vitals';
// Measure and log FCP as soon as it's available.
onFCP(console.log);
자바스크립트에서 FCP를 측정하는 방법에 관한 전체 예는 onFCP() 소스 코드를 참고하세요.
FCP 개선 방법
특정 사이트의 FCP를 개선하는 방법을 알아보려면 Lighthouse 성능 감사를 실행하고 감사에서 제안하는 특정 기회 또는 진단에 주의를 기울이면 됩니다.
모든 사이트의 FCP를 전반적으로 개선하는 방법을 알아보려면 다음 성능 가이드를 참고하세요.
- 렌더링 차단 리소스 제거
- CSS 축소
- 사용하지 않는 CSS 삭제
- 사용하지 않는 자바스크립트 삭제하기
- 필수 출처에 미리 연결
- 서버 응답 시간 (TTFB) 단축
- 여러 페이지 리디렉션 피하기
- 주요 요청 미리 로드
- 방대한 네트워크 페이로드 피하기
- 효율적인 캐시 정책을 사용하여 정적 애셋 제공
- 과도한 DOM 크기 피하기
- 중요한 요청 깊이 최소화
- 웹폰트가 로드되는 동안 텍스트가 계속 표시되도록 하기
- 요청 수를 낮게 유지하고 전송 크기를 작게 유지
변경 로그
측정항목을 측정하는 데 사용되는 API에서 버그가 발견되기도 하고 측정항목 자체의 정의에서도 버그가 발견되기도 합니다. 그 결과, 때때로 변경이 필요하며, 이러한 변경은 내부 보고서와 대시보드에서 개선 또는 회귀로 표시될 수 있습니다.
이를 쉽게 관리할 수 있도록 이러한 측정항목의 구현 또는 정의에 대한 모든 변경사항이 이 변경 로그에 표시됩니다.
이러한 측정항목에 관한 의견이 있으면 web-vitals-feedback Google 그룹에 제공해 주세요.