First Contentful Paint（FCP）

Philip Walton

対応ブラウザ

• 60
• 79
• 84
• 14.1

ソース

注: First Contentful Paint（FCP）は、ユーザーが認識した読み込み速度を測定するための重要なユーザー中心の指標です。これは、ページ読み込みのタイムラインでユーザーが画面上のすべての情報を確認できる最初のポイントになるためです。高速の FCP により、ユーザーは起こっていることを安心できます。

FCP とは

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

重要なポイント: FCP には、前のページからのアンロード時間、接続セットアップ時間、リダイレクト時間、最初のバイトまでの時間（TTFB）が含まれます。これらは現場で測定すると顕著になり、現場とラボの測定結果に差異が生じる場合があります。

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

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

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

優れた FCP スコアとは

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

適切な FCP 値は 1.8 秒以下です。低い値は 3.0 秒を超えています

FCP の測定方法

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

フィールド ツール

• PageSpeed Insights
• Chrome ユーザー エクスペリエンス レポート
• Search Console（Speed Report）
• 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 エントリをコンソールに記録する方法を示していますが、JavaScript での FCP の測定はより複雑です。以下で詳しくご説明します。

前のコード スニペットでは、ログに記録された first-contentful-paint エントリから、最初のコンテンツ要素がいつ描画されたかがわかります。ただし、このエントリは FCP の測定に有効でない場合もあります。

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

指標と API の違い

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

デベロッパーは、こうした微妙な違いをすべて覚える代わりに、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() のソースコードをご覧ください。

注: クロスオリジンの iframe などでは、JavaScript で FCP を測定できないことがあります。詳細については、web-vitals ライブラリの制限事項のセクションをご覧ください。

FCP を改善する方法

特定のサイトの FCP を改善する方法については、Lighthouse のパフォーマンス監査を実施して、監査で示された最適化案や診断情報に注目してください。

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

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

変更履歴

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

管理しやすくするために、これらの指標の実装または定義に対するすべての変更は、こちらの変更履歴で確認できます。

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