First Contentful Paint（FCP）とは？意味・確認方法・改善方法

Webサイトの表示速度は、ユーザー体験やSEOに大きく影響します。

その表示速度指標の1つが「First Contentful Paint（FCP）」です。

First Contentful Paint（FCP）とは？

First Contentful Paint（FCP）とは、Webページを開いた際に、テキスト・画像・SVGなどのコンテンツが最初に表示されるまでの時間を示す指標です。

ユーザー視点では、「ページが読み込まれ始めた」と感じる最初のタイミングでもあり、体感速度に大きく関係します。

ページ表示速度を測る重要な指標の1つとして、PageSpeed Insights や Lighthouse でも利用されています。

Core Web Vitals との関係

FCPは、現在の Core Web Vitals の主要指標には含まれていません。

ただし、ページ表示速度を確認する補助指標として重要視されており、LCP（Largest Contentful Paint）などとあわせて確認されることが多いです。

FCPが重要な理由

FCPは、ユーザーが「ページが読み込まれている」と感じる最初の指標です。

表示が早いと、

• 待たされている感覚を減らせる
• 離脱率を下げやすくなる
• サイトへの信頼感につながる

といった効果が期待できます。

一方、長時間真っ白な状態が続くと、ページを閉じられる可能性があります。

また、Googleはページ体験を重視しているため、FCP改善はSEOにも良い影響を与える可能性があります。

さらに、FCP改善のための画像最適化や不要コード削減は、LCPやTTFBなど他のパフォーマンス指標改善につながる場合もあります。

FCPの目安はどれくらい？

Googleでは、FCPの推奨値として以下の基準を示しています。

• 良好：1.8秒以下
• 改善が必要：1.8～3.0秒
• 不良：3.0秒以上

できるだけ1.8秒以内を目指すのが理想です。

FCPを確認する方法

PageSpeed Insights で確認する方法

PageSpeed Insights にURLを入力すると、FCPを確認できます。
PageSpeed Insights

測定結果の「パフォーマンス」項目内に表示されます。
モバイル、パソコンをそれぞれ測定できるため、両方確認するのがおすすめです。

Chrome DevTools / Lighthouse で確認する方法

Chromeの開発者ツールから Lighthouse を利用して測定することも可能です。

手順

1. Chromeでページを開く
2. F12キーで開発者ツールを開く
3. 「Lighthouse」タブを選択
4. 「Analyze page load」を実行

測定後、FCPを含む各種パフォーマンス指標が表示されます。

FCPが遅くなる主な原因

画像や動画の容量が大きい

高解像度画像や動画が多いと、最初の表示まで時間がかかります。
特にファーストビューに大きな画像を配置している場合は注意が必要です。

CSS・JavaScriptの読み込みが多い

大量のCSSやJavaScriptは、描画開始を遅らせる原因になります。
不要なライブラリや未使用コードは削除しましょう。

サーバー応答速度が遅い

サーバーのレスポンスが遅いと、HTML取得が遅れ、FCPも悪化します。
サーバー負荷やPHP処理の重さなども影響します。

FCPを改善する方法

画像を最適化する

画像サイズを圧縮し、必要に応じてWebP形式を利用すると表示速度を改善できます。

loading="lazy" を活用する

画面外の画像を遅延読み込みすることで、初期表示を高速化できます。

<img src="image.jpg" loading="lazy" alt="">

loading="lazy" については以下の記事で解説しています。

不要なCSS・JavaScriptを削減する

不要なライブラリや未使用コードは削除しましょう。
CSS・JavaScriptの圧縮（minify）も有効です。

また、JavaScriptの読み込みに defer を付与すると、HTML解析を妨げずに読み込めるため、初期表示速度の改善につながる場合があります。

<script src="script.js" defer></script>

キャッシュを活用する

ブラウザキャッシュを利用すると、再訪問時の表示速度改善が期待できます。

また、サイト規模や配信地域によってはCDNの利用が有効な場合もあります。

サーバー環境を見直す

高速なサーバーへの移行やPHPバージョン更新で改善する場合もあります。
WordPressではキャッシュ系プラグインも有効です。

LCPやSpeed Indexとの違い

一方で、

• LCP：メインコンテンツが表示されるまで
• Speed Index：ページ全体の表示速度感

を評価します。

そのため、FCPだけでなく複数の指標を総合的に確認することが重要です。

まとめ

First Contentful Paint（FCP）は、ページ内のコンテンツが最初に表示されるまでの時間を測定する指標です。

FCPを改善すると、

• ユーザー体験向上
• 離脱率改善
• SEO改善

などにつながる可能性があります。

PageSpeed Insights や Lighthouse を活用しながら、画像最適化や不要コード削減などを行い、表示速度改善を進めていきましょう。