SEO/MEO対策

PageSpeed Insightsの使い方｜表示速度の問題を特定して改善する方法

「サイトの表示が遅いと感じるけど、何が原因かわからない」「Core Web Vitalsのスコアを改善したい」

Webサイトの表示速度は、SEOとユーザー体験の両方に直結する重要な要素です。Googleは2021年から「ページエクスペリエンスアップデート」を導入し、表示速度を検索順位の評価要素として正式に採用しています。

そこで役立つのが、Googleが無料で提供する「PageSpeed Insights（ページスピードインサイト）」です。URLを入力するだけで、サイトの表示速度をスコア化し、具体的な改善点まで提案してくれます。

この記事では、PageSpeed Insightsの基本的な使い方から、各指標の見方、実践的な改善方法まで、初心者の方にもわかりやすく解説します。

PageSpeed Insightsとは？基本情報

PageSpeed Insightsの概要

PageSpeed Insights（PSI）は、Googleが無料で提供するWebページのパフォーマンス分析ツールです。測定したいページのURLを入力するだけで、そのページの表示速度を0〜100点のスコアで評価し、改善すべきポイントを具体的に提示してくれます。

主な特徴は以下の通りです。

  • 無料で利用可能：登録不要、使用回数の制限なし
  • モバイル・デスクトップ両対応：それぞれのデバイスでの評価を確認可能
  • Core Web Vitals対応：Googleが重視するLCP・INP・CLSの指標を測定
  • 改善提案の表示：何をどう改善すべきか具体的にアドバイス
  • 競合サイトの分析も可能：自社サイトだけでなく他社サイトも測定可能

PageSpeed InsightsのスコアはGoogleが公式運営する「Lighthouse（ライトハウス）」というツールから抽出されています。Lighthouseは、Chromeのデベロッパーツールにも組み込まれている信頼性の高い計測エンジンです。

なぜ表示速度が重要なのか

Webサイトの表示速度が重要視される理由は大きく3つあります。

1. 検索順位への影響

Googleは2018年の「スピードアップデート」でモバイル検索にも表示速度をランキング要因として導入しました。さらに2021年の「ページエクスペリエンスアップデート」では、Core Web Vitalsを正式なランキングシグナルとして採用。検索エンジンから高く評価されるためにも、表示速度の遅いサイトは改善が必要です。

2. ユーザー離脱率への影響

Googleの調査によると、モバイルページの読み込み速度が3秒以上かかる場合、訪問者の53%が離脱するとされています。表示速度が1秒遅れるだけで、コンバージョン率が約7%低下するというデータもあります。

3. ユーザー体験（UX）への影響

表示が遅いサイトはユーザーにストレスを与え、ブランドイメージの低下にもつながります。特にECサイトでは、ページ速度が売上に直結することが多くの調査で明らかになっています。

PageSpeed Insightsでできること

PageSpeed Insightsでは、具体的に以下の内容を確認できます。

  • パフォーマンススコア：0〜100点での総合評価
  • Core Web Vitals：LCP、INP、CLSの各指標
  • フィールドデータ：実際のユーザーから収集したデータ
  • ラボデータ：特定の環境下で測定したシミュレーションデータ
  • 改善できる項目：具体的な改善提案とその効果
  • 診断結果：パフォーマンスに関する詳細な診断
  • 合格した監査：問題のない項目の一覧

PageSpeed Insightsの使い方

基本的な測定手順

PageSpeed Insightsの使い方は非常にシンプルです。

Step 1：PageSpeed Insightsにアクセス

ブラウザで「PageSpeed Insights」と検索するか、直接URLにアクセスします。
URL：https://pagespeed.web.dev/

Step 2：URLを入力

画面中央の入力欄に、測定したいページのURLを入力します。トップページだけでなく、個別のページも測定可能です。

Step 3：分析を実行

「分析」ボタンをクリックすると、測定が開始されます。分析には通常30秒〜1分程度かかります。

