Google PageSpeed Insights(ページスピードインサイト)を使ったサイト表示速度の改善方法

PageSpeed Insightsとは、入力したURLの表示速度をスコア（点数）で評価し、Webページの表示速度を改善するためのアドバイスをしてくれるGoogle公式提供の無料ツールのことです。
このPageSpeed Insights（ページスピードインサイト）をうまく使ってサイト表示速度（ページ読み込み速度）を改善すれば、SEOへの良い効果が期待できます。

一方、PageSpeed Insightsを使わなければ、点数やアドバイスが把握できません。
この場合、自サイトの速度の欠点や、優先して直すべき箇所がわかりません。
そうなれば、必要な対策を怠る可能性が高まります。
結果、ユーザーの離脱が増えてGoogleに評価されづらくなるので、検索順位が上がりづらくなったり、検索流入が増えづらくなるというわけです。

こうした良くない状況を回避する為に、PageSpeed Insightsをうまく活用して、サイト表示速度の改善に努めましょう。

この点踏まえて今回は、PageSpeed Insightsの使い方や見方、サイト表示速度の改善方法など中心に、初心者にもわかりやすくポイントをまとめて解説したいと思います。

PageSpeed Insightsとは？

PageSpeed Insightsとは、入力したURLの表示速度をスコア（点数）で評価し、表示速度の改善に必要なアドバイスをしてくれるGoogle公式提供の無料ツールのことです。
現在は、Googleの計測エンジン「Lighthouse」をベースに、実際のユーザーの環境で計測された「フィールドデータ」と、その場で擬似的に計測する「ラボデータ」の両方を確認できます。

なかでも評価の中心となるのが、Googleがページの使い心地を測る指標「ウェブに関する主な指標（Core Web Vitals）」です。
なので、PageSpeed Insightsは、単なる速度チェックだけでなく、Core Web Vitalsに合格しているかどうかを確認するためのツールとしても重要というわけです。

PageSpeed Insightsは、以下のURLからブラウザで無料で利用できます。

PageSpeed Insightsの使い方

①PageSpeed Insightsにアクセス後、計測したい「ウェブページのURLを入力」し、「分析」ボタンをクリックします。

②しばらくすると、「携帯電話（モバイル）」と「デスクトップ（PC）」それぞれの結果が表示されます。
まず上部の「実際のユーザーの環境で評価する」で、過去28日間の実ユーザーデータ（フィールドデータ）をもとにしたCore Web Vitalsの合格・不合格を確認できます。

③続いて下部の「パフォーマンスの問題を診断する」では、Lighthouseによるラボデータをもとに、0〜100点のパフォーマンススコアや各指標が確認できます。
「携帯電話」「デスクトップ」のタブを切り替えて、それぞれの状態をチェックしましょう。

スコアは色でも評価され、0〜49は赤（不良）／50〜89はオレンジ（要改善）／90〜100は緑（良好）となっています。
なので、まずは赤やオレンジの項目から優先的に対策していくのがポイントというわけです。

PageSpeed Insightsの見方（Core Web Vitalsとスコア）

PageSpeed Insightsを正しく活用するには、「フィールドデータ」と「ラボデータ」の違いと、Core Web Vitalsの3指標を理解しておくことが大切です。

フィールドデータとラボデータの違い

それぞれの違いは、以下のとおりです。

Core Web Vitals（ウェブに関する主な指標）の3指標

Core Web Vitalsは、ページの使い心地を測る以下の3つの指標で構成されます。

なお、応答性の指標は、2024年3月にFID（First Input Delay）からINPへ置き換わりました。
古い記事ではCore Web VitalsをLCP・FID・CLSと紹介している場合がありますが、現在はLCP・INP・CLSが正しいので注意しましょう。

そして、3指標すべてが「良好」の水準を満たすと、「ウェブに関する主な指標の評価：合格」と表示されます。
というわけで、まずはこのCore Web Vitalsの合格を目標に、改善を進めていくのがおすすめです。

PageSpeed Insightsを使ったサイト表示速度の改善方法

