PageSpeed Insightsの使い方と診断結果の見方

ページの表示が遅い気がするけれど、どこが原因なのかわからない。そんなときにまず使いたいのが、Googleが無料で提供している PageSpeed Insights です。URLを入れるだけで表示速度の評価と改善のヒントがわかります。

大事なことは、この結果で改善べき点があれば修正していくことです。結果の見方を知らないと点数に振り回されるので、使い方とあわせて見るべきポイントを押さえることが大切です。

PageSpeed Insightsとは

PageSpeed Insights(PSI)は、ページの表示速度やユーザー体験を評価し、改善案を提示してくれるGoogleの無料ツールです。スマートフォンとパソコン(デスクトップ)それぞれの結果を確認できます。

診断結果には性質の異なる2種類のデータが表示されます。

• 【フィールドデータ】CrUX(Chrome ユーザー エクスペリエンス レポート。Chromeが収集している実ユーザーの体験データ)の過去28日間の集計が使われる。
  実際のChromeユーザーがそのページを閲覧したときの計測値。
• 【ラボデータ】PSIがその場でページを読み込んで計測した値。
  計測にはLighthouse(Googleのページ品質チェックツール)が使われ、モバイルは低速回線・性能の低い端末を想定した条件でテストされる。

フィールドデータは「実際のユーザーがどう感じているか」、ラボデータは「今この瞬間の状態を決まった条件で測ったもの」というイメージです。この違いが、後述する結果の見方に関わってきます。

使い方

使い方はとても簡単。PageSpeed Insights で速度チェックしたいページのURLを入力して「分析」をクリックします。

分析が完了すると、上部に「携帯電話」「デスクトップ」の切り替えタブが表示されます。検索結果の評価はスマートフォン表示が基準になるので、「携帯電話」の結果で速度改善を目指すのが良いと思います。

「このURL」と「オリジン」の切り替え

実際のユーザーのデータ(フィールドデータ)には「このURL」と「オリジン」の切り替えがあります。「このURL」は入力したページ単体、「オリジン」はサイト全体(同じドメイン配下すべて)の集計です。

「データがありません」と表示される

フィールドデータは実際のChromeユーザーのデータから集計されるため、十分なアクセス数がないページでは「このURL」の結果が表示されません。その場合はサイト全体（オリジン）の結果が表示されるか、開設したばかりのサイトのようにほとんど見られていない場合「データがありません」となります。

この場合でも、ページの下にあるラボデータ(パフォーマンスの診断)は確認できるので、改善作業にはそちらを使います。

診断結果の見方

結果画面は大きく「実際のユーザーの環境で評価する」(フィールドデータ)と「パフォーマンスの問題を診断する」(ラボデータ)の2つに分かれています。

実際のユーザーの環境で評価する(フィールドデータ)

一番上に表示されるのが「ウェブに関する主な指標の評価」(Core Web Vitals)で、「合格」か「不合格」かが表示されます。その下にLCP・INP・CLSの3指標、さらに「その他の重要な指標」としてFCP・INP・TTFBが並びます。

Core Web Vitals(コアウェブバイタル)は、Googleがページの使いやすさを測るために定めた3つの指標です。

3つすべてが「良好」なら「合格」と表示されます。各指標は緑(良好)、オレンジ(改善が必要)、赤(不良)の3段階で色分けされているので、まずはどの指標が緑になっていないかを確認しましょう。

評価の下にある「その他の重要な指標」には、FCPとTTFBが表示されます。合否には関係しませんが、LCPが遅いときに原因を探る手がかりになります。

パフォーマンスの問題を診断する(ラボデータ)

ページ下部には、パフォーマンス・ユーザー補助・おすすめの方法・SEOなどのカテゴリ別スコアが並び、その下に0〜100点のパフォーマンススコアとラボで計測した各指標が表示されます。モバイルの計測は「Moto G Power のエミュレーション」「低速 4G スロットリング」という条件で行われていて、一般的なスマートフォンより不利な環境を想定しています。

このスコアは、ラボで計測した5つの指標をそれぞれ点数化し、指標ごとに決められた割合で合算したものです。

• 【緑】良好　90～100
• 【オレンジ】改善が必要　50～89
• 【赤】不良　0～49

たとえば各指標の点数が次のような場合、パフォーマンススコアは64点になります。

TBTやLCPは割合が大きいため、ここが悪いとスコアが大きく下がります。反対にFCPやSpeed Indexは割合が小さく、多少悪くてもスコアへの影響は少なめです。

TBT(読み込み中にJavaScriptなどの処理で画面が操作を受け付けなかった時間の合計)は、ラボでは実際の操作を伴うINPを測れないため、その代わりとなる指標です。Speed Index(ページの見た目がどれだけ早く埋まっていくかを表す指標)は表示の進み具合を表します。

スコアは計測のたびに変動する