Step 4：結果を確認

分析が完了すると、モバイルとデスクトップそれぞれのスコアと詳細なレポートが表示されます。

測定する際の注意点

測定結果は毎回変わる

PageSpeed Insightsのスコアは、測定するたびに若干の変動があります。これは、ネットワーク状況やサーバーの負荷などが影響するためです。正確な評価を得るためには、複数回測定して平均的なスコアを把握することをおすすめします。

モバイルとデスクトップで結果が異なる

モバイルの測定は、中程度の性能のスマートフォン（Moto G4相当）と4G回線を想定してシミュレートされます。そのため、デスクトップよりもスコアが低くなる傾向があります。

海外サーバーでの測定

PageSpeed Insightsは北米、ヨーロッパ、アジアのいずれかのGoogleデータセンターから測定を行います。日本のサイトは地理的な距離の影響でスコアが低くなりやすい傾向があります。

どのページを測定すべきか

効果的にサイトを改善するためには、以下のページを優先的に測定しましょう。

  • トップページ：サイトの顔となるページ
  • 主要なランディングページ：広告や検索からの流入が多いページ
  • コンバージョンに関わるページ：問い合わせフォーム、購入ページなど
  • アクセスの多いページ：Google Analyticsで確認できる人気ページ
  • テンプレートの異なるページ：ブログ記事、商品ページなど種類ごとに1つずつ

スコアの見方と評価基準

パフォーマンススコアの評価基準

PageSpeed Insightsのパフォーマンススコアは0〜100点で評価され、3段階に分類されます。

  • 90〜100点（緑）：Good（良好） – パフォーマンスに関する改善点はほぼない状態
  • 50〜89点（オレンジ）：Needs Improvement（改善が必要） – 平均的な速度だが改善の余地あり
  • 0〜49点（赤）：Poor（不良） – 改善点が多くある状態

目標スコアの目安

「何点を目指すべきか」という質問をよく受けますが、現実的な目標設定が重要です。

モバイルの目標

  • 最低限目指すべきライン：50点以上
  • 良好と言えるライン：60〜70点以上
  • 理想的なライン：90点以上

デスクトップの目標

  • 最低限目指すべきライン：70点以上
  • 良好と言えるライン：80点以上
  • 理想的なライン：90点以上

モバイルのスコアは4G通信を前提にシミュレートされるため、デスクトップよりも低くなりやすい傾向があります。日本の大手サイトでもモバイルで50〜60点台というケースは珍しくありません。

また、ECサイトや動的コンテンツが多いWebアプリケーションでは、90点以上を達成するのは困難な場合もあります。スコアだけにこだわりすぎず、ユーザー体験の向上を優先しましょう。

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

PageSpeed Insightsには「フィールドデータ」と「ラボデータ」という2種類のデータが表示されます。この違いを理解することが、正確な分析の第一歩です。

フィールドデータ（実測データ）

Chrome User Experience Report（CrUX）から取得した、実際のユーザーの体験データです。過去28日間に該当ページを訪問したChromeユーザーから匿名で収集されたデータを基にしています。

  • 実際のユーザー体験を反映
  • Googleの検索ランキングに影響する指標
  • 十分なトラフィックがないと表示されない
  • 改善の効果が反映されるまで時間がかかる（最大28日）

ラボデータ（シミュレーションデータ）

Lighthouseが特定の環境（中程度のモバイルデバイス、4G回線など）でシミュレートしたデータです。

  • 即座に測定可能
  • 改善の効果をすぐに確認できる
  • 一定の条件下での測定なので比較しやすい
  • 実際のユーザー体験とは異なる場合がある

どちらを重視すべきか

SEOの観点では、Googleが検索ランキングに使用するのはフィールドデータです。ただし、フィールドデータは改善の効果が反映されるまで時間がかかるため、改善作業中はラボデータを参考にしながら、最終的にはフィールドデータの改善を目指すというアプローチが効果的です。

