PageSpeed Insightsの見方を徹底解説!2つの評価方法の違いとは

PageSpeed Insightsの見方を徹底解説!2つの評価方法の違いとは

Googleが無料で提供する「PageSpeed Insights(ページスピードインサイト)」を使えば、ページの表示速度や応答速度を定量的に知ることができます。ユーザー体験を悪化させるページの問題点を特定し、改善策を提案してくれるため、ページの利便性向上に非常に役立つツールです。

診断したいWebページのURLを入力すると「実際のユーザーの環境で評価する」と「パフォーマンスの問題を診断する」の2つの結果が表示されます。2つの結果に違いが出ることもあり、どちらの数値を参考にするべきか分からないという方もいるのではないでしょうか。

※アナグラムのコーポレートサイトの結果。「実際のユーザーの環境で評価する」では合格だが、「パフォーマンスの問題を診断する」ではスコアが低い。

そこで今回は、「実際のユーザーの環境で評価する」と「パフォーマンスの問題を診断する」の違いと、どちらの結果を重視するべきかについて解説します。

「実際のユーザーの環境で評価する」とは?

Google Chromeユーザーの環境でページを閲覧したときの実際の表示速度を、過去28日間収集した評価方法です。フィールドデータとも呼ばれています。各指標が何を指しているか、どんな改善策があるのか早速見ていきましょう。

※改善策とそれぞれの対応方法については、こちらの記事で解説しています。

Largest Contentful Paint (LCP):メインコンテンツの読み込み速度

PCやスマートフォンなどのデバイスで、ユーザーが直接見ることができる画面領域に表示される、最も大きなメインコンテンツの読み込み速度を測定する指標です。理想的には、このメインコンテンツが2.5秒以内に表示されることが望ましいとされています。

ファーストビューに大きな画像が埋め込まれている場合、その表示があまりに遅いと離脱に繋がります。LCPは、ユーザーの第一印象にも大きく影響する重要な指標です。

改善策

  • 画像を圧縮する
  • 未使用のCSS、JavaScriptを削除する
  • 重要度が低いCSS、JavaScriptの読み込みを先送りにする

Interaction to Next Paint (INP):操作時の応答速度

ユーザーがページに対して行動(クリック、タップ、キーボード入力など)をした時に、その反応が視覚的にどれくらい早く表示されるかを測定する指標です。この指標で200ミリ秒未満であれば、ページの応答性が良好であるとみなされます。

例えば、アコーディオンメニューをタップして反応が遅れたり、フォーム入力時にキーボードの反応が悪いと、ユーザーがサイトから離れてしまう可能性があります。このため、INPはユーザー体験を向上させる上で重要な指標となります。

画像引用元:Interaction to Next Paint(INP)

改善策

  • 実行に時間がかかるJavaScriptを見直す
  • 画面外の要素の読み込みは遅延させる

Cumulative Layout Shift (CLS):視覚的な安定性

ページ読み込み中に、ユーザーが予期しない形でコンテンツが動くことを測定する指標です。コンテンツが急に動くと、ユーザーは操作を誤ったり、読みたい情報に辿り着きにくくなってしまいます。この指標のスコアは、移動の幅が大きいほど数値が高くなり悪くなるのですが、0.1以下であれば良好なページと見なされます。

広告が多いページでは、読み込み中に広告が挿入されて本来のコンテンツが下にずれることがよくあります。これにより、ユーザーが意図しない場所をクリックしてしまうことがあり、結果としてページに対するフラストレーションが増加してしまいます。サービスの印象を下げないためには、CLSを低く保つことが大切です。

画像引用元:Cumulative Layout Shift(CLS)

改善策

  • 画像のサイズを指定する
  • 読み込みが遅いコンテンツ用のスペースを確保しておく
  • ウェブフォントの使用を減らしたり、表示方法を変更する

First Input Delay (FID):初回入力の応答速度

ユーザーがウェブサイトで最初に操作(クリック、タップ、キーボードの押下など)を行った際の反応速度を測る指標です。この「最初の入力」は、ページの読み込み中に行われる操作を指します。

先に紹介したINPも操作時の応答速度ですが、FIDとINPの主な違いは測定期間にあります。INPはページ訪問から離脱までの間に発生した、最も時間がかかった反応を測定し、結果に反映させます。これに対して、FIDは訪問者が最初に行った操作の反応速度のみを測定するため、サイトの第一印象を評価する指標と言えます。

改善策

  • 未使用のJavaScriptを削除する
  • 重要度が低いJavaScriptの読み込みを先送りにする

First Contentful Paint (FCP):最初に表示されるコンテンツの読み込み速度

画面内に一番最初に表示される要素の読み込み速度を測定する指標です。

画像引用元:First Contentful Paint(FCP)

こちらも、先に紹介したLCP(メインコンテンツの読み込み速度)と似た指標ですね。LCPは最も大きい要素であるメインコンテンツが表示される時間を測定する指標であるのに対して、FCPは大きさに関わらず一部の要素が最初に表示された時間を測定しています。

FCPには、起動時にロゴなどが表示されるスプラッシュスクリーンや読み込み画面も含まれるため、LCPの方がユーザー体験に大きな影響を与える可能性が高いです。2つの指標の違いをしっかり把握した上で、チェックしましょう。

改善策

  • 未使用のCSS、JavaScriptを削除する
  • CSSの余分な空白や文字を削除し圧縮する
  • 重要度が低いCSS、JavaScriptの読み込みを先送りにする

Time to First Byte (TTFB):サーバーの応答速度

