FCPとは？低下原因と改善方法の解説

Core Web Vitals（コアウェブバイタル）の指標の一つであるLCP（Largest Contentful Paint）。このLCPと密接に関わる指標がFCPです。FCPとはFirst Contentful Paintの略で、テキストまたは画像が初めて表示されるまでの時間を指します。

FCPは最初のコンテンツ表示までの時間なのでHTMLレンタリングの流れを把握するとFCPの理解の助けとなります。HTML・CSS・JavaScript・画像を読み込み後に画面表示されます。つまりFCP対策にはこれらの最適化が必要なのです。

FCPの計測方法

さて、FCPの計測はPageSpeed Insights（ページスピードインサイト）で行えます。ページのURLを入力すればFCPスコアが計測できます。

FCPスコアは緑（高速：1.8秒以下）、オレンジ（中程度：1.8秒以上〜3秒以下）、赤（遅い：3秒超）です。

FCP低下の原因

FCP低下の要因となるのは以下です。

• サーバー応答速度
• リダイレクトの適用
• CSSの読み込み
• JavaScriptの読み込み
• 画像表示

これらを適正化することでFCP改善ができます。

FCP改善方法とは？

上記FCP低下要因への施策は以下です。

• サーバー選定
• サーバー設定の変更
• リダイレクトの回避
• CSSのインライン化、不要なCSSの削除
• JavaScriptを厳選する、使用していないJavaScriptの削除
• JavaScriptの非同期化、読み込みの優先順位をコントロール
• 画像の遅延読み込み
• WebP画像の使用
• 画像のwidthとheightを設定する

サーバー設定やリダイレクト回避は基本部分ですが、他の改善施策はFCPに限らないものです。

LCPへの対策を重視する

FCP対策ですが、LCP改善を行えばFCPも改善できます。FCPはコンテンツの最初のいずれかが対象なのですが、LCPは最も大きなコンテンツが対象となります。経験上、FCPよりもLCPへの対応の方が難易度が高いです。なのでFCP単体で考える必要はないかなと。なお、LCP最適化はこちらをご覧ください。