First Contentful Paint (FCP)

Nov 7, 2019 — 更新済み Oct 19, 2022

Available in: English、Español、Português、Русский、中文、한국어

Appears in: 指標

FCP とは？ #

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

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

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

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

良好なユーザー体験を提供するために、サイトは First Contentful Paint が 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 は、ページが Back/Forward Cache から復元された場合の 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 でパフォーマンス監査を実行し、そこで推奨される具体的な 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.

最終更新: Oct 19, 2022 — 記事を改善する

Return to all articles

共有する

サブスクライブする