同じページでも、分析するたびにスコアが数点〜10点程度変わることがあります。PSI側のサーバーの負荷や通信状況、広告など外部スクリプトの読み込み内容が毎回同じではないためです。1回の結果で判断せず、何度か計測して傾向を見るようにしましょう。

インサイトと診断

スコアの下には、改善のヒントが「インサイト」と「診断」に分かれて表示されます。項目をクリックすると、対象となるファイルや具体的な改善内容、推定される削減時間・削減サイズが確認できます。指標の一覧の下にある「次に関連する監査を表示」でLCPやCLSなどを選ぶと、その指標に関係する項目だけに絞り込めます。

インサイトに表示される主な項目は次のとおりです。

• レンダリングをブロックしているリクエスト
• 効率的なキャッシュ保存期間を使用する
• 画像配信を改善する
• LCP の内訳
• サードパーティ
• DOM サイズを最適化する

「診断」には「使用していない JavaScript の削減」「使用していない CSS の削減」「画像要素で width と height が明示的に指定されていない」などが表示されます。診断の項目はパフォーマンススコアに直接影響しませんが、改善のヒントとして役立ちます。

診断結果から改善につなげる

PageSpeed Insightsで大事なのは、結果を見て改善すべき点があれば修正していくことです。ただし、やみくもにスコアを上げようとする必要はありません。

まず改善すべきか、できるかを考える

スコアが悪いからといって必ずしも評価数値を上げる必要がない場合もあります。
例えばパフォーマンススコアが50未満でも、「実際のユーザーの環境で評価する」ではCore Web Vitalsに合格しているサイトなら、実際のユーザーは問題なく閲覧できている状態です。

パフォーマンスアップをするためには、機能やUIを犠牲にしたり、大幅なコストをかけてサイトを改善する必要があるかもしれません。それでアクセス数が増えるかどうかは不明瞭です。簡単に改善できない場合、時間やコストをかける価値があるかよく検討してみてください。

見る順番はフィールドデータ→ラボの指標→スコア

結果を見るときは、目立つスコアよりも次の順番を意識すると判断しやすくなります。

1. フィールドデータのCore Web Vitals(実際のユーザー体験なので最優先)
2. ラボデータのLCP・TBT・CLSなどの個別の数値(どこに問題があるかを特定する)
3. パフォーマンススコア(上記が改善されれば自然に上がる結果の数字)

スコアは複数の指標をまとめた数字なので、点数だけではどの指標に問題があるのかわかりません。「スコアが40点」よりも「LCPが4.2秒で不良」のほうが、何をすべきかが明確です。

「改善できる項目」というところでは対策と短縮できる時間（推定）が表示されます。表示されているテキスト部分をクリックすると具体的な改善内容が表示されます。これらのヒントを元に改善できる点を洗い出していきましょう。

改善すべきページ、改善しやすいことから取り組む

サイト全体を一度に改善しようとせず、PVが多いページやお問い合わせ・購入などにつながる重要なページから優先順位をつけていきましょう。そのうえで、比較的手を付けやすいものから取り組みます。

PSIでよく表示される指摘と対処

PSIの結果でよく見かける項目と、まず試したい対処をまとめておきます。

「画像要素で width と height が明示的に指定されていない」 imgタグにサイズの記載がないと、画像の読み込み後にレイアウトがズレてCLSが悪化することがあります。レスポンシブにする場合はCSSで調整します。またalt属性を設定していない場合は、空でもいいのでつけるようにします。

画像配信を改善する

表示サイズより大きな画像をそのまま使っていたり、容量の大きいPNG・JPEGのままだったりすると表示が遅くなります。表示サイズに合わせてリサイズし、WebPやAVIFなどの軽い形式に変換します。

画像要素で width と height が明示的に指定されていない

imgタグにサイズの記載がないと、画像の読み込み後にレイアウトがズレてCLSが悪化することがあります。レスポンシブにする場合はCSSで調整します。またalt属性を設定していない場合は、空でもいいのでつけるようにします。

<img src="画像ファイルパス" width="350" height="200" alt="">

<img src="画像ファイルパス" width="350" height="200" alt="">

使用していない JavaScript の削減

WordPressの場合、「使用していない JavaScript の削減」を開くと「ページで使用されていない JavaScript を読み込む WordPress プラグインの数を減らすか、他のプラグインに切り替えることをご検討ください」という案内が表示されます。不要なプラグインを削除せずに残していないか確認してみてください。

一覧に広告やアクセス解析、SNSの埋め込み、チャットツールなどの外部スクリプトが並んでいる場合は、そちらが原因になっていることもあります。使っていないタグが残っていないか、読み込みを遅らせられないかを確認します。

改善後の確認

修正したらもう一度PageSpeed Insightsで分析し、ラボデータで効果を確認します。ラボデータはすぐに結果に反映されますが、フィールドデータは過去28日間の集計なので、改善が反映されるまで数週間かかります。すぐに数字が変わらなくても焦らず、しばらく経ってから確認しましょう。