FCPとはユーザーがURLをクリックしてから、サイトがレンダリングを開始する（データを読み込んでブラウザで表示を開始する）までの時間です。

FCPが悪いと表示スピードが遅くなり、ユーザーにとって「不便なサイト」だと判断される1つの要因です。例えばAmazonの発表によると、表示速度が0.1秒遅れると売り上げが1％減少することが分かっています。

FCPが低下した結果、SEO集客やマーケティングに支障をきたし、売り上げが上がらないという残念な結果になるかもしれません。

本記事では、FCPの測定から改善までを徹底解説します。
自社サイトのユーザーエクスペリエンス向上のためにFCPを測定、改善をすすめましょう。

FCPの概要｜0.1秒短縮するだけでコンバージョン率が最大4%アップ

FCPとは、First Contentful Paintの略です。
ページの読み込みが始まってから、ページ内のコンテンツのいずれかが画面上にレンダリングされるまでの時間を指します。

FCPが低いとユーザーは「ページ読み込みの遅い不便なサイトだ」と感じ、離脱率が高まります。さらに、FCPが低いとSEO評価も下がるため、Webマーケティングの観点からもマイナスといえるでしょう。

検索で上位表示させ、さらに読者にも満足してもらえるサイト作りのためには、FCPの数値改善が大切です。

FCPとFP・FMPの違い

FCPと似ている数値としてFP（First Paint）、FMP（First Meaningful Paint）という数値があります。

ページスピードに関する項目としては同じですが、指標にするコンテンツが異なります。それぞれ違いを解説します。

FCPとFP（First Paint）の違い

FCPはページが読み込まれてから何かしらのコンテンツが表示されるまでの時間を表します。
一方でFP（First Paint）は、何かしら今までのページとは違うものが表示されるまでの時間のことです。

つまり、真っ白以外の何かしらが表示されるまでの速度であり、表示されたものの意味は問いません。

FCPとFMP （First Meaningful Paint）の違い

FMP（First Meaningful Paint）はメインコンテンツが表示される速度のことをいいます。
メインコンテンツとは以下のものを指します。

• 見出しとファーストビュー（ブログの場合）

• 検索結果（検索エンジンの場合）

• 写真や画像（ECサイトなど画像がメインの場合）

FCPでは何かしらが表示されるまでの時間ですが、FMPは視覚的に読者の求めるものが表示されるまでの時間です。FCPが改善されても、意味のあるコンテンツが出るまでに時間がかかってしまうと離脱につながるため注意しましょう。

FCPの目安は2.5秒まで！3秒以上で離脱率UP

FCP のスコアは秒数で表示されます。

おおよそ1秒以下であれば良好、3秒より長いと不良であると考えましょう。ユーザーエクスペリエンス的にも3秒以上かかると離脱率が上がると言われています。

参照：電子商取引に関する市場調査｜経済産業省

利用するツールごとに若干数値は異なりますが、自社サイトのFCPの目安にしましょう。

FCPを確認する3つの方法

以下の3つのツールにてFCPを確認できます。

• Page Speed insights

• Lighthouse（Chrome拡張機能）

• Web Vitals（Chrome拡張機能）

各ツールを使い自社のWEBメディアを確認し、自社のページエクスペリエンスを客観的に評価しましょう。

Page Speed insights

Page Speed insightsはPageSpeed Insightsは、ページの読み込み速度を計測するためのツールであり、FCPも調べられます。URLを入力するだけでCLSが100点満点の点数により表示され、理解しやすいのが特徴です。点数により3段階に色が分かれていて、視覚的にもわかりやすいです。

ラボデータを見ると問題のあるページや箇所がわかり対策がしやすいため、数値だけでなく詳細にも目を向けてみてください。

Lighthouse

LighthouseはChromeの拡張機能を導入すると無料で利用できるツールです。
以下の5項目についてのFCP評価を見ることができます。

• Performance

• Progressive Web App

• Accessibility

• Best Practice

• SEO

FCPを調べたい場合は「Performance」の項目を参照してください。

数値がよければ緑、少し悪ければオレンジ、すぐに改善を要するくらい悪ければ赤で表示されます。目安は1.8以下が良いとされており、良好な数値の場合は緑で表示されているのでわかりやすいでしょう。

Web Vitals

Web VitalsはLighthouseと同様に、Chromeの拡張機能を導入すると無料で利用できます。まずWeb Vitalsを公式ページからダウンロードし、Google Chromeに拡張機能として追加してください。

その後調べたいWebページを開きます。
Webページを開いたら、ブラウザのウィンドウ右上の四角アイコンでFCPがわかります。

四角が緑色であれば良好、赤であれば改善が必要です。
色だけでなく具体的な数値を知りたい場合は、Web Vitalsのアイコンをクリックしてください。

FCPの悪化原因と改善方法4選

FCPの改善には以下の原因が考えられます。

• コンテンツが最適化されていない

• サーバーや設定が最適化されていない

もし原因がわからない場合や、原因がわかってもどう対処したら良いか不明な場合は以下の対策を行いましょう。

• 画像のサイズ指定

• 広告表示の最適化

• WEBフォントの再検討

• JavaScriptの最適化

多くのサイトは上記4点の改善策でFCPが良くなる可能性が高いです。まずは1つづつ試してみましょう。

画像のサイズの指定

画像のサイズを指定するとFCPを改善できます。
FCPの数値を改善したいなら、まず最初に画像サイズの確認をしましょう。