Core Web Vitals（コアウェブバイタル）を理解する

Core Web Vitalsは、Googleがユーザー体験の質を測定するために定めた3つの重要な指標です。2024年3月には、従来のFID（First Input Delay）がINP（Interaction to Next Paint）に置き換えられました。

LCP（Largest Contentful Paint）

LCPは、ページ内で最も大きなコンテンツ（メインコンテンツ）が表示されるまでの時間を示す指標です。「体感的な読み込み速度」を測定しています。

評価基準

  • 良好：2.5秒以下
  • 改善が必要：2.5〜4.0秒
  • 不良：4.0秒超

LCPの対象となる要素

  • img要素
  • svg内のimage要素
  • video要素のポスター画像
  • 背景画像を持つ要素
  • テキストを含むブロックレベル要素

LCPが遅くなる主な原因

  • サーバーの応答速度が遅い
  • レンダリングをブロックするJavaScript/CSS
  • リソース（画像など）の読み込みが遅い
  • クライアントサイドレンダリングの遅延

INP（Interaction to Next Paint）

INPは、ユーザーの操作（クリック、タップ、キーボード入力など）に対して、視覚的な反応が発生するまでにかかる時間を示す指標です。「ページの応答性」を測定しています。

2024年3月に、従来のFID（最初の操作のみを測定）からINP（すべての操作を測定し、最も遅いものを報告）に変更されました。

評価基準

  • 良好：200ミリ秒以下
  • 改善が必要：200〜500ミリ秒
  • 不良：500ミリ秒超

INPが遅くなる主な原因

  • JavaScriptの実行に時間がかかっている
  • メインスレッドがブロックされている
  • イベントハンドラの処理が重い
  • サードパーティスクリプトの影響

CLS（Cumulative Layout Shift）

CLSは、ページの読み込み中に発生する予期しないレイアウトのズレ（シフト）を数値化した指標です。「視覚的な安定性」を測定しています。

例えば、ページを読んでいる最中に広告が突然読み込まれてコンテンツが下にズレたり、ボタンをクリックしようとした瞬間に位置がずれて別の場所をクリックしてしまったりする現象がCLSです。

評価基準

  • 良好：0.1以下
  • 改善が必要：0.1〜0.25
  • 不良：0.25超

CLSが悪化する主な原因

  • サイズ指定のない画像や動画
  • 遅れて読み込まれる広告や埋め込みコンテンツ
  • 動的に挿入されるコンテンツ
  • Webフォントの読み込み（FOIT/FOUT）

その他の重要な指標

FCP（First Contentful Paint）

FCPは、ページの読み込みが開始されてから、最初のコンテンツ（テキスト、画像など）が表示されるまでの時間を示します。ユーザーが「何かが表示された」と感じる最初のタイミングです。

評価基準

  • 良好：1.8秒以下
  • 改善が必要：1.8〜3.0秒
  • 不良：3.0秒超

TTFB（Time to First Byte）

TTFBは、ブラウザがページをリクエストしてから、サーバーから最初のバイトを受信するまでの時間を示します。サーバーの応答速度を測定する指標です。

評価基準

  • 良好：0.8秒以下
  • 改善が必要：0.8〜1.8秒
  • 不良：1.8秒超

Speed Index（スピードインデックス）

Speed Indexは、ページのコンテンツがどれだけ速く視覚的に表示されるかを示す指標です。スコアが低いほど、ページが速く表示されていることを意味します。

Total Blocking Time（TBT）

TBTは、FCPからTTI（Time to Interactive）までの間に、メインスレッドがブロックされていた時間の合計を示します。この時間が長いと、ユーザーの操作に対する応答が遅くなります。

「改善できる項目」の見方と対処法

PageSpeed Insightsの「改善できる項目」セクションには、パフォーマンスを向上させるための具体的な提案が表示されます。各項目には、改善によって短縮できる推定時間も表示されるため、優先順位をつけやすくなっています。

