First Contentful Paint (FCP)
First Contentful Paint (FCP)とは
First Contentful Paint (FCP)の基礎知識
First Contentful Paint (FCP) は、ブラウザがページ上のDOM コンテンツ (画像、テキスト、ロゴ、背景グラフィック、白以外の <canvas> 要素)の最初の部分を視覚化する時間を測定した指標で、ページの読み込み速度を評価する際に考慮する要素の 1 つです。
Google LighthouseやPage Speed Insightsのパフォーマンス レポートで追跡される指標の1つです。
First Contentful Paint (FCP)で考慮されるコンテンツ要素
First Contentful Paint (FCP)で考慮されるコンテンツ要素のタイプは次のとおりです。
テキスト
画像 (背景画像を含む)
<svg> 要素
空白以外の <canvas> 要素
上のでは、FCP は 2 フレーム目で発生しています。これが、最初のテキストや画像要素が画面にレンダリングされるタイミングです。
コンテンツの一部がレンダリングされたものの、すべてのコンテンツがレンダリングされたわけではないことがわかります。これは、First Contentful Paint (FCP) と、ページのメイン コンテンツの読み込み完了タイミングの測定が目的となる Largest Contentful Paint (LCP) の重要な違いです。
First Contentful Paint (FCP)とパフォーマンス指標の変遷
2019 年初めに、Google はFirst Contentful Paint (FCP) と First Input Delay (FID) という 2 つのパフォーマンス指標に焦点を当てて Web サイトの速度ランキングを評価すると発表しました。
時間の経過とともに、パフォーマンスの指標は変更されました。
2021年6月にGoogle Page ExperienceUpdate（ページエクスペリエンスアップデート）に伴い、Web サイトまたは Web アプリケーションの読み込みパフォーマンスを測定するCore Web Vitalsを導入しました。
Core Web Vitalsでは、「Largest Contentful Paint (LCP)」、「Cumulative Layout Shift (CLS)」、「First Input Delay (FID)」という3 つの指標で評価されます。
Core Web Vitals を構成する3 つの指標
LCD: Largest Contentful Paint
FID: First Input Delay
CLS: Cumulative Layout Shift
上記の項目からもわかると思いますが、Core Web Vitalsの指標にFirst Contentful Paint (FCP)はノミネートされませんでした。
LCP、 CLS、FIDを重視したCore Web Vitalsが導入されたにもかかわらず、First Contentful Paint 指標は、Lighthouse (およびユーザー エクスペリエンス) 指標として重要な役割を果たし続けています。
Googleは、FCPを使用してWebサイトの速度ランキングを評価すると発表しました。Google の SERP （Search Engine Result Page）ランキングに影響を与えます。これは全体のパフォーマンス スコアの 10% を占めます。
First Contentful Paint(FCP)とLargest Contentful Paint (LCP)とFirst meaningful paint (FMP)の違い
最初の読み込みに関しては3つの指標が存在します。FCPとLCPとFMPです。
ほとんどの場合は、Largest Contentful Paint (LCP)を注視します。FCP は無視できない指標です。
First Contentful Paint(FCP)
First Contentful Paint は、 Largest Contentful Paint (LCP) とは異なります。LCP は、Web サイト上の最も大きなコンテンツが表示されるまでにかかる時間を測定します。一方、FCP はロードする最初の要素を測定します。それが必ずしも最も大きなコンテンツであるとは限りません。
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP)は、サイト上の最大の視覚要素の読み込み時間を測定します。ほとんどの場合、LCP はページ全体ではなく、スクロールせずに見える範囲の視覚要素であるコンテンツを指します。この指標は、Core Web Vitalsの指標の一つです。
First meaningful paint (FMP)
スクロールせずに見えるWeb サイト上で、最初の意味のあるコンテンツをレンダリングするまでの時間 (秒単位) です。
First Meaningful Paint (FMP) は、UXの向上を目的に2016 年に Google によって導入されました。Lighthouse レポートのパフォーマンスセクションで追跡される 6 つの指標のうちの 1 つです。Lighthouse 6.0 で非推奨になりました。最も重要な視覚要素が表示されるまでにかかる時間は、ユーザーのデバイス、ネットワーク速度、ブラウザ設定などのさまざまな要因によって異なります。
ユーザーにとっては最初の要素がブラウザ上にレンダリングされることは、ページは正しく動作していることを示します。その観点からすると、FCPは無視できない指標と言えるでしょう。
理想的なFirst Contentful Paintのスコア
Google では、サイト訪問者に良好なブラウジング エクスペリエンスを提供するために、First Contentful Paint スコアを1.8 秒以下にすることを推奨しています。この期間内にユーザーがページを確実に読み込むには、モバイルとデスクトップに分けてページ読み込みの 75 パーセンタイルを目指すのが適切なしきい値です。
スコアが高いほど FCP のページの読み込みが遅いことを示し、スコアが低いほど FCP の読み込みが速いことを示します。
参考：First Contentful Paint (FCP)｜web.dev
マーケティング活動において、First Contentful Paint (FCP)どのような影響がありますか？
ページが読み込まれていることをユーザーに示し、視覚的なフィードバックを提供するため、重要な指標です。読み込みアニメーション、会社のロゴなどは重要な要素と思えないかもしれませんが、ユーザー エクスペリエンスにとっては重要です。ページが読み込まれる前に数秒間空白のままだと、ユーザーは何かが起こっているのかどうかわかりません。Web サイトが与える第一印象を表す良い指標です。
FCP は Lighthouse パフォーマンス スコアの約 10% を占めます。Largest Contentful Paintは、Google によるとLighthouse のパフォーマンス スコアの25%を占めると言われています。
First Contentful Paint はCore Web Vitalsではありませんが、 Largest Contentful Paint などのCore Web Vitalsに影響を与えます。
たとえば、レンダリングをブロックするJavaScript や CSS などは FCP を遅延させ、その結果としてLCP も遅延することがあります。ページが FCP に到達するまでにより多くの時間がかかり、より大きな画像を含む LCP に到達するということです。
つまり、First Contentful Paint はUX向上のために対処すべき重要な指標です。
フランスの多国籍自動車メーカーのルノーによると、1 秒の LCP 改善により、直帰率が 14 %減少し、コンバージョンが 13% 増加する可能性が示唆されています。LCP最適化の取り組みの戦略として、高速な First Contentful Paint (FCP)も含まれています。
First Contentful Paint (FCP)の測定方法
FCP は、ラボ (リリース前) と現場 (実際のユーザー) で測定できます。
ラボで FCP をテストすることは、サイトを公開する前に問題を解決する良い方法ですが、パフォーマンスを評価する最も正確な方法ではありません。そこでフィールド テストが役に立ち、デバイス、ネットワーク接続、ユーザー インタラクションに違いがある場合にユーザーがサイトとどのようにインタラクションするかを示します。
次のツールを使用して、First Contentful Paint をテストできます。
フィールドデータ（実際にユーザーがアクセスした環境で取得した数値）
Chrome User Experience Report
PageSpeed Insights
Search Console (Core Web Vitals Report)
web-vitals JavaScript ライブラリ
ラボデータ（PSIを実行した環境におけるシミュレーション環境での数値）
Chrome DevTools
Lighthouse
PageSpeed Insights
First Contentful Paint (FCP)を向上させるポイント
First Contentful Paint (FCP)がWeb サイトのパフォーマンスを決定する唯一の指標ではないことは注目に値します。Largest Contentful Paint、Speed Index、Time to Interactive、Total Blocking Time などの他の指標も、Web サイトとページ エクスペリエンスの全体的なパフォーマンスを決定する上で重要な役割を果たします。
特に、Largest Contentful Paintとの組み合わせで、読み込み速度への対処にあたることができます。FCP および LCPの指標を改善することで、全体的な読み込み時間を短縮できます。
しかし、FCP スコアを向上させるのは必ずしも簡単なわけではありません。
FCP の向上に関しては、改善すべき対応は一つとは限らず、問題のページに組み込んだ要素によって異なります。最も重大な影響を与えるエラーに優先順位を付けることは、正しい戦略を使用することで管理しやすくなります。
ページ速度の問題への対処は非常に複雑になる可能性があるため、Web 開発チームに連絡して、Google の推奨事項に従う方法を検討してください。
弊社では、Web サイトのパフォーマンスに関するクライアントの状況に応じたサポートを提供しています。現在お困りの場合、またはこれからSEOやWebサイトの再設計、Webサイトの定期的な最適化どうしたら良いか悩んでいるケースでもまずはお気軽にお問合せください。