サーバーの応答速度を測定する指標です。

TTFBが遅いとLCP(メインコンテンツの表示速度)も遅くなるため、良好と判断される0.8秒以下を目指していくのが良いでしょう。

改善策

  • サーバーを高速化する
  • リダイレクトを可能な限り減らす
  • WordPressは、テーマ、プラグイン、サーバーを見直す

6つの指標の中でとくに重要なのはLCP、INP、CLS

LCP、INP、CLSは、Googleが提唱する「Core Web Vitals(コアウェブバイタル)」に含まれています。

画像引用元:Web Vitals  |  Articles  |  web.dev

Core Web Vitalsは、ウェブサイトのユーザー体験を向上させるために重要視される指標群です。「ページの読み込み速度」「ユーザー操作に対する応答速度」「コンテンツの安定性」に焦点を当てており、Google検索のランキング要因にも組み込まれています。

元々、FID(初回入力の応答速度)はCore Web Vitalsの一部でしたが、2024年3月12日以降はINP(操作時の応答速度)に置き換えられました。INPの方がユーザー体験を全体的に捉え、改善する上でより重要と判断されたためです。このようにCore Web Vitalsを構成する指標は、時間の経過とともに変化することもあります。

Webページのユーザー体験が損なわれていないか、この3つの指標を中心に定期的にチェックするのがおすすめです。

「パフォーマンスの問題を診断する」とは?

特定のデバイスやインターネット接続の条件を設定した、テスト環境でページを読み込んだ場合を想定した推定結果です。ラボデータとも呼ばれています。

「実際のユーザーの環境で評価する」は、たとえば回線状況の悪いユーザーが多く含まれる場合いつもより数値が低くなることがありますが、「パフォーマンスの問題を診断する」は、ユーザーの使用しているデバイスや回線状況に左右されず、ページだけの問題を正確に把握することができるのがメリットです。

測定指標の中には、「実際のユーザーの環境で評価する」の指標と重複しているものもあるため、ここでは「パフォーマンスの問題を診断する」のみで見ることができる指標を紹介します。

Total Blocking Time:初回コンテンツ表示後に操作が出来ない時間

ページ上の最初のコンテンツが表示されてから、ユーザーがページを操作できるようになるまでの間に発生する、操作できないブロックされた時間を測定する指標です。

この指標は、ユーザーが最初に操作した際の反応速度を測るFID(First Input Delay)の代替指標としても機能し、「実際のユーザーの環境で評価する」では見ることができない具体的な改善策を知ることができます。

改善策

  • サードパーティのJavaScriptを見直す
  • CSS、JavaScriptの余分な空白や文字を削除し圧縮する

Speed Index:全コンテンツの読み込み速度

PCやスマートフォンなどのデバイスで、ユーザーが直接見ることができる画面領域に表示される全コンテンツが表示される速度を測定する指標です。

改善策

  • サードパーティのJavaScriptを見直す
  • CSS、JavaScriptの余分な空白や文字を削除し圧縮する
  • 重要度が低いCSS、JavaScriptの読み込みを先送りにする
  • ウェブフォントの使用を減らしたり、表示方法を変更する

「実際のユーザーの環境で評価する」と「パフォーマンスの問題を診断する」の結果が違う!どちらを参考にするべき?

「実際のユーザーの環境で評価する」と「パフォーマンスの問題を診断する」は異なる測定方法のため、結果が乖離することがあります。どちらも重要ですが、特に「実際のユーザーの環境で評価する」の結果を改善の基準とすることを推奨します。

その理由は以下の2点です。

  1. 「実際のユーザーの環境で評価する」は、Google Chromeユーザーがアクセスした時のデータを収集した「Chromeユーザーエクスペリエンスレポート(CrUX)」から出しており、CrUXはGoogleの検索順位に影響を与えるため
  2. 「パフォーマンスの問題を診断する」では、固定された環境でのシミュレーションに過ぎず、実際にユーザーが直面する問題や課題は捉えられないため

ただし、「パフォーマンスの問題を診断する」では具体的な改善策を知ることができるため、問題の原因を理解し適切な対応をする上では非常に役立ちます。

結論として、ユーザー視点で問題を特定するには「実際のユーザーの環境で評価する」を用い、その問題を解決する具体的な方法を知るために「パフォーマンスの問題を診断する」を活用するのがオススメです。

まとめ

PageSpeed Insightsの結果を正しく理解し活用することは、ページのユーザー体験を向上させる上で重要です。評価方法や指標の捉え方を間違えてしまうと、成果に繋がりづらい改善策に時間やリソースを割いてしまうリスクがあります。

ユーザー体験を良くするためには、コンテンツの質を向上させることももちろん重要ですが、ページの読み込み速度が遅かったり、不信感を与えるような挙動がある場合は、どれだけコンテンツが良くても見てもらう機会を逃してしまうことになります

PageSpeed Insightsの結果を適切に捉えて、効果的な施策を優先的に行いページの利便性を上げていきましょう。

関連記事

Webページの表示速度を改善するには?PageSpeed Insightsでよく提案される改善項目と対応方法を解説
Webページの表示速度を改善するには?PageSpeed Insightsでよく提案される改善項目と対応方法を解説
続きを見る
YouTube広告の獲得向け動画広告で押さえておくべき5つのポイント
YouTube広告の獲得向け動画広告で押さえておくべき5つのポイント
続きを見る
Google 広告の「共有予算」とは?設定方法と便利な使い方
Google 広告の「共有予算」とは?設定方法と便利な使い方
続きを見る