First Contentful Paint (FCP)

First Contentful Paint (FCP)

更新済み
Appears in: 指標

First Contentful Paint (視覚コンテンツの初期表示時間、FCP) は、知覚される読み込み速度を測定するための重要なユーザーを中心とした指標です。これは、FCP がページの読み込みタイムラインにおいて最初にコンテンツが読み込まれたと思われる時点 (ユーザーが画面上に何らかのコンテンツが表示されたことを確認するタイミング) を示すためです。FCP を高速にすることで、そのページが動作していることをユーザーに確信させることができるようになります。

FCP とは? #

First Contentful Paint (FCP) 指標は、ページの読み込みが開始されてからページ内のコンテンツのいずれかの部分が画面上にレンダリングされるまでの時間を測定します。この指標における "コンテンツ" は、テキスト、画像 (背景画像を含む)、<svg> 要素、白以外の <canvas> 要素のことを指しています。

google.com の FCP タイムライン

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

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

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

FCP における良いスコアとは? #

良好なユーザー体験を提供するために、サイトは First Contentful Paint が 1.8 秒以下になるように努力する必要があります。ほぼすべてのユーザーに対してこの目標値を確実に達成するためには、モバイル デバイスとデスクトップ デバイスに分けた上で、総ページロード数の 75 パーセンタイルをしきい値として設定します。

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 エントリをコンソールにログとして記録する方法を示していますが、JavaScript を使用して FCP を測定する方法はより複雑です。詳細については、以下を参照してください。

上記の例では、ログに記録されている first-contentful-paint エントリが、最初の視覚コンテンツ要素が描画されるタイミングを教えてくれます。ただし、このエントリが FCP の測定に有効とはならない場合もあります。

次のセクションでは、API がレポートする内容と、指標の計算方法の違いについて説明します。

指標と API の違い #

  • API はバックグラウンド タブで読み込まれているページに対しても first-contentful-paint エントリをディスパッチしますが、FCP を計算する場合には、そういったページは無視する必要があります (最初の描画タイミングが考慮されるのは、ページがずっとフォアグラウンドにあった場合のみです)。
  • API は、ページが Back/Forward Cache から復元された場合の first-contentful-paint エントリはレポートしませんが、これらはユーザーにとっては別々のページ訪問となるため、こういったケースにおいても FCP は測定される必要があります。
  • API では クロス オリジンの iframe の描画タイミングはレポートされない場合がありますが、FCP を正確に測定するためにはすべてのフレームを考慮に入れる必要があります。サブフレームが集約のために API を使用してその親フレームに描画タイミングをレポートすることができます。

こういった微妙な違いをすべて記憶していなくても、web-vitals JavaScript ライブラリを使用して FCP を測定すれば、これらの違いを (可能な限り) 処理してくれます。

import {getFCP} from 'web-vitals';

// 実行可能となった時点ですぐに FCP の測定やログ記録を実行します。
getFCP(console.log);

JavaScript を使用して FCP を測定する方法に関する詳細な例については、getFCP() のソース コードを参照してください。

場合によっては (クロスオリジン iframe など)、JavaScript を使用して FCP を測定することはできません。詳細については、web-vitals ライブラリの「制限事項」セクションを参照してください。

FCP の改善方法 #

特定のサイトについて FCP の改善方法を把握するには、Lighthouse でパフォーマンス監査を実行し、そこで推奨される具体的な Opportunities (改善機会) や Diagnostics (診断) に注目します。

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.

最終更新: 記事を改善する