【最新版】PageSpeedInsightsの使い方と計測結果の見方を解説

【最新版】PageSpeedInsightsの使い方と計測結果の見方を解説 サイト速度改善


ブロガー
PageSpeedInsightsで自サイトの表示速度を調べることができると聞きました。
使い方を教えてください!

そんな悩みが解決できる記事を書きました。

サイトの表示速度は、読者の離脱率や回遊率に影響するだけでなく、SEO対策の面でも重要な要素です。

本記事では、表示速度を計測することができるGoogle提供のツール「PageSpeedInsights 」の使い方から計測結果の見方までを解説します。

この記事を読んでいただけると、自サイトの表示速度について把握できるようになりますよ。

コアラ
さっそく解説していきます。
この記事を読んで分かること
・PageSpeedInsightsの使い方
・PageSpeedInsights計測結果の見方

PageSpeedInsightsの使い方2ステップ

PageSpeedInsightsの使い方

PageSpeedInsightsの使い方は2ステップでできます。

  • PageSpeedInsightsを起動
  • 計測したいサイトのURLを入力して分析開始

すごくかんたんなのでサクッと紹介していきますね。

PageSpeedInsightsを起動

PageSpeedInsights

PageSpeedInsightsのサイトを開きます。

計測したいサイトのURLを入力して分析開始

PageSpeedInsights|計測したいサイトのURLを入力して分析開始

試しに僕のサイトトップのURLを入力して分析ボタンをクリックしてみましょう。

PageSpeedInsights|URLを入力して分析ボタンをクリック

分析が始まるので少し待ちます。
5~10秒程度かかります。

▼計測結果が出てきました。

PageSpeedInsights計測結果
コアラ
計測して終わりにしては意味がないですからね。
次章で計測結果の見方を解説していきましょう。

PageSpeedInsights計測結果の見方

PageSpeedInsights計測結果の見方

計測結果はモバイルとパソコン両者の結果が確認できます。
(やり直すと、結構スコアに変動ありますね。)

確認できる計測指標は以下のとおり。

  • スコア
  • フィールドデータ
  • ラボデータ
  • 改善できる項目
  • 診断
  • 合格した検査

順にみていきます。

スコア

PageSpeedInsightsスコア

スコアは総合評価のようなものですね。100点満点で表示されます。

  • 90~100点:速い
  • 50~89点:平均
  • 0 ~49点:遅い

Googleさん割と辛口でして、僕は先ほどの結果より、66点でしたね。
(やり直すと、結構スコアが変わりますね)

ちなみに、はじめは24点くらいでして、色々施策をしてただいまこれくらいに落ち着いています。
コアラ
ひどい結果が出てきても改善していけばいいので、ショックを受けないでくださいね!

フィールドデータ

Chromeユーザーからのデータを利用して、他サイトの実測値を比較できます。

僕のサイトは残念ながら、ページのアクセス数がまだまだ少ないようで、速度データの結果が表示されませんでした。。。

▼表示された場合は、こんな感じで表示されます。

PageSpeedInsightsフィールドデータ

ラボデータ

PageSpeedInsightsラボデータ

「Lighthouse」というツールを使って、いくつかの指標で速度評価を行ってくれます。

改善できる項目

PageSpeedInsights改善できる項目

表示速度を向上させる可能性のある改善案が表示されます。

改善項目左の色は、以下のような意味です。

  • 優先すべき改善項目:赤色
  • その他改善したほうがいい項目:オレンジ色

改善できる項目をクリックすると、詳細内容が表示されます。

上図の結果は、既に対策を行ったので改善できる項目が少ないです。
無対策なら下図くらい出てくるかもしれません。

改善できる項目2
コアラ
速度改善を行うなら、ここの詳細な改善案をみていくのがいいでしょう。

診断

診断、合格した検査

アプリケーションのパフォーマンスに関する情報です。

改善項目左の色は、ここも同じく以下のような意味です。

  • 優先すべき改善項目:赤色
  • その他改善したほうがいい項目:オレンジ色

合格した検査

合格した検査項目。

パフォーマンスに問題ない項目はこちらに表示されます。

結局、速度改善を行うにはどこをみればいいの?

【最新版】PageSpeedInsightsの使い方と計測結果を解説 まとめ

色々と指標があってひとつひとつ見ていくのは確かに大変ですよね。

手っ取り早く速度改善したいなら、「改善できる項目」の詳細を確認して、そこに書いてあることから取り組まれるのがいいでしょう。

また、速度改善について詳しくない方でも、プラグイン導入でかんたんに改善できるものも多くあります。

▼プラグイン導入でお手軽速度改善できる記事はこちら。

サイト速度改善に役立つプラグインならこの3つ【まるっと解決】

サイト速度改善に役立つプラグインならこの3つ【まるっと解決】

【最新版】PageSpeedInsightsの使い方と計測結果の見方を解説 まとめ

【最新版】PageSpeedInsightsの使い方と計測結果を解説 まとめ

「なんか自分のサイトって重くない?」って思ったときは、ぜひPageSpeedInsightsを試してみてください。

表示速度の計測結果をもとに改善していきましょう。

PageSpeedInsights施策一覧

改善できる項目難易度
オフスクリーン画像の遅延読み込み★☆☆
JavaScriptの最小化★☆☆
CSSの最小化★☆☆
キーリクエストのプリロード★★☆
サーバー初期応答時間の短縮★★☆
レンダリングを妨げるリソースの除外★★★
使用していないCSSを削除してください
メインスレッド処理の最小化(準備中)
過大なネットワーク ペイロードの回避(準備中)
次世代フォーマットでの画像の配信(準備中)
PageSpeedInsights施策一覧
※随時更新中!

お手軽施策一覧

▼プラグインでお手軽に解決するならこちら!(おすすめです)

サイト速度改善に役立つプラグインならこの3つ【まるっと解決】

サイト速度改善に役立つプラグインならこの3つ【まるっと解決】

お使いのテーマやサイトによっては、表示が崩れたりする可能性がありますのでご注意ください。