ラボデータの下には、「インサイト（改善できる項目）」として、そのページで効果が見込める具体的な改善策と、削減できる見込みのサイズ・時間が一覧で表示されます。

提案される内容はページによって異なりますが、主な改善方法としては以下のようなものがあります。

画像を最適化する

画像は、ページの読み込み速度に最も影響しやすい要素です。
なので、WebPやAVIFなどの次世代フォーマットに変換してファイルサイズを軽くしたり、表示サイズに合わせて画像を圧縮・リサイズしたりしましょう。
あわせて、画面外の画像を後から読み込む遅延読み込み（loading=”lazy”）を使うと、初期表示が速くなります。

使用していないJavaScript・CSSを削減する

そのページで使っていないJavaScriptやCSSは、読み込みや処理の無駄になります。
なので、不要なコードやプラグインを整理し、必要なものだけを読み込むようにしましょう。

レンダリングを妨げるリソースを排除する

ページ表示の最初の描画を妨げるJavaScriptやCSSは、非同期読み込み（async・defer）にしたり、最初の表示に必要なCSSだけ先に読み込ませたりして、描画のブロックを減らしましょう。

テキスト圧縮・キャッシュを有効にする

HTMLやCSS、JavaScriptはgzipやBrotliで圧縮して転送量を減らし、ブラウザキャッシュを適切に設定して再訪時の読み込みを速くしましょう。

サーバーの応答時間（TTFB）を短縮する

サーバーの応答が遅いと、そもそもの表示開始が遅くなります。
なので、サーバースペックの見直しやキャッシュの活用、CDNの導入などで、TTFB（Time to First Byte）を短縮しましょう。

レイアウトのずれ（CLS）を防ぐ

画像や広告の表示によって後からレイアウトがずれると、CLSが悪化します。
なので、画像や動画に幅・高さ（サイズ）を指定し、広告や埋め込みの表示領域をあらかじめ確保しておきましょう。

フォントの表示を最適化する

Webフォントの読み込み待ちで文字が表示されないと、体感速度が下がります。
なので、font-display: swapなどを指定して、フォント読み込み中も代替フォントで文字を表示させましょう。

PageSpeed Insightsを使ったサイト表示速度の改善結果

PageSpeed Insightsやサーバーログを使ったサイト表示速度の改善結果を、弊社の事例を参考にご紹介します。

上記は、平均読み込み時間が最大117.35秒の不安定な状況から、スムーズにサイト閲覧できるよう改善した事例です。

主な対策としては、サーバースペックを変更し、あわせて画像やファイルの容量を軽量化しました。
このように、表示速度の改善では、最も遅い指標（影響の大きい要素）から優先的に対処するのが基本というわけです。

PageSpeed Insightsでモバイルだけ遅い場合の改善方法

PageSpeed Insightsで、デスクトップは良好なのに、携帯電話（モバイル）だけスコアが低いことはよくあります。
これは、モバイルがPCよりも低速な回線・低スペックな端末を想定して計測されるためです。

Googleはモバイルファーストインデックス（スマホ版を評価の基準にする仕組み）を採用しているので、モバイルの表示速度は特に重要です。
なので、モバイルだけ遅い場合は、画像の軽量化・遅延読み込み、不要なJavaScriptの削減、レンダリングブロックの排除を優先して対策しましょう。
そうすれば、モバイルの表示速度が改善され、ユーザーの離脱防止とSEOの両面で良い効果が期待できるというわけです。

まとめ：PageSpeed Insightsを活用して、サイト表示速度の改善に努めよう

PageSpeed Insightsをうまく活用して、サイト表示速度の改善に努めましょう。

一方、PageSpeed Insightsを使わなければ、点数やアドバイス、Core Web Vitalsの合否が把握できません。
この場合、自サイトの速度の欠点や、優先して直すべき箇所がわかりません。
そうなれば、必要なSEO対策を怠る可能性が高まります。
結果、Googleに評価されづらくなるので、検索順位が上がりづらくなったり、検索流入が増えづらくなるというわけです。

こうした悪い状況を回避する為に、PageSpeed InsightsでCore Web Vitalsとスコアを確認し、サイト表示速度の改善に努めましょう。