PageSpeed Insights （PSI） は、Webサイトのユーザーエクスペリエンスの測定・分析に役立つツールです。
名前は聞いたことがあるものの使用していない、あるいは使用しているが使いこなせていない方も多いはずです。
本記事では、PageSpeed Insightsの基本・実践レベル別の使い方からスコアの見方、改善方法までをわかりやすく解説します。また、スコア改善に効果的な画像・動画最適化プラットフォーム「Imgix」の活用法も紹介します。
PageSpeed Insightsを初めて使う方やスコア改善に本気で取り組みたい方は、ぜひ最後までご覧ください。
PageSpeed Insightsのスコアでお悩みの方は、弊社の画像最適化サービス「Imgix」をご検討ください。日本経済新聞や一休.comなどでもご活用いただいています。
そもそもPageSpeed Insights（ページスピードインサイト）とは？
PageSpeed Insightsとは、Googleが提供するWebページ分析ツールです。
具体的には、以下の2種類のデータが提示されます。
- ラボデータ：実験的な環境で得られるデータ
- 実際のユーザーの環境で評価する：Chromeユーザーエクスペリエンスレポート（CrUX）から取得したデータ
シミュレーション・実環境それぞれで、さまざまなWebサイトの評価指標を用いて表示速度やユーザー体験の質を総合的に評価します。
また、PSIは多様な評価機能があるにもかかわらず、非常にシンプルなユーザーインターフェースが魅力です。分析したいページのURLを入力するだけで、パフォーマンスのスコアと改善提案が表示されます。
専門知識がなくてもWebサイトの現状把握と課題抽出ができることから、Web担当者はもちろん、非エンジニアのマーケターにも広く活用されています。
PageSpeed Insightsの主な特徴
PageSpeed Insightsの主な特徴は、以下のとおりです。
- 完全無料：登録料や月額契約料など使用する際のコストが個人・法人に限らず不要
- モバイル・デスクトップ両方に対応：モバイルとデスクトップそれぞれの表示速度を個別に評価可能
- あらゆるサイトの評価に対応：自社サイトだけでなく、競合サイトのURLを入力することで比較分析が可能
特筆すべきは、モバイル環境の評価も可能なことです。近年、モバイルファーストなサイト構築が重要とされています。PSIを活用すると簡単にモバイル環境にも最適化でき、SEO評価の向上につながります。
また、競合サイトの表示速度なども分析できるため、優れたサイトとのギャップの把握が容易です。優先的に改善すべきポイントを理解できるため、最小のリソースで最大の効果を得られるように改善できます。
PageSpeed Insightsが重要な理由｜ページ速度との関係性
PageSpeed Insightsを用いたWebサイトの分析は、以下3つの観点から重要です。
- ユーザー体験（UX）
- コンバージョン率（CVR）
- SEO評価
Webページの読み込みが遅いとユーザーはストレスを感じ、早期に離脱します。特にモバイルユーザーは3秒以上読み込みにかかると、約50％が離脱するといわれています。
特にECサイトやリード獲得型サイトにおいては、表示スピードの改善が収益拡大に与えるインパクトの大きさを理解し、優先的に取り組むことが大切です。1 秒の遅延により、売上が10%低下する可能性があるとも言われています。（EC業界のソリューション）
また、Googleはモバイルファーストインデックスを全面導入しており、スマートフォンからのアクセスが多い現在では、モバイルサイトの表示速度改善が不可欠です。表示速度が遅いと、ユーザー体験の悪化だけでなく、検索順位の低下による機会損失を招きます。
これらの理由から、表示速度は単なる見た目の問題ではなく、ビジネス成果に直結する重要指標といえます。
PSIを活用することで、自社サイトの表示速度を客観的に評価し、改善ポイントを的確に把握できます。表示が速く、かつ使いやすいサイト構築には、PSIの活用が欠かせません。
他のWebページ測定ツールとの違い
PageSpeed Insightsとよく比較検討される測定ツールが、LighthouseやPerformance Insightsです。
それぞれには、以下のような違いがあります。
【PageSpeed Insights】
・主な特徴
URLを入力するだけで簡単に分析可能
UX評価に特化
・測定できるデータ
ラボデータ（Lighthouseベース）
フィールドデータ（Chrome UX Report）
・おすすめな方
非エンジニアをはじめとする幅広いユーザー向け
【Lighthouse】
・主な特徴
デベロッパーツールまたはCLIで実行
詳細な技術情報を取得可能
・測定できるデータ
ラボデータのみ（パフォーマンスやアクセシビリティ、SEOなど）
・おすすめな方
開発・改善向け
【Performance Insights】
・主な特徴
開発者向けのリアルタイム・インタラクティブなGoogle Chromeの分析ツール
コアウェブバイタル以外の技術的ボトルネック分析に強い
処理の詳細なタイミングまで取得可能
・測定できるデータ
リアルタイム実行ログ・各処理（描画やスクリプト、イベント）の詳細な時間
・おすすめな方
やや上級者向け
PSIと比較し、LighthouseとPerformance Insightsは詳細な評価や可視化が可能なため、技術的な深掘りに向いているツールです。
そのため、PSIを入り口としてLighthouseやPerformance Insightsを併用すると、より効果的に分析を進められます。
PageSpeed Insightsの基本的な使い方と見方
まずは、基本的な使い方を見ていきましょう。
PageSpeed Insightsは、たった3ステップで簡単にページ速度の測定が可能です。以下では、実際のページを用いて使い方を紹介します。
まずは、PageSpeed Insightsの公式サイトにアクセスしましょう。
続いて、分析したいWebページのURLを入力します。
最後に、分析ボタンをクリックすれば完了です。
分析ボタンを押下後、数秒でモバイルとデスクトップ別に以下のような結果が表示されます。
いずれの分析結果も、3つの色と数値でわかりやすく示されます。
また、下部にあるパフォーマンスの問題を診断する項目では、以下のような診断結果も表示され、ボトルネックをひと目で把握することが可能です。
まずは1ページだけ試してみるだけでも、現状の課題が見えてきます。
【チェックポイント】
✓ URLが正しく入力されている
✓ モバイル・デスクトップ両方を確認した
✓ 測定結果をスクリーンショットで保存した
すべて確認できたら、次は実際のユーザー環境での評価について見ていきましょう。
PageSpeed Insightsの実践的な見方と使い方【実際のユーザーの環境で評価する】
以下からは、実践レベルのPageSpeed Insightsの使い方を見ていきましょう。
PSIでは、「実際のユーザーの環境で評価する」を通じて、実際のユーザーのネットワークやブラウザ環境でのパフォーマンスを確認できます。これはフィールドデータとも呼ばれ、CrUXによる過去28日間の実績値に基づくデータです。
具体的に、フィールドデータでは以下5つのパフォーマンス指標が提示されます。
- Largest Contentful Paint （LCP）：読み込み時間
- Interaction to Next Paint （INP）：応答性
- Cumulative Layout Shift （CLS）：視覚的な安定性
- First Contentful Paint （FCP）：初回コンテンツ表示時間
- Time to First Byte （TTFB）：サーバーの応答速度
特に、Googleが検索順位の評価としているコアウェブバイタルのLCP・INP・CLSの3つが重要です。
また、いずれの指標も以下の3色で表示されます。
- 緑＝良好
- オレンジ＝改善の余地あり
- 赤＝要改善
横棒グラフや指標横のマークがオレンジや赤の場合は、優先的な改善が必要なことを意味します。
このように、PSIでは実際のユーザー環境での評価を通じて、UX指標の現状・理想とのギャップ・具体的な改善対象を簡単に把握することが可能です。
本章では、各指標の特徴や目指すべき理想値を紹介します。
【チェックポイント】
✓ LCP・INP・CLSの数値を記録したか
✓ 合格や改善が必要などの判定を確認したか
✓ 前回測定と比較したか
Largest Contentful Paint（LCP）：読み込み時間
LCPは、ページにおける主要な画像やテキストなどの要素が画面内に表示されるまでの時間を測定する指標です。短いほど表示が早く、ページ離脱の防止やユーザー満足度の向上に貢献します。
また、ユーザーが「Webサイトが表示された」と感じる体感にもっとも近い指標であるため、ユーザー視点で表示速度を改善する際に役立ちます。
▼色（改善の必要性）と秒数の関係性
- 緑（良好）：2.5秒以内
- オレンジ（改善の余地あり）：2.5秒～4.0秒
- 赤（要改善）：4.0秒以上
LCPについては下記記事にて詳細をご確認ください。
LCPとは？表示速度が遅くなる原因や改善方法などを解説
Interaction to Next Paint（INP）：応答性
INPは、ユーザーがボタンやリンクをクリックした後に、ブラウザが反応するまでの速度を測定する指標です。例えば、クリック操作で展開される画像や動画が表示されるまでの速度を指します。
応答が速いほど、ユーザーがストレスなく操作でき、操作性の高いサイトと評価されます。
▼色（改善の必要性）と秒数の関係性
- 緑（良好）：200ミリ秒以内
- オレンジ（改善の余地あり）：200ミリ秒～500ミリ秒
- 赤（要改善）：500ミリ秒以上
Cumulative Layout Shift（CLS）：視覚的な安定性
CLSは、ページの読み込み中にレイアウトがどれだけズレたかを示す指標です。テキストやボタンが表示中にガタガタ動く状態を数値化し、Webサイトの視覚的な快適さを評価する際に役立ちます。
CLSは、影響を受けた画面領域の割合とズレた距離の割合を掛け合わせて算出されますが、PSIを使うと簡単に確認することが可能です。
スコアが低いほど、表示中のズレが少なく、ユーザーにとって安定した快適なサイトであることを示します。
▼色（改善の必要性）と秒数の関係性
- 緑（良好）：0.1以下
- オレンジ（改善の余地あり）：0.1～0.25
- 赤（不安定）：0.25以上
First Contentful Paint （FCP）：初回コンテンツ表示時間
FCPは、ブラウザが最初のテキスト・画像・SVGなどのコンテンツを表示した瞬間までの時間を測定する指標です。つまり、空白状態から何かが画面に現れるまでのスピードです。
ページが読み込み中であることをユーザーに示す段階のため、待ち時間の体感に影響します。そのため、FCPの理想値は、主要コンテンツの表示を示すLCPよりも短く設定されています。
▼色（改善の必要性）と秒数の関係性
- 緑（良好）：1.8秒以内
- オレンジ（改善の余地あり）：1.8秒～3.0秒
- 赤（要改善）：3.0秒以上
Time to First Byte（TTFB）：サーバーの応答速度
TTFBは、ユーザーのブラウザがリクエストを送信してから、サーバーが最初の1バイトを返すまでの時間を測定する指標です。サーバーやネットワークの処理速度、DNS応答など、バックエンド全体のパフォーマンスを反映します。
TTFBが遅いとページ全体の読み込み開始が遅れるため、表示速度全体に悪影響を及ぼすため、理想値を目指して環境を見直すことが大切です。
▼色（改善の必要性）と秒数の関係性
- 緑（良好）：0.8秒以内
- オレンジ（改善の余地あり）：0.8秒～1.8秒
- 赤（要改善）：1.8秒以上
【チェックポイント】
✓ 優先度の高い改善項目を特定したか
✓ 改善前のスコアを記録したか
✓ 実装スケジュールを決めたか
PageSpeed Insightsの実践的な見方と使い方【パフォーマンスの問題を診断する】
PageSpeed Insightsでは、シミュレーション環境での計測データ「パフォーマンスの問題を診断する」も確認できます。この部分はラボデータとも呼ばれます。
具体的にラボデータとは、特定のテスト環境下で、ページの読み込みや応答を計測し、改善すべきポイントを洗い出す機能です。実ユーザーのデータでは拾いきれない課題の発見や、改善施策の効果検証に役立ちます。
ラボデータの各項目は、緑・オレンジ・赤の100点満点で表示されるグラフと、以下3つの項目で評価されます。
- 改善点
- 個別検証が必要な項目
- 合格した監査
ラボデータとフィールドデータとの大きな違いは、分析結果があるかどうかです。ラボデータを活用することで、パフォーマンスの問題を診断し、具体的な改善アクションにつなげられます。
本章では、各指標の特徴や見方を紹介します。
【チェックポイント】
✓ 改善点の優先度を確認したか
✓ 指摘された技術課題を理解できたか
✓ 改善後の再計測で効果を比較したか
パフォーマンス
パフォーマンスは、ページの読み込み速度や操作性に関連する主要指標を評価する項目です。具体的には、以下の指標が含まれます。
- FCP
- LCP
- CLS
- TBT（Total Blocking Time：総ブロック時間）
- Speed Index（ページのコンテンツが取り込まれて表示される速さ）
パフォーマンススコアは、Lighthouseの計算ロジックに基づき、これら指標スコアの加重平均で算出されます。指標ごとにユーザー体験への影響度に応じた重みが設定されており、特にLCP・TBT・CLSがスコアに大きく影響します。
各指標は、以下の色付き記号と数値で可視化されるため、直感的に改善すべき指標の把握が可能です。
- 丸緑（90～100）
- 四角オレンジ（50～89）
- 三角赤（0～49）
また、以下のようなツリーマップのチェックも可能です。ツリーマップは、JavaScriptやCSSなどリソースごとの容量や影響度を視覚的に示した図です。
パフォーマンスに負荷をかけているファイルがひと目で把握でき、不要なリソース削減や最適化箇所の特定に役立ちます。
さらにスクロールすると、以下のようにInsights・診断・合格した監査の3項目が各指標ごとに表示されます。
Insightsと診断の各項目をクリックすると、以下のようにリスクや影響を受ける指標、改善が必要な個所、改善するメリットの確認が可能です。
改善内容が具体的かつわかりやすく提示されるため、サイト運用のノウハウがない企業でも確実に改善できます。また、改善済みの項目も確認できるため、進捗管理や継続的な品質向上にも有効です。
ユーザー補助
ユーザー補助は、視覚・聴覚・身体機能などに制約のあるユーザーを含む、すべてのユーザーにとって使いやすいWebサイトかどうかを評価する項目です。
ユーザー補助監査の重み付け平均で評価され、監査項目ごとにユーザーへの影響度に応じて重みが異なります。例えば、ドキュメントに<title>要素が含まれている場合は重み7、画像要素に重複する内容のalt属性が含まれていない場合は重み1です。
ユーザー補助もパフォーマンスと同様に、改善点や合格した監査などが表示されます。ユーザーにとって操作しやすいサイトへ改善する際に参考になります。
おすすめの方法
おすすめの方法では、Googleが推奨するWebのベストプラクティスに基づき、信頼性・安全性・技術的適正が評価されます。セキュリティや実装品質の観点から、ユーザー体験の向上を図るための指標です。
例えば、以下のようなチェック項目があります。
- 正しいアスペクト比で画像が表示されているか
- HTTPではなくHTTPSで配信されているか
- ページ読み込み時に位置情報などの過剰な許可が要求されていないか
これらはUXやSEOには直接反映されにくいものの、サイトの信頼性を高めるうえで重要です。
なお、分析項目はユーザー補助などほかの項目と同様です。
SEO
PageSpeed Insightsでは、基本的なSEOのチェックも可能です。SEOの評価は、Googleの高度なWebサイト測定ツールであるLighthouseに基づいており、Webサイトが検索エンジンに正しく認識される構造かどうかを確認できます。
代表的なチェック項目は、以下のとおりです。
- <meta description>が設定されているか
- リンクに適切なrel属性が使われているか
- ページがモバイルフレンドリーかどうか
PSIのSEOには、コンテンツの質や被リンク数など検索順位に大きく影響する要素は含まれていません。あくまでも、SEOに関係する技術的な土台が整備されているかを確認するための項目です。
なお、分析項目はユーザー補助などほかの項目と変わりません。
PageSpeed Insightsの改善の実践手順
PageSpeed Insightsで問題点を把握したあとは、具体的な改善アクションに移ります。本章では、各評価項目における改善手順を紹介します。
改善の優先順位の決め方
PageSpeed Insightsで表示される改善施策は多数あるため、提案内容の実行前に優先順位を決めて進めることで効率良く改善できます。
改善施策の優先順位は、以下のように決めるとスムーズです。
- コアウェブバイタル（LCP・INP・CLS）に影響する項目：SEOに関係
- フィールドデータのオレンジや赤で表示されている指標：実ユーザーへの影響
- ラボデータで改善点として表示されている内容：技術的最適化で開発効率向上
特に最優先すべきであるコアウェブバイタルを改善するには、画像の最適化が効果的です。
多くのサイトでパフォーマンス低下の主な原因となっている未圧縮・過剰な高解像度画像を見直すことで、少ない労力で高い改善効果を得られます。
1.「実際のユーザーの環境で評価する」の改善方法
まずは、「実際のユーザーの環境で評価する」で示される各指標を改善する具体的な方法について解説します。
Largest Contentful Paint（LCP）
▼改善方法
- 画像・動画の最適化：圧縮、適切なフォーマットへの変換、WebPやAVIFなどの軽量フォーマットの活用
- Lazy Loadの設定：ファーストビュー以外の画像を遅延読み込み
- ヒーロー画像の事前読み込み：<link rel="preload">で主要画像を先読み
LCPの数値が悪化するのは、主要コンテンツの表示遅延が主な原因です。画像や動画の改善が特に重要です。
Interaction to Next Paint （INP）
▼改善方法
- 不要なJavaScriptの削除・遅延読み込み：使用していないライブラリやスクリプトを削除
- ユーザー操作に反応するイベントの最適化：イベントハンドラーの処理時間を短縮
- 広告などの第三者スクリプトの最小化：読み込みタイミングの見直しや非同期化
INPの数値が悪化している場合、ユーザー操作後の画面反応が遅くなります。主な原因はJavaScriptの処理負荷の高さであるため、スクリプトの最適化が必要です。
Cumulative Layout Shift （CLS）
▼改善方法
- 画像・広告枠などに明示的なサイズ指定：<img>や広告枠にwidthとheightの指定
- 動的コンテンツの位置確保（スペース予約）：ローディング中のバナーやポップアップの表示領域を事前に確保
- アニメーションはtransformやopacityを使用：レイアウト再計算を伴うtopやleftの利用回避
CLSが高い場合は、意図しないレイアウトシフトを防ぐための対策が必要です。
First Contentful Paint （FCP）
▼改善方法
- 使用していないCSSやJavaScriptの削除：不要なコードは削除・分割
- キャッシュの活用：ブラウザキャッシュの適切な設定
- CDNの使用：静的ファイルを地理的に近いサーバーから配信
FCPの数値悪化は、サイトの初回表示速度に影響する画像・動画・ソースコードの肥大化や最適化不足が主な要因です。これらの改善によって、ユーザーが最初に画面上でコンテンツを確認できるまでの時間を短縮できます。
Time to First Byte （TTFB）
▼改善方法
- 高速なホスティング環境の選定：低速な共有サーバーから、専用サーバーや高性能なクラウドホスティングへの移行
- サーバーやデータベースの最適化：データベースクエリの見直し、無駄なプラグインや処理の削減、バックエンドアプリのチューニング
- 不要なリダイレクトの削除：URL設計を整理し、1回で表示されるように調整
TTFBはサーバー側の処理速度やインフラ性能に強く依存するため、運営者側での環境改善やバックエンドの最適化が重要です。
2.「パフォーマンスの問題を診断する」の改善方法
続いて、「パフォーマンスの問題を診断する」で示される各指標の改善方法について解説します。PSIが提案する改善方法とあわせて参考にしてください。
パフォーマンス
▼改善方法
- 画像圧縮と形式最適化
- 不要なJavaScript/CSSの削除
- レンダリングブロックの排除
- AMP導入（モバイル向け）
パフォーマンスを改善すると、ページ全体の表示速度を底上げし、ユーザー体験の向上やSEO効果につながります。
ユーザー補助
▼改善方法
- ボタンやリンクにラベルや代替テキストを明記
- 色のコントラスト比を十分に確保
- キーボード操作やスクリーンリーダーに対応
- フォーム要素にラベルを明示
ユーザー補助を改善する際は、まずボタン・リンク・フォームなど主要な操作部分から改善し、影響が大きい項目を優先することで、アクセシビリティを効率良く向上できます。
おすすめの方法
▼改善方法
- セキュリティ面でのHTTPS利用の徹底
- モバイル対応のレスポンシブデザイン
- 最新のHTML/CSS仕様への準拠
- 外部スクリプトの最小化・統一
おすすめの方法を改善することで、サイトの信頼性や安全性、技術的品質が向上し、ユーザー体験の強化や長期的な運用安定につながります。
SEO
▼改善方法
- ページタイトル・メタディスクリプションの最適化
- 構造化データの実装
- モバイルフレンドリーなデザイン
- ページ読み込み速度の高速化
本格的なSEOを実施していない企業は、まずはPSIのSEOを参考に基本的な改善から取り組むのがおすすめです。
改善効果の測定方法
表示速度は一度チェックして終わりではなく、定期的に改善効果を測定しましょう。コンテンツの更新や機能追加、デザイン変更などのタイミングでパフォーマンスが低下することもあるためです。
また、モバイル・デスクトップ両方の環境でチェックし、実際のユーザー体験に基づいた改善効果を確認することも大切です。
PageSpeed Insights使用時の注意点
PageSpeed Insightsは使い方を誤ると、表示速度やユーザー体験において逆効果となる恐れもあります。本章では、使用上の注意点を紹介します。
スコアばかりにこだわりすぎない
PageSpeed InsightsのスコアはあくまでWebサイトの改善指標のひとつであり、スコア100点＝完璧なUXではありません。表示速度のスコアが良好でもユーザーがストレスを感じている場合や、コンバージョン率が上がらないケースもあります。
大切なのは、実際のユーザー体験や、直帰率・滞在時間・コンバージョン率などのビジネス成果を参考にしつつ改善することです。PSIのほかに、Google Analyticsやヒートマップツールと併用し、実際のユーザー行動データと照らし合わせながらスコアを見直しましょう。
本来の目的であるUX・コンバージョン向上に対して、スコア改善が効果的かをチェックすることが大切です。
モバイルとデスクトップの結果は分けて確認
PageSpeed Insightsは、モバイルとデスクトップで別々のスコアが表示されます。
モバイル環境は通信速度や処理能力が制限されているため、多くのケースでデスクトップのスコアよりも低くなります。デスクトップの結果が良好でもモバイルでは改善が必要なこともあるため、それぞれのスコアを確認しましょう。
モバイルスコアが特に低い場合は、画像サイズやスクリプトの軽量化、レスポンシブデザインの調整を優先的に見直すことが効果的です。
PageSpeed Insightsのスコア改善は画像・動画最適化プラットフォーム「Imgix」がおすすめ
出典：Imgix
PageSpeed Insightsのスコアを大きく左右する要素が、画像と動画の最適化です。特にLCPやSpeed Indexにおいては、高解像度画像や大容量メディアの読み込み遅延がパフォーマンスを著しく低下させます。
そこでおすすめなのが、画像・動画最適化プラットフォーム「Imgix」の導入です。
Imgixは、Webサイト上の画像や動画を自動で最適化・変換・配信できます。主な特徴は、以下のとおりです。
- WebPなど軽量フォーマットへの自動変換機能
- レスポンシブ対応の動的リサイズ
- グローバルCDNによる高速配信
これらの機能により、PSIのスコア改善が大幅に期待できるだけでなく、ユーザー体験全体の質を底上げできます。
特に画像や動画を多用するECサイトやニュースサイトにおいて、即効性のある改善手段となり得ます。
まとめ PageSpeed Insightsの使い方をマスターしてWebサイトを改善しよう
PageSpeed Insights（PSI）は、Webサイトの表示速度やユーザー体験の課題可視化・改善に役立つWebサイトの分析ツールです。WebサイトのURLを入力するだけで分析できるため、幅広いユーザーから支持を集めています。
PSIのスコア向上には、画像や動画の最適化が特に重要とされています。
そこでおすすめなのが、画像・動画最適化プラットフォーム「Imgix」です。Imgixは、画像を自動で圧縮・変換し、CDNを通じてユーザーに最適な状態で高速配信が可能な画像・動画最適化プラットフォームです。PSIのスコア向上に直結する表示速度・UXの改善だけでなく、運用負担の軽減やCV率の向上による収益最大化も期待できます。
PSIとImgixを組み合わせることで、ユーザーが使いやすいWebサイトをより確実に実現できます。
画像最適化に関するご相談は、Imgixまでお気軽にお問い合わせください。
