FCPの改善方法3選＆表示速度の測定方法・おすすめツールを紹介！
Webサイトの表示速度は、ユーザーの利便性やサイト内回遊率にも影響を与える重要な要素です。Webサイトの表示速度についてはFCPと呼ばれる指標で評価されており、チェックツールを用いて測定することができます。
Webサイトを運営している方のなかには、表示速度を上げて自サイトのパフォーマンスを高めたい方もいるでしょう。
今回は、FCPの概要から、FCPのチェックツールと測定方法、FCPを改善する方法までを解説します。Webサイトの表示速度を上げたいWeb担当者・運営者の方は、ぜひ参考にして下さい。
1.FCPとは
FCPとは、Webサイトを訪れたユーザーがURLをクリックしてから、サイトを表示するための要素を、レンダリングするまでの時間のことです。Google Search Consoleなどのツールを用いることで計測可能で、以下のように評価されます。
| FCP | 評価 |
|---|---|
| 1秒未満 | 高速 |
| 3秒未満 | 中速 |
| 3秒以上 | 低速 |
Webサイトの表示速度はユーザーの検索体験に影響することから、近年のWebサイト運営においてはFCPの把握・改善が重要視されています。
1-1.FCPが適切ではない場合に生じるリスク
FCPが適切ではない場合は、Webサイトの表示が遅くなりユーザビリティーが低下するだけではなく、Webサイト運営上のリスクに繋がる場合もあります。
FCPが適切ではない場合に想定されるリスクには、以下が挙げられます。
○直帰率が高くなる FCPの評価が1秒から3秒に増加すると直帰率が32％増加、1秒から6秒に増加すると直帰率は106％にまで増加することが、Google Search Consoleのヘルプでも解説されています。
直帰率が高くなることはビジネスのチャンスロスに繋がるため、FCPの改善については1秒単位でシビアに取り組むことが重要となります。
出典：Search Consoleヘルプ「ウェブに関する主な指標レポート」
| 検索順位が下がる可能性がある |
|---|
| FCPは検索順位に直接影響を及ぼすことはないとされています。しかし、Googleの検索エンジンはユーザーの検索体験の向上や、利便性の向上を重視して、Webサイトの評価を行う傾向があります。 そのため、読み込み速度が遅くユーザビリティーの低いWebサイトは、間接的に検索エンジンからの評価が下がる可能性があります。 |
2.FCPのチェックツールと測定方法
FCPが適切であるかを知る方法はいくつかありますが、Webサイトの表示速度を測定できるツールを用いる方法が手軽であるためおすすめです。
ここでは、FCPを測定できる代表的なツール「Googleアナリティクス」「PageSpeed Insights」「Test My Site」の概要と測定方法をそれぞれ解説します。
2-1.Googleアナリティクス
FCPは、Googleが提供する定番のWebマーケティングツールであるGoogleアナリティクスでも計測することができます。Google Search Consoleと連動させれば、Core Web Vitals（コアウェブバイタル）を同時にチェックすることが可能です。
| ■Core Web Vitals指標 | |
|---|---|
| LCP（Largest Contentful Paint） | ページで最も大きな要素が読み込まれる時間 |
| FID（First Input Delay） | ユーザーが最初の入力を実行できるまでの時間 |
| CLS（Cumulative Layout Shift） | レイアウト移動を測定する指標 |
GoogleアナリティクスでFCPを測定する方法は、下記の通りです。
| ■GoogleアナリティクスでFCPを測定する方法 |
|---|
|
2-2.PageSpeed Insights
PageSpeed Insightsは、Googleが提供するWebサイトの表示スピードの測定と改善案提示を行うことができるツールです。PC・モバイルそれぞれに適用することができます。
| ■PageSpeed Insightsの使い方 |
|---|
|
2-3.Test My Site
TestMySiteは、Googleが提供するスマホサイトの表示スピードの測定・改善に特化したツールです。FCPが適切であるかだけではなく、同業種のWebサイトとの比較や、改善のアドバイスも取得できる優秀なツールです。
| ■Test My Siteの使い方 |
|---|
|
3.FCPの改善方法3選
FCPを改善するためには、サイトの表示速度向上に繋がる具体的な施策を実施する必要があります。
ここでは、FCPを改善するための方法を3つ解説します。現在運営しているWebサイトのFCP改善に取り組みたいと考えている方は、ぜひ参考にして下さい。
3-1.画像を最適化する
FCPの改善において真っ先に取り組みたいことが、画像の最適化です。Webサイトに使用されている画像は枚数・データ量が多く、Webサイトの通信速度に与える影響が大きいと言えます。
特に、画像素材サイトの高画質画像をそのまま使用している場合や、デジカメで撮影した画像を圧縮せずに使用している場合は、画像サイズが大きくなっています。
画像の最適化とは、画像の画質を落とさずにサイズを圧縮することを言います。
PhotoShopなどの画像加工ソフトを活用する方法もありますが、近年ではブラウザ上のツールで圧縮することもできます。
Webサイト上の画像プロパティを確認して、サイズが大きい場合は高画質を担保できる範囲で、できるだけサイズを圧縮しましょう。
3-2.外部ファイルを縮小・削除する
FCPを改善するためには外部ファイルを縮小・削除することも、重要な施策と言えます。
Webサイトを表示する際には、WebサイトのHTMLファイルと同時に、CSSやJavaScriptなどの外部ファイルも読み込まれています。外部ファイルの数が多いとそれだけ多くの通信を行う必要があるため、Webサイトの表示速度は遅くなる傾向にあります。
外部ファイルを最適化するためには、下記の手順を推奨します。
- 1.使われていない不要な外部ファイルを削除する
- 2.CSS・JavaScriptなどの外部ファイルを圧縮して容量を縮小する
外部ファイルの圧縮は、ブラウザ上で動作するサービスを利用することで簡単に行うことが可能です。ただし、一度にすべての外部ファイルを最適化することは難しいため、少しずつ見直しを進めると良いでしょう。
3-3.サーバーのスペックを上げる
Webサイトの表示速度は、データ容量やファイルサイズだけではなく、データを保管しているサーバーの環境やスペックによっても大きく左右されます。
表示速度低下の原因となるケースには、下記が挙げられます。
- 古いサーバーを使用していてCPUやメモリのスペックが低い場合
- 共用サーバーで複数のWebサイトのデータを共有している場合
前者であればハイスペックなCPU・メモリを搭載しているサーバーに乗り換えることで、処理が高速化してWebサイトの表示速度も向上する可能性があります。後者であれば、共用サーバーから専用サーバーへ乗り換えることを推奨します。
Webサイトのデータ容量やファイルサイズを改善してもFCPの改善が不十分な場合は、サーバーのスペックや環境の見直しも検討してみましょう。
まとめ
Webサイトの表示速度（FCP）は、数秒単位の差でユーザーの離脱率が大きく変わるため、Webサイト運営上必ずチェックしておきましょう。FCPの改善に取り組むことは、ユーザビリティーや検索エンジンからの評価を向上させるだけではなく、ビジネスの機会損失を大幅に減らすことにも繋がります。
FCPの計測は、ツールを活用すれば比較的簡単に実施することができます。改善施策もさほど難しくありません。
Webサイト運営者の方は、ぜひ今回の情報を参考に、自サイトのFCPパフォーマンスの把握・改善に取り組んで下さい。