とくにカメラで撮った写真の画質を変えない場合は、画像が重くなりFCPが悪くなっているケースが多くみられます。また、画像サイトの画像も高画質なものをそのまま利用していると同様にデータが重くなり、FCPに悪影響を与えているかもしれません。

そこで、画像サイズを指定してFCPを改善し、読者にストレスを感じないサイトにしましょう。

レスポンシブ画像の指定方法

レスポンシブ画像の場合は、すでにデバイスに応じて最適な画像サイズに調整されやすいようになっています。そこでさらに確実に画像サイズを指定してFCPの改善に繋げたい場合は以下のCSSコードを利用しましょう。

このような設定をすると、画面の横幅に合わせて最適な画像サイズにすることが可能です。

レスポンシブ画像ではない場合

レスポンシブ画像でない場合をソリッド（固定）レイアウトといいます。
ソリッドレイアウトの場合は画像の横幅が固定されてしまうため、小さなデバイスでは横スクロールが必要になり、FCPだけでなくユーザーエクスペリエンスも下がりやすいでしょう。

その場合はあらかじめサイズを指定しておきます。
たとえば、ホームページに適したサイズは1920px×1080pxといわれています。そのため、1920px×1080px以下に指定しておきましょう。

スマホの表示を最適にしたい場合は800〜1000pxで指定するのがおすすめです。

広告表示のサイズ指定

広告の画像サイズをあらかじめ指定しておくと、読み込まれるスペースが確保されるためFCPが改善します。しかし、大きすぎるサイズ指定は余計な余白を作ってしまい見た目が悪くなる原因にもなるので注意が必要です。

広告画像のサイズを適切な大きさで配置し、あらかじめ大きさを決めておきましょう。

Webフォントの読み込み設定

Webフォントとは、あらかじめWebサーバー上に置かれているフォントデータをいいます。
インターネット上にあるフォントのデータを読み込んで利用します。

サイト制作者の希望通りのフォントが表示されるメリットがある反面、FCPをはじめとしたページ読み込み速度が下がりやすいというデメリットも忘れないでおきましょう。
ページ読み込み速度が遅い場合はWebフォントを減らして、改善するか確かめてみてください。

JavaScriptの最適化

ページに多くのJavaScript を使用しているとプログラムの実行に時間がかかります。
ソースコードを利用してJavaScriptの最適化を行いましょう。

しかしソースコードを変更すると、理想のサイトからは遠ざかってしまう可能性もあります。
圧縮などにより、ページコンテンツの動きが変わらないか確認して変更しましょう。

ツールに迷ったらコレ！FCP改善におすすめのサービス

自社でFCPの改善策をおこなってもうまくいかない場合は以下のサービス利用を検討しましょう。

• SpeedSize

• Speed Kit

• Edgemesh

• Gumlet

これらは使いやすくて便利なツールですが、どのように使ったら良いのかわからない場合も多いのではないでしょうか。ツール選びや利用方法に悩んだら、当社ギャプライズへご相談ください。専門知識で御社にあったFCP改善方法をご提案します。

お問い合せ｜ABテストツール導⼊・内製化⽀援コンサルティング

SpeedSize

SpeedSizeは、AI技術を利用してサイト改善を行うサービスです。
AI技術を用いて訪問者一人ひとりのブラウザやデバイスに応じて最適なサイズやフォーマットを、作成から配信まで全て自動で行います。

サイトの読み込みが早くなり、サイトの離脱率の低下やECの売上アップが期待できます。

Speed Kit

Speed Kitはサイトスピードをあげるオールインワンサービスです。
ページ速度が早まっただけでなく、実際に売り上げが上がる事例もあります。

自社のサイトからの売上や実績アップを狙いたいならSpeed Kitをお試しください。
大手企業をはじめとした10,000を超える企業と取引しており、実績も申し分ありません。

Edgemesh

コードの追加もしくはプラグインの有効化という簡単な方法でページ速度を早めるためのツールがEdgemeshです。

事前キャッシュ機能により、サイト訪問者の次の動きを予測して20〜40％表示速度を向上させます。Eコマースを中心とした高速化を求めるサイトや、Shopifyストアを対象としたECサイトにおすすめです。

Gumlet

GUMLETは動画の画質を保ったままファイルサイズを小さくできるツールです。
動画の最適化や保護にも役立ちます。

Freeプランからあるので、まずは無料で使ってみるとどのくらいページスピードが上がるのか身をもって体験できるでしょう。

まとめ：FCPを測定し改善するとUXとSEOを改善しよう

FCPとは、ページにコンテンツが現れるまでの時間を表し、SEOやマーケティングに大きく関わります。FCPが悪いと離脱率が上がり、サイト訪問者にとってはストレスの多いサイトという認識になってしまうことでしょう。

その結果、サイトからのお問合せが少なかったり、サイトからの売り上げが伸びないなどといった悪影響が生まれます。効果的なサイト運営のためにも、FCPの客観的なデータを確認し、数値が悪ければ改善策を行いましょう。

具体的な改善策は、画像や広告のサイズ変更、WEBフォントの最適化、JavaScriptの最適化です。便利なツールも4種類紹介しましたので、自社で改善策を実施しても効果がわからない場合は導入を検討しましょう。

しかし、どのようなツールを選んだら良いかわからない場合があるかと思います。
ギャプライズでは、サイトやサービスに応じて最適なWebマーケティングに使えるツールのご提案や導入をサポートしております。まずはお気軽にお問合せください。