First Contentful Paint（FCP）についてお悩みでしょうか。
FCPが何かイマイチわからないという方にとっても、FCPの具体的な改善方法をお探しの方にとっても、この記事がお役に立てるはずです。まずは、First Contentful Paint（FCP）とは何かについてご説明した後、サイト上での測定方法をご紹介します。
後半では、サイトのFCPを改善する効果的なヒントを取り上げます。誰でも簡単に実践できるよう、使いやすいツールやWordPressプラグインも併せてご紹介していきます。
First Contentful Paint（FCP）とは
First Contentful Paint（FCP）とは、ユーザーエクスペリエンスを測るGoogleのCore Web Vitalsのパフォーマンス指標で、「ページの最初のコンテンツをブラウザが描画し始める時点」を示します。
FCPは知覚的なパフォーマンスに直接影響するため、重要な指標です。サイトの表示速度が遅い場合、サイトにアクセスすると、コンテンツが読み込まれるまで真っ白な画面が表示されることがあります。これでは訪問者のユーザー体験を損なうことになります。
その後は、コンテンツの読み込みが始まり、訪問者が何かしらの動作が起こっていることを認識して、コンテンツ全体が表示されますが、FCPの時間が速ければ、残りのコンテンツの読み込みに多少の時間がかかっても、知覚的には「高速なサイト」に見せることができます。
逆にFCPが遅ければ、ページの読み込みに時間がかかっていることが目に見えてわかり、ユーザーがサイトを離脱してしまう原因になりかねません。サイトを訪れてくれたユーザーに真っ白な画面を表示し、本当にサイトが存在するのかを疑われることほど嫌なものはありません。
Largest Contentful Paint（LCP）との違い
Largest Contentful Paint（LCP）は、First Contentful Paintと同様、ユーザー体験を測るCore Web Vitalsの一指標です。
LCPとFCPは非常に似ているため、混同されることがあります。以下、基本的な違いを押さえておきましょう。
- FCP─コンテンツを問わず、最初のオブジェクトが表示されるまでの時間
- LCP─ページの主要コンテンツが表示されるまでの時間
この定義を踏まえると、FCPはLCPの時間よりも短くなります（技術的にLCPがFCPの時間より短くなることはあり得ない）。最初に読み込まれるコンテンツがページのメインとなるコンテンツである場合は、まったく同じになる可能性がありますが、これは非常に稀です。
例として、Kinstaサイトのトップページで実行したWebPageTestの分析（フィルムストリップビュー）をご紹介します。
- FCP─真っ白な画面から何らかの視覚的コンテンツが表示される最初の瞬間。およそ1.0秒のフィルムストリップで発生。
- LCP─ページの主要コンテンツが表示される瞬間。およそ1.3秒のフィルムストリップで発生。
理想的なFCPのスコア
FCPは、1.8秒以下であることが理想とされています。
1.8～3.0秒は「改善が必要」（オレンジ）、3.0秒以上は「不良」（赤）の評価になります。
ウェブページのFCPを測定する方法
自分のサイトのページのFCPを測定する最も簡単な方法は、GoogleのPageSpeed Insightsを使用することです（その他の選択肢はこちら）。
PageSpeed Insightsの良い点は、再現されたテスト結果と実際のFCPデータの両方を取得できることです（Chrome User Experience Reportに含まれるのに十分なトラフィックがある場合）。
ページのFCPは、訪問者が使用しているデバイスや接続速度によって異なるものですが、PageSpeed Insightsでは、PCとモバイルの両方のパフォーマンスを測定することができます。
使い方は非常にシンプルです。
- PageSpeed Insightsを開く
- テストしたいページのURLを貼り付ける
- 「分析」をクリック
しばらくすると、結果が表示されます。
Chrome User Experience Reportに含まれるほどのトラフィックがある場合は、以下2種類のFCPが表示されます。
- 「実際のユーザーの環境で評価する」─サイトの訪問者に対するFCP
- 「パフォーマンスの問題を診断する」─シミュレーションされたデータに基づくFCP（シミュレーションの条件は数値の下にあるグレーのボックスで確認可能）
また、上部にあるタブで、モバイルとPCの結果を切り替えることができます。
確認したいページが複数ある場合は、同じプロセスを繰り返します。
FCPはページごとに異なります。パフォーマンスの良し悪しを見るため、複数のページを分析することをお勧めします（トップページ、ブログ記事の一覧ページ、1件のブログ記事など）。また、モバイルとPCの両方を必ず確認しましょう。
FCPを測定するその他の方法
PageSpeed Insightsは、実際のサイトのFCPと再現したFCPの両方を分析できる便利なツールですが、補完あるいは代替ツールとして使えるパフォーマンステストツールも存在します。
例えば、以下のようなソリューションがお勧めです。
- WebPageTest─異なる接続速度、デバイス、場所を想定したシミュレーションテストを実行可能
- Chromeのデベロッパーツール─ブラウザ上でパフォーマンス テストを実行可能
- DebugBear─PCとモバイルの両方からシミュレーションテストを実行可能
- GTmetrix─様々な場所からシミュレーションテストを実行可能（FCPは「Performance」タブで確認可能。詳しいテスト方法はこちら）
FCPに悪影響を与える要因
もう少し技術的なお話をすると、以下のような状況は、FCPに悪影響を与えます。
- サーバーの応答時間が遅い─サーバーがブラウザにサイトデータを提供するのに時間がかかりすぎると、ページのFCPが遅くなります。これには、ホスティングやDNSが低速、キャッシュを使用していない（ページを配信するのにサーバーにより大きな負担がかかる）、コンテンツデリバリネットワーク（CDN）を使用していない、などが考えられます。
- サイトのコードが最適化されていない─サーバーの応答が高速でも、サイトのコードが十分に最適化されていない場合、FCPが遅くなる可能性があります。例えば、ページに大量のJavaScriptが含まれている場合は、視覚的なコンテンツの読み込みを妨げているかもしれません。またCSSや画像など、サイトのコードに問題があることも。
FCPのスコアが低い場合は、上記のいずれか（あるいは両方）が当てはまる可能性があります。
FCPを改善する10のヒント
First Contentful Paint（FCP）とは何か、そしてその重要性が分かったところで、ここからはサイトの表示時間を改善するために実践できるヒントをご紹介していきます。
これらのヒントを実行すれば、FCPだけにとどまらず、サイトのすべてのパフォーマンス指標を改善することができます。
1. 高速なホスティングサービスへの移行
良好なFCPスコアは、サイトを支えるホスティングに大きく左右されます。たとえ、どれほどサイトを最適化しても、質の低いホスティングでは意味がありません。
続けてご紹介する他のヒントを取り入れることで、FCPを改善することはできますが、サイトパフォーマンスは常にホスティングの質がボトルネックとなります。
まずはその他のヒントを実行してみて、それでもFCPが改善されない場合は、より高速なホスティングに乗り換えることを検討してみるのもいいかもしれません。
Kinstaでは、高速かつ安全なWordPress専用マネージドホスティングを提供しています。
基盤となるインフラがパフォーマンスに最適化されているだけでなく、キャッシュ、コンテンツデリバリネットワーク（CDN）、プレミアムDNS、画像最適化など、今回ご紹介する操作の多くを自動化することができます。
2. ページキャッシュの使用（できればサーバーレベル）
WordPressでサイトを構築した場合、（デフォルトでは）訪問者ごとにサーバーサイドのコードを動的に処理することになります。
誰かがページにアクセスすると、ホスティングサーバーはWordPressのPHPを実行し、ブラウザに提供するHTML文書を生成するために、サイトのデータベースに問い合わせます。
これには時間を要するため、特に処理能力の低いサーバーでは、サイトのFCPに大きな影響を与えます。
ページキャッシュを利用することで、各ページのHTMLバージョンをキャッシュすることができます。アクセスされるたびにサーバーサイドのコードを処理する必要がなく、キャッシュに保存されているHTMLを即座に返します。
Kinstaをご利用の場合は、エッジキャッシュでページキャッシュが自動的に実装されます。
Kinstaのエッジキャッシュの強みは、Cloudflareのグローバルネットワークからキャッシュされたページを提供できる点にあります（コンテンツデリバリネットワークについては後ほど）。これにより、世界のどこにいてもユーザーにコンテンツを高速配信可能です。
Kinsta以外をご利用の場合は、お使いのサービスにサーバーレベルのキャッシュ機能があるかどうかを確認してみるか、WP RocketやFlyingPressなどのキャッシュプラグインを使用することができます。
3. コンテンツデリバリネットワーク（CDN）の導入
コンテンツデリバリネットワーク（CDN）は、サイトのコンテンツやファイルの一部またはすべてのコピーを保存する、サーバーのグローバルネットワークです。
誰かがサイトにアクセスすると、物理的に最も近いデータセンターからサイトのファイルが自動的に配信されます。
読み込み時間には物理的な距離も影響します。CDNを活用することで、サイトファイルをより高速に提供でき、結果としてFCPが向上します。
Kinstaのお客様のサイトには、Cloudflareによる高性能CDNがデフォルトで実装されるため、手間をかけることなく世界最速のパフォーマンスを実現可能です。
Kinsta以外をご利用の場合は、Cloudflare、Amazon CloudFront、Fastlyなどのサービスを導入することを検討してみてください。
4. 高速なDNSサービスの利用
ブラウザがサイトのサーバーに接続する際、ドメインネームシステム（DNS）を用いて、サイトのドメインに紐付けられているウェブサーバーを探す必要があります。
このプロセスにかかる時間は、お使いのDNSサービスによって異なり、ひいてはFCPにも影響します。
DNSPerfによると、サービス間によって最大130ミリ秒以上の差が生じるため、DNSサービス選びは非常に重要です。
Kinstaをご利用の場合、Kinstaのネームサーバーを選択すると、Amazon Route53によるプレミアムDNSを使用することができます。
別のホスティングをご利用の場合は、Cloudflareの無料DNSサービスがお勧めです。
5. CSSの最適化
サーバーの応答時間を最適化できたら、続いてCSSからサイトのコードを最適化しましょう。
CSSは、ページ上の要素のデザインとスタイルを制御する役割を担います。すべてのサイトに欠かせない言語ですが、不適切な方法で読み込まれていたり、不要なCSSを読み込んでいたりすると、FCPが遅くなります。
CSSを最適化する方法はこちらで詳しくご説明していますが、今回はFCPに焦点を当てたヒントをいくつかご紹介します。
不要なCSSは削除する
まず最初に取り掛かりたいのが、ページからの不要なCSSの削除です。
PurifyCSSのようなツールを使用すると、使用していないCSSを検出し、コードを削除することができます。また、PageSpeed Insightsでも「使用していない CSS の削減」のフラグを確認可能です。
WordPressサイトの場合は、プラグインを使用して簡単にこの操作を自動化することができるため、開発の知識がない方でも安心です。WP Rocket、FlyingPress、Perfmattersなどを検討してみてください。
いずれのプラグインも有料になりますが、CSSの最適化以外のヒントも役立つため、予算が許すのであれば投資の価値があります。
重要なCSSをインライン化して、そうでないものは遅延読み込みを行う
デフォルトでは、すべてのCSSコードを読み込んでから、Above the fold（スクロールせずに表示される最初の領域 ※「ファーストビュー」とも）のコンテンツのレンダリングが始まります。しかしこれは、ユーザー体験の観点からは最善とは言えません。
Above the foldコンテンツ用のCSSは、クリティカルCSSと呼ばれます。
ページのFCPやその他のパフォーマンス指標を改善するには、クリティカルCSSを外部スタイルシートの一部として読み込むのではなく、ページの<head>セクションに直接配置（別名インライン化）します。
上級者であれば、クリティカルCSS生成ツールを利用し、クリティカルCSSを自分で生成することも可能です。
WordPressでは、例によって、FlyingPressやWP Rocketなどのプラグインでこのプロセスを自動化できます。
ページのクリティカルCSSをインライン化したら、残りのCSSの読み込みは、ページ読み込みプロセスの後半（Above the foldコンテンツがレンダリングされた後）まで遅延するよう処理します。WP RocketとFlyingPressではこれが自動で設定できます。
CSSコードを圧縮する
サイトのCSSコードを最適化するもう1つの方法が、CSSコードの圧縮です。圧縮すると、不要な文字や空白が削除されるため、サイズを小さくすることができます。
この作業もまた、WP RocketやFlyingPressのようなプラグインで実現可能です。あるいは、圧縮に特化したFast Velocity Minifyのようなプラグインも便利です。
6. JavaScriptの最適化
サイトコードの最適化に関しては、CSSだけでなくJavaScriptも見逃せません。
CSS同様、JavaScriptをさまざまな方法で最適化し、サイトのFCPを改善することができます。
JavaScriptに依存する要素はAbove the foldで使わない
ナビゲーションメニューなど、サイトの重要な要素がJavaScriptに依存している場合（特にモバイルメニューはJavaScriptに依存する傾向あり）、ブラウザがページのレンダリングを開始する前に重たいJavaScriptを読み込む必要があるため、FCPが遅くなる可能性があります。
WordPressサイトでは、パフォーマンスの面で最適化されたテーマを選ぶことで、このような事態を回避できます。
また、スライダーなど、JavaScriptを使ったその他の要素をAbove the foldで使用しないようにすることも可能です。
不要なJavaScriptは削除する
Above the foldのコンテンツにJavaScriptを使用しないようにすることに集中したいところですが、各ページから不要なJavaScriptをできる限り削除するのも効果的です。
手始めに、サイトにメリットのないWordPressプラグインはすべて削除してしまいましょう。WordPressプラグインの機能の多くが、JavaScriptに依存しています。
また、Asset CleanUpやPerfmattersのようなスクリプト管理プラグインを利用して、ページごとにJavaScriptを無効にする手もあります。
ページ単位でプラグインを無効にする方法はこちらでご紹介しています。
レンダリングをブロックするJavaScriptの解析を遅らせる
基本的には、どのようなページでも多少のJavaScriptは読み込むことになります。JavaScriptがAbove the foldコンテンツの読み込みを妨げないようにする方法は、以下の2つがあります。
- レンダリングをブロックするJavaScriptの解析を延期する─JavaScriptの読み込みをページのレンダリングプロセスの後半に持ってくることで、他のコンテンツを読み込む妨げになるのを防ぎます。deferまたはasyncを使用するか、WordPressプラグインで自動化することができます。
- ユーザーインタラクションが生じるまでJavaScriptの解析を延期する─ユーザーがページを操作（クリックやスクロールなど）するまで、JavaScriptの一部またはすべての読み込みを待つこともできます。これによりパフォーマンスを最大化することができますが、問題を引き起こさないよう、特定のスクリプトを手作業で除外する必要があるかもしれません。
これについても、WP RocketやFlyingPressのようなプラグインを使って実装することができます。
関連して、JavaScriptの解析を延期する方法やレンダリングを妨げるリソースを除外する方法もご覧ください。
JavaScriptコードを圧縮する
最後に、サイトの残りのJavaScriptを圧縮し、不要な文字を削除することで、パフォーマンスをさらに最適化することができます。
CSSの圧縮と同じように、この機能はほとんどのキャッシュおよびパフォーマンスプラグイン（WP RocketやFlyingPressを含む）に組み込まれています。Fast Velocity Minifyのような圧縮に特化したプラグインもあります。
7. 遅延読み込みからAbove the foldの画像を除外
画像の遅延読み込みによって、必要時（ユーザーがページをスクロールした際など）まで画像の読み込みを遅らせることができます。
Above the fold以下の画像に適用する場合は、パフォーマンスの利点がありますが、Above the foldにある画像に遅延読み込みを使用すると、サイトのFCPとLCPに悪影響を及ぼす可能性があります。
したがって、Above the foldで表示する画像は、遅延読み込みの対象から除外してください。
WordPressコアの遅延読み込み機能では、通常この設定は自動的に行われますが、何か問題がある場合は、wp_omit_loading_attr_threshold関数を使って調整することができます。
遅延読み込みにプラグインを使用している場合、プラグインによってはこの設定を行うことができます。たとえばPerfmattersでは、一定数の最初の画像を自動的に遅延読み込みから除外したり、必要に応じて特定の画像を手動で除外したりすることができます。
お使いのプラグインにこの機能がない場合は、別のプラグインを使用することをお勧めします。
8. フォント読み込みの最適化
読み込み中にテキストコンテンツが表示されるようにするには（FCPやユーザー体験に影響）、カスタムフォント（Google Fontsなど）を使用している場合は、フォントの読み込みを最適化することも重要です。
問題を回避するには、CSS記述子のfont-display: optionalまたはfont-display: swapを使用することができます。
font-display: optionalは、カスタムフォントが適切な速度で読み込まれない場合、代わりにフォールバックフォントを表示するようにブラウザに指示します。
CSSコードの扱いに馴染みがない方は、WP Rocket、FlyingPress、Perfmattersなど、フォントの読み込みを最適化できるWordPressプラグインを利用できます。
9. DOMサイズの最適化
Mozillaの定義によると、Document Object Model（DOM）は、「ウェブ上の文書の構造と内容を構成するオブジェクトのデータ表現」です。
サイトを訪れたユーザーがDOMを操作することはありませんが、ページのDOMは、ブラウザがページのコンテンツを理解し、表示するために重要になります。
一般的なルールとして、大きくて複雑なDOMは（そうでないものと比べて）、FCPに悪影響を与えます。
サイトのDOMサイズを最適化するヒントには、以下のようなものが挙げられます。
- パフォーマンスの面で最適化されたWordPressテーマを使用する─WordPressにおいては、使用するテーマがDOMサイズに大きく影響します。おすすめの高速WordPressテーマおよびおすすめの高速WooCommerceテーマを参考にしてみてください。
- 改ページブロックを使用する─改ページブロックを用いて長いページを分割する。
- ページネーションの最適化─WordPressのページネーションを利用して、ブログ記事（またはその他のカスタム投稿タイプ）の一覧ページを分割する。
- 抜粋を表示する─ブログの一覧ページなどで全文を表示する代わりに、抜粋を表示する。
- 重たいページビルダーの使用を制限または避ける─ ドラッグ＆ドロップ式のページビルダーは、デザインの観点からは重宝しますが、DOMの肥大化をもたらす可能性も。パフォーマンスの観点からは、デフォルトのエディターを使用するのがお勧めです（デザインのメリットとパフォーマンスのデメリットを天秤にかけた上で、視覚的なビルダーを使用したい場合は、その他のヒントを取り入れてみてください）。
10. リダイレクトの回避（特にマルチリダイレクト）
リダイレクトを設定すると、ページが読み込まれる前に、あるURLから別のURLにトラフィックを転送することができます。HTTPバージョンのサイトにアクセスした人をHTTPSバージョンにリダイレクトするなどは、一般的な例です。
しかし、リダイレクトはブラウザがページを読み込む前に処理される必要があるため、リダイレクトごとにサイトのFCP（およびその他のパフォーマンス指標）に数百ミリ秒の遅延が生じます。
不要なリダイレクトを避けるためには、以下のヒントを実践してみてください。
- HTTPからHTTPSへ移行する際にはハードコードされたURLを更新する─サイトをHTTPSに移行した場合はリダイレクトに頼らず、サイトのデータベース内のすべてのURLをHTTPSに更新する。
- URLを正しいwwwあり/wwwなしバージョンに紐付ける─wwwありからwwwなしへのリダイレクト（その逆も然り）を避け、すべてのURLが正しいバージョンを使用しているかどうか確認する。
- 壊れた内部リンクを修正する─リダイレクトに依存せず、壊れた内部リンクを更新して、ユーザーを正しい場所に誘導する。
- 他のサイトに壊れた外部リンクの修正を依頼する（任意）─外部サイトからの壊れた（存在しない）リンクへのトラフィックを多く受けている場合は、リダイレクトに頼らず、サイト所有者に連絡を取り、リンクの修正を依頼するのも1つの方法。
リダイレクトの問題を見つけるには、KinstaのHTTPステータス＆リダイレクトチェッカー（無料）が便利です。また、WordPressサイトでのリダイレクトのベストプラクティスはこちらでご紹介しています。
例えば、フィールドにURL「http://www.wordpress.org」 を貼り付けて「チェック」をクリックすると、複数のリダイレクトが検出されます。
- HTTPからHTTPSへのリダイレクト
- wwwありからwwwなしへのリダイレクト
複数のリダイレクトが見つかった場合は、修正するのが得策です。
まとめ
First Contentful Paint（FCP）は、ユーザーエクスペリエンスを測るパフォーマンス指標で、ページの最初のコンテンツが表示されるまでの時間を示します。Largest Contentful Paint（LCP）と似ていますが、それぞれ異なる指標です。
FCPを最適化することで、LCPやその他のパフォーマンス指標も改善することができます。
LCPのスコアを上げるには、フロントエンドのコードとサーバーの応答時間の両方を最適化することに重点を置いてください。
サイトコードを最適化した上で、Kinstaのような高速マネージドWordPressホスティングで稼働すれば、サイトのFCPをGoogleが「良好」と評価する1.8秒以下を簡単に実現することができます。
コメントを残す