【ファーストコンテンツフルペイント】
First Contentful Paint（FCP） とは？
💡 真っ白な画面から最初の「何か」が見えた瞬間——その速さがFCP
📌 このページのポイント
- ナビゲーション開始から最初のテキストや画像が描画されるまでの時間
- 1.8秒以下が「良好」、3.0秒超が「改善が必要」とされる
- CSS・フォント・JavaScriptの最適化がFCP改善に直結する
- Core Web Vitalsの補助指標として広く使われる
ひよこ FCPって何を測ってるの？
ペンギン先生 ページにアクセスしてから、最初に何かしらのコンテンツ——テキストでも画像でもSVGでも——が画面に表示された瞬間までの時間だよ。ユーザーが「あ、読み込み始まった」と感じるタイミングだね
ひよこ 真っ白な画面が長いサイトってFCPが遅いってことなの？
ペンギン先生 その通り！FCPが遅いとユーザーは「このサイト壊れてるのかな？」と不安になって離脱しちゃう。1.8秒以下が良好で、3秒を超えると要改善とされてるよ
ひよこ どうすればFCPを速くできるの？
ペンギン先生 まずレンダーブロッキングを減らすことだね。CSSは最小限にしてクリティカルCSSをインライン化する。JavaScriptにはdeferやasyncを付ける。サーバーのレスポンス速度（TTFB）を上げるのも効果的だよ
ひよこ LCPっていう似た指標もあるよね？違いは何なの？
ペンギン先生 FCPは「最初の何か」が表示された時点、LCP（Largest Contentful Paint）は「一番大きなコンテンツ」が表示された時点だよ。FCPが速くてもLCPが遅いと、ユーザーは「メインの内容がなかなか出てこない」と感じるんだ。両方をバランスよく改善するのが大事だね
まとめ：ざっくりこれだけ覚えればOK！
「FCP」って出てきたら「ページに最初のコンテンツが表示されるまでの時間」と思えればだいたいOK！
📖 おまけ：英語の意味
「First Contentful Paint」 ＝ 最初のコンテンツ描画
💬 First（最初の）Contentful（コンテンツのある）Paint（描画）で、真っ白画面が終わる瞬間のことだよ