【ファーストコンテンツフルペイント】
First Contentful Paint（FCP） とは？
最終更新:
💡 真っ白な画面から最初の「何か」が見えた瞬間——その速さがFCP
ページへのナビゲーション開始から、最初のテキストや画像などのコンテンツが画面に描画されるまでの時間を測る指標。
📌 このページのポイント
- 最初のテキスト・画像・SVG・白以外のcanvas描画などが対象
- Web Vitalsの目安は1.8秒以下が良好、1.8秒超〜3秒以下が要改善、3秒超が不良
- 実ユーザーの評価では、スマホとPCを分けた読み込みの75パーセンタイルを使う
- FCPはCore Web Vitalsの一つではなく、読み込みの問題を調べる補助指標
ひよこ FCPって何を測ってるの？
ペンギン先生 ページへのナビゲーション開始から最初のコンテンツが表示されるまでの時間だよ。テキスト、画像、SVG、白以外のcanvas描画などが対象で、ページ全体の読み込み完了を測るわけではないんだ。
ひよこ 真っ白な画面が長いサイトはFCPが遅いの？
ペンギン先生 何も対象コンテンツが表示されなければFCPも遅くなるよ。Web Vitalsの目安は1.8秒以下が良好、1.8秒超から3秒以下が要改善、3秒超が不良。実ユーザーでは端末種別ごとの75パーセンタイルで評価する。LighthouseのPC向け採点は別の基準だから、測定条件も確認してね。
ひよこ どうすればFCPを速くできるの？
ペンギン先生 ひよこ LCPっていう似た指標との違いは？
ペンギン先生 FCPは最初の対象コンテンツ、LCPは画面内で最大の対象コンテンツの描画を測るよ。最初に小さな文字、後で大きな画像が出れば別の時点になるし、同じ時点になる場合もある。Core Web VitalsはLCP・INP・CLSで、FCPは読み込みを調べる補助指標だよ。
まとめ：ざっくりこれだけ覚えればOK！
「FCP」って出てきたら「ページに最初のコンテンツが表示されるまでの時間」と思えればだいたいOK！
📖 おまけ：英語の意味
「First Contentful Paint」 ＝ 最初のコンテンツ描画
💬 Firstは最初の、Contentfulはコンテンツのある、Paintは描画。背景色が変わるだけでは、対象となるコンテンツが描画されたことにはならないよ。