よく表示される改善項目と対処法

1. 次世代フォーマットでの画像の配信

JPEG/PNGの代わりにWebPやAVIF形式を使用することで、画像サイズを大幅に削減できます。

  • 対処法：画像をWebP形式に変換する
  • WordPressの場合：EWWW Image OptimizerやShortPixelなどのプラグインを使用

2. 適切なサイズの画像

表示サイズよりも大きな画像を配信している場合に表示されます。

  • 対処法：表示サイズに合わせて画像をリサイズする
  • レスポンシブ画像（srcset属性）を使用する

3. オフスクリーン画像の遅延読み込み

ファーストビュー外の画像を最初から読み込んでいる場合に表示されます。

  • 対処法：loading=”lazy”属性を追加してレイジーロードを実装
  • WordPressの場合：5.5以降は標準でレイジーロードに対応

4. レンダリングを妨げるリソースの除外

ページの表示をブロックしているCSS/JavaScriptがある場合に表示されます。

  • 対処法：クリティカルCSSをインライン化する
  • 不要なCSS/JSを削除または遅延読み込みにする
  • async/defer属性を使用してJavaScriptを非同期読み込みにする

5. 使用していないJavaScriptの削減

読み込まれているが使用されていないJavaScriptコードがある場合に表示されます。

  • 対処法：不要なプラグインやスクリプトを削除
  • コード分割（Code Splitting）を実装
  • 使用していないライブラリを削除

6. 使用していないCSSの削減

読み込まれているが使用されていないCSSがある場合に表示されます。

  • 対処法：PurgeCSSなどのツールで未使用CSSを削除
  • ページごとに必要なCSSのみを読み込む

7. テキスト圧縮の有効化

サーバーからのレスポンスがGzip/Brotli圧縮されていない場合に表示されます。

  • 対処法：サーバー設定でGzip/Brotli圧縮を有効にする
  • .htaccessファイルで設定（Apacheの場合）

8. 効率的な画像フォーマット

画像の圧縮が不十分な場合に表示されます。

  • 対処法：TinyPNG、Squooshなどで画像を圧縮
  • 適切な圧縮率を設定（品質80%程度が目安）

9. サーバーの応答時間の短縮（TTFB）

サーバーの応答が遅い場合に表示されます。

  • 対処法：サーバーのスペックアップ
  • CDN（コンテンツデリバリーネットワーク）の導入
  • キャッシュの設定
  • データベースの最適化

10. 静的なアセットと効率的なキャッシュポリシーの配信

ブラウザキャッシュの設定が不適切な場合に表示されます。

  • 対処法：Cache-Controlヘッダーで適切なキャッシュ期間を設定
  • 静的ファイルに長いキャッシュ期間を設定（1年など）

Core Web Vitalsの具体的な改善方法

LCPを改善する方法

1. サーバーの応答速度を改善

  • 高速なホスティングサービスに移行
  • CDNを導入してコンテンツを分散配信
  • サーバーサイドキャッシュを有効化

2. レンダリングをブロックするリソースを排除

  • クリティカルCSSをインライン化
  • JavaScriptにasync/defer属性を追加
  • 不要なサードパーティスクリプトを削除

3. リソースの読み込みを最適化

  • LCP要素（メイン画像など）をpreloadで優先読み込み
  • 画像をWebP形式に変換して軽量化
  • 画像のサイズを適切に設定

4. クライアントサイドレンダリングの最適化

  • サーバーサイドレンダリング（SSR）の導入を検討
  • 重要なコンテンツを先に表示

INPを改善する方法

1. JavaScriptの最適化

  • 不要なJavaScriptを削除
  • JavaScriptファイルを圧縮（Minify）
  • コード分割で必要な部分のみを読み込み

