First Contentful Paint(최초 콘텐츠풀 페인트, FCP)

Nov 7, 2019 — 업데이트됨 Oct 13, 2022

Available in: English, Español, Português, Русский, 中文 및 日本語

FCP란 무엇인가요? #

최초 콘텐츠풀 페인트(FCP) 메트릭은 페이지가 로드되기 시작한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링될 때까지의 시간을 측정합니다. 이 메트릭에서 "콘텐츠"란 텍스트, 이미지(배경 이미지 포함), <svg> 요소 또는 흰색이 아닌 <canvas> 요소를 뜻합니다.

위의 로드 타임라인에서 FCP는 첫 번째 텍스트와 이미지 요소가 화면에 렌더링되는 두 번째 프레임에서 발생합니다.

전체가 아닌 일부 콘텐츠만 렌더링되었음을 확인하실 수 있습니다. 이는 최초 콘텐츠풀 페인트(FCP)와 페이지의 주요 콘텐츠 로딩이 완료된 시점을 측정하는 것을 목표로 하는 *Large Contentful Paint(최대 콘텐츠풀 페인트, LCP)*를 구분하는 중요한 차이점입니다.

좋은 FCP 값은 1.8초 이하이고 나쁜 값은 3.0초보다 크며 그 사이에는 개선이 필요합니다

좋은 FCP 점수는 무엇인가요? #

우수한 사용자 경험을 제공하려면 사이트의 최초 콘텐츠풀 페인트가 1.8초 이하여야 합니다. 대부분의 사용자에 대해 이 목표를 달성할 수 있도록 하려면 모바일 및 데스크톱 기기 전반에 분할된 페이지 로드의 75번째 백분위수를 측정하는 것이 바람직한 임계값입니다.

FCP 측정 방법 #

FCP는 실험실이나 현장에서 측정할 수 있으며 다음 도구에서 사용할 수 있습니다.

현장 도구 #

실험실 도구 #

JavaScript에서 FCP 측정 #

Browser support

chrome 60, Supported 60
firefox 84, Supported 84
edge 79, Supported 79
safari 14.1, Supported 14.1

Source

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는 측정되어야 합니다.
API는 교차 원본 iframe의 페인트 타이밍을 보고하지 않을 수 있지만 FCP를 올바르게 측정하려면 모든 프레임을 고려해야 합니다. 하위 프레임은 API를 사용하여 집계를 위해 상위 프레임에 이러한 페인트 타이밍을 보고할 수 있습니다.

개발자는 이러한 미묘한 차이점을 모두 기억하는 대신 가능한 경우 다음과 같은 차이점을 대신 처리해주는 web-vitals JavaScript 라이브러리를 사용하여 FCP를 측정할 수 있습니다.

import {onFCP} from 'web-vitals';

// FCP를 이용 가능하게 되면 바로 측정 및 기록합니다.
onFCP(console.log);

JavaScript에서 FCP를 측정하는 방법에 대한 전체 예제는 onFCP()의 소스 코드를 참조하세요.

FCP를 개선하는 방법 #

특정 사이트에 대한 FCP를 개선하는 방법을 알아보려면 Lighthouse 성능 감사를 실행하고 감사에서 제안하는 특정한 기회 또는 진단을 주의 깊게 살펴보시기 바랍니다.

모든 사이트에서 일반적으로 FCP를 개선하는 방법을 알아보려면 다음 성능 가이드를 참조하세요.

CHANGELOG #

Occasionally, bugs are discovered in the APIs used to measure metrics, and sometimes in the definitions of the metrics themselves. As a result, changes must sometimes be made, and these changes can show up as improvements or regressions in your internal reports and dashboards.

To help you manage this, all changes to either the implementation or definition of these metrics will be surfaced in this CHANGELOG.

마지막 업데이트: Oct 13, 2022 — 기사 개선하기

Return to all articles