Webサイトの表示速度の計測方法・目標値・改善方法について

ホームページやメディアなどWebサイトの表示速度が遅いと、

  • ユーザーの離脱率が高くなる
  • 遅いとSEOの評価が下がる(速いと上がるわけではない)

といった影響があります。

サイトの表示速度は速ければ速いほど良いですが、表示速度が2倍早くなったからといって、離脱率が1/2になるわけではありません。
ユーザーは体感的にサイトの表示速度が遅いと思い、サイトを離脱してしまいます。

では、サイトの表示速度はどれくらい速ければ十分なのでしょうか?
今回は、Googleの測定ツールを使い、表示速度と離脱率の関係について調査しました。

また、無料で表示速度を測定できるツールと、改善方法についてまとめました。

表示速度の目標値

表示速度と離脱率の関係

上図は、Googleのモバイルスピードテストツールを使い、サイトの表示速度と離脱率の関係についてまとめました。

※ 実際には、3秒以下の場合、離脱率は「低」という結果になります

図より、表示速度が4秒を超えたあたりから離脱率が急激に増加することがわかります。
また、3秒以下では離脱率が変わらないこともわかります。

この結果より、サイトの表示速度は3秒以内であれば十分に速いということがわかります。

今回利用したツールは3G回線の通信速度を前提としているため、日本の回線を利用しているユーザーのみに限定すると、もう少し表示速度が遅くても問題無いかもしれません。

表示速度の計測ツール

TestMySite

TestMySite

今回の調査に使ったGoogleの測定ツールです。

特徴としては以下のようです。

  • 3G回線のテスト(2020年まで世界のモバイル回線の70は3G回線であるらしいです)
  • 同業との比較をわかる
  • 無料レポートを取得できる

ちなみに、当サイトの結果はこのようになります。

TestMySiteの結果

ページ速度と離脱率がわかります。また、3秒以下は離脱率が「低」となります。

PageSpeed Insights

PageSpeed Insights

こちらもGoogleのツールです。

特徴としては以下のようです。

  • モバイルとPCの両ケースを同時に測定
  • 改善点がわかる
  • ページ速度よりも対応項目のチェックという感じ

当サイトの結果はこのようになります。

PageSpeed Insightsの結果

PageSpeed Insights は、表示速度のチェックというより、表示速度を速くするために行うべきことを加点式に評価しているような感じがします。
評価もTestMySiteよりも甘めかなという所感です。

ちなみに、Google Analytics や Google AdSense のスクリプトが読み込まれていると100点を目指すのは難しいです。

こちらのツールに関しては、100点を目指す必要は無いと思います。表示速度の改善点・改善方法をわかりやすく教えてくれます。

表示速度の改善点

表示速度を向上させるポイントは、大きく分けて以下の3つです。

  • サーバーのレスポンスを速くする(ダウンロード開始までの時間)
    • HTMLのキャッシュ など
  • ダウンロードを速くする
    • 静的ファイル(css, js, 画像) の圧縮・最適化
    • ファイルを同じファイルにまとめてダウンロード数を少なくする など
  • ダウンロードしてから表示するまでを速くする
    • ファーストビューのCSSをインライン化
    • JSやCSSの読み込みでレンダリングブロックさせない など

具体的に何を改善すると効果的なのかはサイトによりけりです。

例えば、画像が多いサイト(ECサイトなど)は、画像関連を改善すれば大きな効果が見込めます。逆に、画像が少ないサイトで画像の最適化を行っても、効果は少ないです。

速度改善は、ボトルネックになっている部分を見つけて、的確な対応を行うことが必要です。

まとめ

今回の記事をまとめると、重要なポイントは下記の点となります。

  • Googleの統計結果からサイト速度は3秒以内であれば十分に速い
  • Googleのツールを利用すれば、現状と改善点がある程度わかる
  • 表示速度の改善は、ボトルネックを探して適切な対応を!

この記事と関連している記事