2. 長いタスクを分割

  • 50ミリ秒以上かかるタスクを小さく分割
  • Web Workersを使用して重い処理をバックグラウンドで実行
  • requestIdleCallbackで非緊急タスクを遅延実行

3. サードパーティスクリプトの最適化

  • 不要なサードパーティスクリプトを削除
  • 遅延読み込み（lazy load）を実装
  • 非同期読み込みに変更

4. イベントハンドラの最適化

  • イベントハンドラ内の処理を軽量化
  • デバウンス/スロットルを実装

CLSを改善する方法

1. 画像・動画のサイズを指定

  • すべての画像にwidth/height属性を設定
  • CSSでaspect-ratioを指定
  • 動画やiframeにもサイズを指定

2. 広告・埋め込みコンテンツのスペースを確保

  • 広告枠のサイズを事前に確保
  • 埋め込みコンテンツの領域をCSSで予約

3. 動的コンテンツの制御

  • コンテンツを上部に挿入しない
  • ユーザーアクションに応じて表示する
  • アニメーションはtransformを使用（レイアウトに影響しない）

4. Webフォントの最適化

  • font-display: swapを使用
  • フォントをpreloadで先読み
  • サブセット化でファイルサイズを削減

Google Search Consoleとの連携

Google Search Consoleには「ウェブに関する主な指標（Core Web Vitals）」レポートがあり、サイト全体のCore Web Vitalsの状況を確認できます。

Search Consoleでの確認方法

Step 1：Search Consoleにログイン

Google Search Consoleにアクセスし、対象のプロパティを選択します。

Step 2：レポートを開く

左側のメニューから「エクスペリエンス」→「ウェブに関する主な指標」を選択します。クロールとインデックスのレポートと合わせて確認することで、サイト全体のテクニカルSEO状況を把握できます。

Step 3：結果を確認

モバイルとPCそれぞれで、「不良」「改善が必要」「良好」に分類されたURLの数を確認できます。

PageSpeed InsightsとSearch Consoleの違い

  • PageSpeed Insights：個別ページの詳細分析、改善提案の確認
  • Search Console：サイト全体の状況把握、問題のあるURL群の特定

両方を併用することで、サイト全体の問題を把握しつつ、個別ページの詳細な改善を進められます。

他のパフォーマンス測定ツール

Lighthouse（ライトハウス）

Chromeのデベロッパーツールに組み込まれている監査ツールです。PageSpeed Insightsと同じエンジンを使用していますが、ローカル環境で測定できるため、開発中のテストに便利です。

使い方

  1. Chromeでページを開く
  2. F12キーでデベロッパーツールを開く
  3. 「Lighthouse」タブを選択
  4. 「Analyze page load」をクリック

GTmetrix

Web.dev以外の人気パフォーマンス測定ツールです。PageSpeed Insightsよりも詳細なウォーターフォールチャートを確認でき、リソースの読み込み順序を視覚的に把握できます。

WebPageTest

詳細なパフォーマンス分析が可能なツールです。複数の地域・ブラウザからの測定や、動画による表示プロセスの確認ができます。

WordPress向けの速度改善対策

WordPressサイトは、プラグインやテーマの影響で表示速度が遅くなりやすい傾向があります。以下の対策が効果的です。

おすすめのキャッシュプラグイン

  • WP Rocket（有料）：最も高機能で設定が簡単
  • W3 Total Cache（無料）：詳細な設定が可能
  • LiteSpeed Cache（無料）：LiteSpeedサーバー利用時に最適

画像最適化プラグイン

  • EWWW Image Optimizer：自動でWebP変換
  • ShortPixel：高品質な圧縮
  • Imagify：使いやすいインターフェース

その他の対策

  • 不要なプラグインを削除
  • 軽量なテーマを選択
  • PHPのバージョンを最新に更新
  • データベースを定期的に最適化

よくある質問（FAQ）

Q1. PageSpeed Insightsのスコアは何点を目指すべきですか？

