First Contentful Paint（FCP）

Philip Walton

First Contentful Paint（FCP）は、認識される読み込み速度を測定するためのユーザー中心の重要な指標です。これは、ページ読み込みタイムラインで、画面上のすべての項目がユーザーに表示される最初のポイントです。FCP が高速の場合、ユーザーは、何かが起きていることを確認できます。

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

最初のコンテンツ要素のレンダリング時に、すべてのコンテンツがレンダリングされるわけではありません。これは、FCP と、ページのメイン コンテンツの読み込みが完了した時間を測定する Largest Contentful Paint（LCP）との重要な違いです。

良い FCP スコアとは

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

FCP の測定方法

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

フィールド ツール

• PageSpeed Insights
• Chrome ユーザー エクスペリエンス レポート
• Search Console（スピードレポート）
• web-vitals JavaScript ライブラリ

ラボ用ツール

• 灯台
• Chrome DevTools
• PageSpeed Insights

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 を測定できます。これにより、可能であれば差異に対処できます（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 全般を改善する方法については、次のパフォーマンス ガイドをご覧ください。

• レンダリング ブロック リソースを排除する
• CSS を最小化する
• 使用していない CSS を削除する
• 使用していない JavaScript を削除する
• 必要なオリジンに事前接続する
• サーバーの応答時間（TTFB）を短縮する
• 複数のページ リダイレクトを回避する
• キー リクエストをプリロードする
• 膨大なネットワーク ペイロードを回避する
• 効率的なキャッシュ ポリシーを使用して静的アセットを提供する
• 過度な DOM サイズを避ける
• クリティカル リクエストの深さを最小限に抑える
• ウェブフォントの読み込み時にテキストを表示したままにする
• リクエスト数を少なくし、転送サイズを小さくする

変更履歴

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

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

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