PageSpeed Insightsは、Webページの読み込み速度を測定し、改善点を示してくれる無料ツールです。しかし、表示される項目が多く、迷う方も少なくありません。
本記事では、見方と活用のコツをわかりやすく解説します。
PageSpeedInsightsの概要については以下の記事をご覧ください。
PageSpeedInsightsの基本的な使い方
使い方は非常にシンプルです。
- PageSpeed Insights にアクセス。
- 調査したいページのURLを入力し、「分析」をクリック。
- 診断結果が表示されます。
PageSpeed Insightsでわかる「2種類のデータ」
診断結果には、大きく分けて2つのデータが表示されます。ここが少し専門的ですが、概要だけ押さえておきましょう。
- 実際のユーザー環境データ（フィールドデータ） 過去28日間に、そのページを実際に訪れたリアルなユーザーの体験結果です。「生の声」に近いデータと言えます。
- シミュレーションデータ（ラボデータ） Googleのロボットが、一定の通信環境を再現して測定したデータです。ページを修正した直後の確認に向いています。
フィールドデータは「実際のユーザーの環境で評価する」、ラボデータは「パフォーマンスの問題を診断する」というレポートから確認できます。
最大の特徴は、性質の異なる2種類のデータを用いてページを評価する点にあります。
| 内容（何に基づいているか） | メリット | |
| フィールドデータ（実測値） | 実際にそのページを訪れたユーザーの、過去28日間の体験データ（Chromeユーザーセンターに基づく）。 | ユーザーが実際に感じている「リアルな体感速度」がわかる。 |
| ラボデータ（推測値） | Googleの管理された一定の環境（ネットワーク速度やデバイススペック）でシミュレーションした結果。 | 修正後すぐに結果が反映されるため、デバッグや改善の検証に適している。 |
レポート画面では、主に以下の3つの項目をチェックします。
①コア ウェブ バイタル（Core Web Vitals）の判定
Googleが重要視している「LCP（読み込み速度）」「INP（応答性）」「CLS（視覚的安定性）」の3指標が合格ラインに達しているかを確認できます。それぞれの項目については以下の関連記事をご覧ください。
②パフォーマンススコア
ページ全体の評価が 0〜100 の数値で表示されます。まずはこの数値を改善の指標にします。
③改善できる項目（診断）
「画像のサイズを適切に設定する」「使用していないJavaScriptの削減」など、速度を落としている原因と、それを修正することでどれくらい秒数が短縮されるかの目安が表示されます。
計測時の注意：点数は「ブレる」もの
PSIのスコアは、その時のサーバーやネットワークの混雑状況によって、同じページでも毎回変わります。
実行するたびにパフォーマンス スコアが変わるのはなぜですか？ページは何も変更していません。
パフォーマンス測定の変動は、複数のチャネルでのさまざまな影響の度合いによって発生します。指標の変動の一般的な原因としては、ローカル ネットワークの利用状況、クライアント ハードウェアの利用状況、クライアント リソースの競合状態があります。
PageSpeed Insightsについて
1回の計測だけでは誤差が大きいため、その点数だけでパフォーマンスを評価してはいけません。
正しく結果を評価するには、何回か計測を行い、その中で最良の点数を使います。PageSpeed Insightsはサーバーに負荷をかけるので、計測回数は2～3回でいいでしょう。
改善に向けた3つの方針
PageSpeed Insightsの診断結果には多くの改善項目が並びますが、すべてを修正する必要はありません。サイト運営に支障を出さないよう、以下の優先順位で進めます。
- 取り掛かりやすいものから始める（画像の圧縮など）
まずは手間が少なく、効果が実感しやすい施策から始めます。
- 工数がかかる項目や見た目に影響する修正は後回しにする
修正に膨大な時間がかかる場合や、デザイン・動作に悪影響が出る場合は、無理に修正しないという判断も重要です。
- 万が一に備えて「元に戻せる施策」を優先する
表示速度の改善でサイトが崩れては本末転倒です。失敗してもすぐに元の状態へ復元できる範囲の施策から行いましょう。
まとめ
PageSpeed Insightsは、ユーザー体験を客観的に把握するためのツールです。スコアは通信環境により変動しますが、まずは重要指標を確認し、50点以上の「良好」な状態を一つの目安に改善を進めましょう。
数値を改善の指標としつつ、本質的な目的である「ユーザーが快適に閲覧できる環境作り」に注力することが大切です。具体的な修正手順については、以下の実践編をご覧ください。
