First Contentful Paint(FCP)

Philip Walton 氏
Philip Walton (Philip Walton)

対応ブラウザ

  • 60
  • 79
  • 84
  • 14.1

ソース

FCP とは

First Contentful Paint(FCP)指標は、ユーザーが最初にページに移動してから、ページのコンテンツの一部が画面にレンダリングされるまでの時間を測定します。この指標における「コンテンツ」とは、テキスト、画像(背景画像を含む)、<svg> 要素、または白以外の <canvas> 要素を指します。

google.com の FCP タイムライン

上記の読み込みタイムラインでは、2 番目のフレームで FCP が発生します。このフレームで、最初のテキスト要素と画像要素が画面にレンダリングされます。

一部のコンテンツはレンダリングされていますが、すべてのコンテンツがレンダリングされていないことがわかります。これは、First Contentful Paint(FCP)と Largest Contentful Paint(LCP)の重要な違いです。LCP はページのメイン コンテンツの読み込みが完了したタイミングを測定することを目的としています。

良い FCP スコアとは

優れたユーザー エクスペリエンスを提供するには、First Contentful Paint の時間は 1.8 秒以下にする必要があります。ほとんどのユーザーでこの目標を確実に達成するには、ページ読み込みの 75 パーセンタイルをモバイル デバイスとデスクトップ デバイスでセグメント化して測定するしきい値として適しています。

良好な FCP 値は 1.8 秒以下、不良値は 3.0 秒を超え、その間はすべて改善が必要

FCP の測定方法

FCP はラボまたは現場で測定でき、次のツールで利用できます。

フィールド ツール

ラボ用ツール

JavaScript で 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 エントリにより、最初の Contentful 要素がいつ描画されたかがわかります。ただし、このエントリが FCP の測定に有効でない場合もあります。

次のセクションでは、API のレポート内容と指標の計算方法の違いを示します。

指標と API の違い

  • API はバックグラウンドのタブで読み込まれたページに対して first-contentful-paint エントリをディスパッチしますが、FCP の計算時にはこれらのページを無視する必要があります(ファースト ペイントのタイミングは、ページがずっとフォアグラウンドにあった場合にのみ考慮する必要があります)。
  • ページがバックフォワード キャッシュから復元される場合、API は first-contentful-paint エントリを報告しませんが、FCP はユーザーが個別のページ訪問として認識されるため、測定する必要があります。
  • API は、クロスオリジンの iframe からのペイントのタイミングをレポートしない可能性がありますが、FCP を適切に測定するには、すべてのフレームを考慮する必要があります。サブフレームは、API を使用して、集計のためにペイントタイミングを親フレームに報告できます。
  • この API はナビゲーションの開始から FCP を測定しますが、事前レンダリングされたページについては、ユーザーが経験する FCP 時間に対応するため、FCP は activationStart から測定する必要があります。

デベロッパーは、これらの微妙な違いをすべて記憶する代わりに、web-vitals JavaScript ライブラリを使用して FCP を測定できます。FCP では、これらの違いを処理できます(可能な場合、iframe の問題は対象外です)。

import {onFCP} from 'web-vitals';

// Measure and log FCP as soon as it's available.
onFCP(console.log);

JavaScript で FCP を測定する方法の詳細な例については、onFCP() のソースコードをご覧ください。

FCP を改善する方法

特定のサイトの FCP を改善する方法を確認するには、Lighthouse のパフォーマンス監査を実行し、監査で提案された特定の最適化案診断情報を確認します。

任意のサイトで FCP 全般を改善する方法については、次のパフォーマンス ガイドをご覧ください。

変更履歴

指標の測定に使用する API や、指標自体の定義にバグが見つかることもあります。そのため、必要な変更を行う必要が生じることがあります。また、こうした変更は、内部のレポートやダッシュボードに改善または回帰として表示されることがあります。

指標の実装または定義に対する変更はすべて、こちらの変更履歴に掲載されています。

これらの指標についてフィードバックがある場合は、web-vitals-feedback Google グループからお寄せください。