A. モバイルで50点以上、デスクトップで70点以上を最低限の目標とし、可能であれば90点以上を目指しましょう。ただし、スコアよりも実際のユーザー体験（フィールドデータ）の改善を優先することが重要です。

Q2. スコアが毎回変わるのはなぜですか？

A. ネットワーク状況やサーバーの負荷、測定に使用されるデータセンターの場所などが影響するためです。複数回測定して平均的なスコアを把握することをおすすめします。

Q3. モバイルのスコアがデスクトップより低いのはなぜですか？

A. モバイルの測定は、中程度の性能のスマートフォンと4G回線を想定してシミュレートされるためです。デスクトップよりも厳しい条件での測定となります。

Q4. フィールドデータが表示されないのはなぜですか？

A. フィールドデータはChrome User Experience Report（CrUX）から取得されます。十分なトラフィックがないページでは、データが蓄積されていないため表示されません。

Q5. PageSpeed InsightsのスコアはSEOにどれくらい影響しますか？

A. Core Web Vitalsは確かにランキング要因ですが、コンテンツの質ほど大きな影響はありません。ただし、同程度の品質のページが競合している場合、表示速度が差別化要因になる可能性があります。

Q6. 改善後、スコアに反映されるまでどれくらいかかりますか？

A. ラボデータ（シミュレーション）は即座に反映されます。フィールドデータ（実測）は過去28日間のデータを使用するため、改善効果が完全に反映されるまで最大28日かかります。

Q7. 100点を取る必要がありますか？

A. 必ずしも100点を目指す必要はありません。90点以上であれば「良好」と評価されます。機能が豊富なサイトでは100点達成が難しい場合もあるため、ユーザー体験とのバランスを考慮しましょう。

Q8. サードパーティスクリプト（広告、アナリティクスなど）の影響は？

A. サードパーティスクリプトはページ速度に大きく影響します。必要最小限に抑え、可能な限り遅延読み込みを実装することをおすすめします。

Q9. スマートフォンでPageSpeed Insightsを使えますか？

A. はい、スマートフォンのブラウザからもPageSpeed Insightsにアクセスして使用できます。

Q10. 競合サイトのスコアも調べられますか？

A. はい、URLを入力するだけなので、自社サイトだけでなく競合サイトのパフォーマンスも調査できます。

まとめ

PageSpeed Insightsは、Webサイトの表示速度を改善するための強力な無料ツールです。

PageSpeed Insightsのポイント

  • URLを入力するだけで表示速度を0〜100点で評価
  • Core Web Vitals（LCP・INP・CLS）の測定に対応
  • 具体的な改善提案を確認可能
  • フィールドデータ（実測）とラボデータ（シミュレーション）の両方を提供
  • Google Search Consoleと併用することで効果的に改善可能

改善の優先順位

  1. Core Web Vitals（LCP、INP、CLS）を「良好」の範囲に
  2. 「改善できる項目」で効果の大きいものから対処
  3. フィールドデータの改善を最終目標に

表示速度の改善は、テクニカルSEOの重要な要素であり、検索順位だけでなく、ユーザー体験やコンバージョン率の向上にも直結します。内部リンク構造の最適化やコンテンツの改善と合わせて、総合的なSEO対策を進めていきましょう。

まずはPageSpeed Insightsで自社サイトの現状を把握し、優先順位をつけて改善に取り組みましょう。すべてを一度に改善する必要はありません。効果の大きい項目から段階的に対処していくことで、着実にパフォーマンスを向上させることができます。

モバイルSEOやページエクスペリエンスの改善についてさらに詳しく知りたい方は、オムニウェブのSEO対策サービスにお気軽にご相談ください。

    ご希望サービスをすべてお選びください　必須

    業種　必須

    お名前　必須

    電話番号　必須

    メールアドレス　必須

    ご要望があれば内容をご記入ください

    使用したい写真は公式LINEよりお送りください

    タップ → @763qkbqf

    関連記事