FCP (First Contentful Paint)とは？｜SEO関連用語集

2025年10月28日

読み方: エフシーピー / ファーストコンテンツフルペイント

概要

FCP（First Contentful Paint）とは、ページ読み込み開始から、最初のコンテンツ（テキスト、画像など）が画面に表示されるまでの時間を測定する指標です。

詳細説明

FCP（First Contentful Paint）は、ブラウザがページのDOMから最初のコンテンツ要素（テキスト、画像、SVG、非白色のcanvasなど）をレンダリングするまでの時間を測定する指標です。FCPは、ユーザーが「ページが読み込まれ始めた」と認識する最初のシグナルであり、体感的な読み込み速度の重要な指標となります。LCPとは異なり、FCPは最初のコンテンツが表示されるタイミングを測定します。良好なユーザー体験のためには、FCPは1.8秒以内であることが推奨されています。サーバー応答時間の改善、レンダリングブロックリソースの削除、クリティカルCSSのインライン化などで改善できます。

重要性

FCPが重要な理由は以下の通りです。

ユーザーが「ページが応答している」と感じる最初のポイントとなる
FCPが遅いと、ユーザーがページを離れる可能性が高まる
LCPやその他のパフォーマンス指標に影響を与える基礎的な指標である
モバイルユーザーにとって特に重要な体感速度の指標である
Lighthouse スコアの構成要素として評価される

具体例・実践方法

FCPの改善方法

FCPの測定方法

PageSpeed Insights
Chrome DevToolsのPerformanceタブ
Lighthouse
WebPageTest

FCPの評価基準

良好（Good）: 1.8秒以内 ✅
改善が必要（Needs Improvement）: 1.8〜3.0秒 ⚠️
不良（Poor）: 3.0秒超 ❌

FCPの対象となるコンテンツ

テキスト
画像（background-imageを含む）
非白色の

FCP改善の具体的施策

a. レンダリングブロックリソースの削除

b. サーバー応答時間（TTFB）の改善

前述のTTFB改善施策を参照
CDNの使用
サーバーサイドキャッシュ
高速なホスティング

c. 重要リソースのプリロード

d. Webフォントの最適化

   @font-face {
     font-family: 'CustomFont';
     src: url('font.woff2') format('woff2');
     font-display: swap; /* すぐにフォールバックフォントを表示 */
   }

e. テキストコンテンツの優先表示

サーバーサイドレンダリング（SSR）の活用
静的サイト生成（SSG）の活用
クライアントサイドレンダリングの回避（少なくともファーストビューでは）

f. 画像の遅延読み込み（ファーストビュー以外）

WordPress でのFCP改善

軽量なテーマの選択
クリティカルCSSプラグイン（Autoptimize）
不要なプラグインの削除
キャッシュプラグインの使用

注意点・補足

FCPを改善する際の注意点は以下の通りです。

FCPだけでなく、LCP、INPなど総合的なCore Web Vitals指標を改善する必要がある
クリティカルCSSのインライン化は、HTML サイズを増やすため適度に行う
すべてのリソースをプリロードすると逆効果（本当に重要なもののみ）
ファーストビューの画像は遅延読み込みしない

参考リンク・引用元

この記事が気に入ったら
フォローしてね！

Follow @lynx_seo

よかったらシェアしてね！

URLをコピーしました！

FCP (First Contentful Paint)とは？｜SEO関連用語集

概要

詳細説明

重要性

具体例・実践方法

関連用語

注意点・補足

最新トレンド（2025年）

参考リンク・引用元