ウェブサイトの表示速度は、もはや「あれば良い」という機能ではありません。

現在では、ユーザー体験と検索エンジン最適化（SEO）において欠かせない要素となっています。

このガイドでは、Googleが無料で提供するPageSpeed Insightsの使い方から、実際の表示速度改善まで、現場で本当に使える情報を詳しく解説します。

PageSpeed Insightsとは？

PageSpeed Insights（ページスピードインサイト）は、Googleが提供する無料のウェブサイト表示速度分析ツールです。

URLを入力するだけで、あなたのサイトがどの程度速く表示されるかを0～100点のスコアで評価してくれます。

このツールの特徴は、単に数値を示すだけでなく、具体的な改善点まで提案してくれることです。技術的な知識がなくても、どこをどう改善すれば良いかが分かりやすく表示されるんですね。

PageSpeed Insightsの特徴とできること

PageSpeed Insightsでできることをまとめると下記です。

• google独自の計測指標で計測
• 各指標は良好、改善、不良といった3段階で評価してくれる
• 各指標の具体的な改善ポイントも表示してくれる
• 実際のユーザーデータ（フィールドデータ）の数値が確認できる
• 検証環境データ（ラボデータ）の数値も確認できる
• PCとモバイル別での計測ができる

PageSpeed Insightsで計測できる指標

Googleが提供する無料のWebページパフォーマンス測定ツールです。

計測できる主な指標は、Core Web VitalsのLCP（最大コンテンツ表示時間）、INP（操作応答性）、CLS（レイアウト安定性）に加え、FCP（初回コンテンツ表示）、TTFB（サーバー応答時間）、Speed Index（表示速度）、TBT（メインスレッド占有時間）など。

これらの指標で0〜100点評価し、具体的な改善提案を提示します。

PageSpeed Insightsで評価と改善ポイントの開示

各指標は良好、改善、不良といった3段階でその時点での状態を評価してくれます。

それだけでなく、具体的な改善ポイントを自動表示します。

例えば、画像の最適化とサイズ圧縮、CSS・JavaScriptの圧縮と不要コードの削除、ブラウザキャッシュの有効化、サーバー応答時間の短縮、レンダリングを妨げるリソースの排除など、実装可能な改善策を優先度付きで提案。

改善により期待できる秒数やスコア向上も表示され、効率的なサイト高速化とユーザー体験改善を実現します。

実際のユーザーデータと検証環境データの数値が確認できる

Googleが提供する無料のWebページパフォーマンス測定ツールで、2種類のデータを確認できる点が大きな特徴です。

実際のユーザーデータ（フィールドデータ）は、Chrome UX Reportから収集した過去28日間の実ユーザーの体験値を反映し、LCP、INP、CLS、FCP、TTFBなどの実測値を表示します。

一方、検証環境データ（ラボデータ）は、Lighthouseによる再現可能な制御された環境下での測定値を提供し、詳細な診断と改善提案を行います。

この2つのデータを比較することで、実際のユーザー体験と技術的な問題点の両面から分析でき、より効果的なサイト改善が可能になります。

PCとモバイル別での計測ができる

Googleが提供する無料のWebページパフォーマンス測定ツールで、PCとモバイルの両デバイスで別々に計測できることが大きな特徴です。

測定画面で「モバイル」「デスクトップ」を切り替えることで、それぞれの環境に最適化された評価が可能です。

モバイルはMoto G4相当の端末と低速回線を想定した厳しい条件で測定され、デスクトップは高速環境で評価されます。

各デバイスで0〜100点のスコア、LCP・INP・CLSなどのCore Web Vitals指標、具体的な改善提案が表示されます。

デバイスごとにパフォーマンスが大きく異なるため、両方で最適化することでユーザー体験を向上できます。

PageSpeed Insights（実際のユーザーの環境で評価する）の指標と見方

PageSpeed Insightsに記載されている「実際のユーザーの環境で評価する」に表示されている項目は、フィールドデータ（Chrome UX Report）と呼ばれる機能です。

これは過去28日間に実際にサイトを訪問したChromeユーザーの体験データを集計し、リアルな環境での読み込み速度やCore Web Vitalsを測定します。

実際のネットワーク状況、デバイス性能、地域差を反映するため、ラボデータより信頼性が高く、SEO評価の基準となる重要な指標です。

また「ウェブに関する主な指標」は、Core Web Vitalsと呼ばれるGoogleが定める重要な3つの指標です。

下記で詳しく解説していきます。

LCP (Largest Contentful Paint)の指標の要素

LCP（Largest Contentful Paint）は、Core Web Vitalsの中でも特に重要な指標で、主にページの読み込み速度を測定する指標です。

Largest Contentful Paint (LCP)の読み込み速度の測定対象の要素は下記の項目になります。

LCP（Largest Contentful Paint）の測定対象の要素

• <img>要素（画像要素）
• <svg>内の<image>要素（画像要素）
• <video>要素（動画要素）
• url()関数で指定された背景画像（CSS背景画像）
• ブロックレベル要素内のテキスト（テキスト要素）

LCP（Largest Contentful Paint）の測定対象要素は以下の4カテゴリに分類されます。

1. 画像要素: <img>タグ（JPEG、PNG、GIF、WebP等）、<svg>内の<image>要素が対象です。

2. 動画要素: <video>タグのポスター画像や最初のフレームが測定されます。

3. CSS背景画像: background-image: url()で指定された背景画像（グラデーションは除外）。

4. テキスト要素: <h1>〜<h6>、<p>、<div>等のブロックレベル要素内のテキストコンテンツ。

測定はビューポート内で最大サイズの要素が対象となり、<span>等のインライン要素、display: noneの非表示要素、スクロールが必要な画面外要素は除外されます。

このような要素でファーストビューの表示速度を計測された数値がLargest Contentful Paint (LCP)の見方となります。

ビューポート内に表示される最大のコンテンツ要素の表示時間を測定し、その表示までの時間を計測し評価されます。

LCP（Largest Contentful Paint）の色分けによる評価の見方

LCPグラフの秒数については2.5秒以下なら良好、2.5〜4.0秒は改善必要、4.0秒超過は不良と評価されます。

実際のユーザーの75%がこの時間内でメインコンテンツを見ることができ、SEO評価の基準となります。

INP(Interaction to Next Paint)の指標の要素

INP(Interaction to Next Paint)は、Core Web Vitalsの新指標となったユーザーインタラクションの応答性を測定する指標です。

ユーザーインタラクションは、クリック、タップ、キーボード入力などのユーザー操作のことで、次の画面更新までの時間を測定し、200ミリ秒以下が良好とされます。

ページ滞在中の全インタラクションが対象で、実際のユーザー体験をより包括的に評価します。

下記がINP(Interaction to Next Paint)の測定対象になる要素となります。

INP(Interaction to Next Paint)の測定対象の要素

• クリック操作（マウス・ポインター操作）
• タッチ操作（タッチ・スクリーン操作）
• キー操作（キーボード操作）
• 対象となるキーボード操作（キーボード操作）

主な測定対象は3つのカテゴリに分類されます。

マウス・ポインター操作では、pointerdown、pointerup、click、mousedown、mouseupイベントによるクリックやタップ操作。

キーボード操作では、keydown、keypress、keyupイベントによる文字入力やファンクションキー操作。

タッチスクリーン操作では、touchstart、touchendイベントによるタッチ操作が含まれます。

一方、mouseover、scroll、resizeなどの間接的な操作は測定対象外で、INPは関連する複数のイベントを論理的にグループ化し、最も処理時間の長いイベントをその操作の代表値として75パーセンタイルで評価します。

INP(Interaction to Next Paint)の色分けによる評価の見方

INP（Interaction to Next Paint）の色分け評価は3段階に分類されます。

緑色（良好）は200ミリ秒以下で、ユーザー操作に即座に反応する優秀な状態。

オレンジ色（改善必要）は200〜500ミリ秒で、使用可能だが最適化により向上できるレベル。

赤色（不良）は500ミリ秒超過で、明らかな遅延によりユーザー体験に悪影響を与える状態です。

CLS（Cumulative Layout Shift）の指標の要素

CLS（Cumulative Layout Shift）は、Core Web Vitalsの視覚的安定性を測定する指標です。

ページ読み込み中に発生する予期しないレイアウト移動の累積値を計算し、0.1以下が良好、0.1〜0.25が改善必要、0.25超過が不良と評価されます。

画像やフォントの遅延読み込み、動的コンテンツ挿入により発生し、ユーザーの誤操作や読書体験の妨げとなります。

CLS（Cumulative Layout Shift）の測定対象の要素

• サイズ未指定の画像（画像・メディア要素）
• 動画・埋め込みコンテンツ（画像・メディア要素）
• Webフォント読み込み（フォント関連要素）
• テキストレンダリング（フォント関連要素）
• 広告・マーケティング要素（動的コンテンツ要素）
• UI・ナビゲーション要素（動的コンテンツ要素）
• 非同期読み込みコンテンツ（動的コンテンツ要素）
• インタラクティブ要素（CSS関連要素）
• スタイルシート読み込み（CSS関連要素）
• 動的スタイル変更（CSS関連要素）

主な測定対象は4つのカテゴリに分類されます。画像・メディア要素では、width/height属性未指定の<img>タグ、YouTube埋め込み、iframe要素などのサイズ可変コンテンツ。

フォント関連要素では、Webフォント読み込み時のFOUT（Flash of Unstyled Text）やカスタムフォントによる文字領域変化。

動的コンテンツ要素では、Google AdSense広告、Cookie同意バナー、ポップアップ、Ajax読み込みコンテンツ。

CSS関連要素では、外部スタイルシートの遅延適用やメディアクエリによる表示切り替えが含まれます。

測定除外要素は、ユーザー操作から500ms以内の変化、CSS transformによる移動、スクロール操作です。

CLSは影響係数と距離係数の積で計算され、ページライフサイクル全体の累積値で評価されます。

CLS（Cumulative Layout Shift）の色分けによる評価の見方

CLS（Cumulative Layout Shift）の色分け評価は、視覚的安定性を3段階で表示します。

緑色（良好）は0.1以下で、レイアウト移動がほとんどなく快適な閲覧が可能。

オレンジ色（改善必要）は0.1〜0.25で、軽微な移動があり最適化により改善可能。

赤色（不良）は0.25超過で、頻繁な大きなレイアウト移動により誤操作やストレスが発生します。

FCP(First Contentful Paint )の指標の要素

FCP（First Contentful Paint）は、ページ読み込み開始から最初のコンテンツが表示されるまでの時間を測定するパフォーマンス指標です。

テキスト、画像、SVG、Canvas要素など視覚的に認識可能な最初の要素の表示時間を計測し、1.8秒以下が良好、3.0秒超過が不良と評価されます。

ユーザーが「ページが読み込まれた」と感じる最初の瞬間を示し、体感速度の向上とユーザー体験改善に重要な役割を果たします。

下記がFirst Contentful Paint (FCP)の測定対象になる要素となります。

FCP(First Contentful Paint )の測定対象の要素

• テキスト要素
• 画像要素
• SVG要素
• Canvas要素

FCP（First Contentful Paint）の測定対象要素は、ページで最初に視覚的に認識可能なコンテンツです。

テキスト要素（見出し、段落、リンク等のあらゆる文字）、画像要素（<img>タグ、CSS背景画像）、SVG要素（インラインSVG、アイコン）、非白色のCanvas要素（Chart.js等の描画コンテンツ）が対象となります。

白色Canvas、透明要素、非表示要素は除外され、最初に表示されたコンテンツの時刻が測定されます。

これらの要素を計算して最初のコンテンツが表示されるまでの時間を計測した指標となります。

FCP（First Contentful Paint）の色分けによる評価の見方

FCP（First Contentful Paint）の色分け評価は、初期表示速度を時間ベースで3段階に分類します。

緑色（良好）は1.8秒以下で、ユーザーが「ページが読み込まれた」と即座に認識できる優秀な初期表示速度です。

ストレスなく快適な閲覧開始が可能で、高い継続率が期待できます。

オレンジ色（改善必要）は1.8〜3.0秒で、やや遅いが許容範囲内の状態。最適化により大幅改善が可能で、若干の待機時間により離脱リスクが増加傾向にあります。

赤色（不良）は3.0秒超過で、明らかに遅い表示速度により緊急改善が必要です。

長い待機時間により高い離脱率とユーザー満足度低下を招きます。

評価は75パーセンタイル値で決定され、実際のユーザー体験を反映します。1.8秒以下の緑色領域を目指し、初期表示速度最適化によるユーザー体験向上が重要です。

TTFB(Time to First Byte )の指標の要素

TTFB（Time to First Byte）は、ブラウザがサーバーにリクエストを送信してから最初の1バイトを受信するまでの時間を測定する指標です。

800ミリ秒以下が良好とされ、サーバーパフォーマンスとネットワーク品質を直接反映する重要な基盤指標として、他の全パフォーマンス指標に影響を与えます。

TTFB（Time to First Byte）の測定対象の要素

• DNS関連の時間要素
• TCP関連の時間要素
• SSL/TLS関連の時間要素
• サーバー処理時間
• ネットワーク遅延

TTFB（Time to First Byte）の測定対象要素は5つの主要構成要素で構成されます。

DNS解決時間（ドメイン名からIPアドレスへの変換）、TCP接続確立時間（3-wayハンドシェイク）、SSL/TLSハンドシェイク時間（HTTPS接続時の暗号化確立）、サーバー処理時間（リクエスト解析・アプリケーション実行・レスポンス生成）、ネットワーク遅延（物理的距離・回線品質による遅延）です。

これらの累積時間がTTFBとして測定され、800ミリ秒以下が良好とされます。

TTFB（Time to First Byte）の色分けによる評価の見方

TTFB（Time to First Byte）の色分け評価は、サーバー応答速度を3段階で表示します。

緑色（良好）は0.8秒以下で、優秀なサーバー応答により即座にデータ送信が開始され、快適なページ読み込みが可能です。

オレンジ色（改善必要）は0.8〜1.8秒で、やや遅い応答時間により最適化が推奨されます。

赤色（不良）は1.8秒超過で、深刻なサーバー遅延により緊急改善が必要です。

TTFBは全パフォーマンス指標の基盤となる重要な指標です。

パフォーマンスの問題を診断するで追加される指標

「実際のユーザーの環境で評価する」で表示されていた項目とは別に「パフォーマンスの問題」の項目では、Total Blocking Time(TBT)とSpeed Indexという2つの指標が追加されています。

下記で詳しく説明していきます。

Total Blocking Time(TBT)の指標の要素

TBT（Total Blocking Time）は、ユーザーのクリックやタップなどの操作への応答がブロックされている時間の合計を示す指標です。

初回コンテンツ表示後から操作可能になるまでの間に発生する無反応時間を測定し、200ms以下が良好、600ms以上が不良とされます。

TBT（Total Blocking Time）の測定対象の要素

• JavaScriptの実行処理
• DOM操作
• CSS処理
• 画像・メディア処理
• ネットワーク関連の処理

TBT（Total Blocking Time）は、FCP（初回コンテンツ表示）からTTI（操作可能時間）までの期間中に、メインスレッドで50ミリ秒を超えて実行されるロングタスクを測定対象とします。

具体的には、JavaScript の解析・実行処理、DOM操作、レンダリング処理（レイアウト計算・ペイント）、CSS処理、画像デコード、外部ライブラリや第三者スクリプトの初期化などが含まれます。

計算式は「各ロングタスクの実行時間-50ミリ秒」の合計で、50ミリ秒以下のタスクは測定対象外となります。主にJavaScriptの処理が大きな要因となる指標です。

TBT（Total Blocking Time）の色分けによる評価の見方

TBT（Total Blocking Time）は、Lighthouseで3色に分けて評価されます。

緑色は200ms以下（モバイル）または150ms以下（デスクトップ）で良好な状態を示し、ユーザーの操作に即座に反応します。

オレンジ色は200-600ms（モバイル）または150-350ms（デスクトップ）で改善が必要な状態です。

赤色は600ms以上（モバイル）または350ms以上（デスクトップ）で不良状態を示し、ユーザーが明らかな遅延を感じるため緊急改善が必要です。

色が緑に近いほど優秀なパフォーマンスを意味します。

Speed Indexの指標の要素

Speed Indexは、ページの視覚的な表示進捗を測定する指標です。

具体的には、画面内の全コンテンツ(画像、テキスト、UI要素など)が段階的に表示されていく過程を数値化します。

単純な「表示完了時間」だけでなく、表示途中の各フレームにおける視覚的完成度を継続的に評価します。

これにより、ユーザーが体感する読み込みスピード感を正確に反映できます。

SI（Speed Index）の測定対象の要素

Speed Indexは、ビューポート(画面の表示領域)内の全コンテンツを測定対象とします。

具体的には、下記のようにテキスト、画像、ボタン、背景などの視覚的要素すべてが含まれます。

• テキスト要素
• 画像
• 背景画像
• 動画
• ボタン
• アイコン
• フォーム要素
• ナビゲーションメニュー

測定は時間ごとの表示面積の割合を追跡し、非表示面積が減少していく過程を数値化します。

測定範囲の条件

Speed Indexはビューポート(viewport)内、つまりユーザーがスクロールせずに見える画面領域のみを測定対象とします。

具体的には、PCやスマートフォンの初期表示画面(ファーストビュー)に存在する視覚的要素が評価されます。

条件をまとめると下記のようになります。

• ビューポート内のみ
• 視覚的に認識可能な要素
• スクロールなしで見える範囲

画面外のコンテンツは対象外で、ユーザーが実際に見える範囲のみが評価されます。

計測はページ読み込み開始から完全表示まで継続的に行われます。

SI（Speed Index）の色分けによる評価の見方

Speed Indexは色分けで視覚的に評価されます。

緑(良好)はユーザー体験が優れた状態、オレンジ(改善が必要)は最適化の余地がある状態、赤(不良)は早急な改善が必要な状態を示します。

モバイルとデスクトップで基準値が異なり、モバイルの方が厳しい判定となります。

PageSpeed InsightsやLighthouseで測定結果が色付きで表示され、改善の優先度が一目で判断できます。

PageSpeed InsightsとLighthouseの違い

PageSpeed InsightsとLighthouseの違いについて、まずは表で解説していきます。

PageSpeed InsightsとLighthouseは、どちらもGoogleが提供するWebパフォーマンス診断ツールですが、用途が異なります。

PageSpeed Insightsは、Googleサーバー上で実行され、実際のユーザーデータ（フィールドデータ）と検証環境データ（ラボデータ）の両方を提供し、パフォーマンスに特化した安定的な測定が可能です。

一方、Lighthouseはローカル環境で動作するChrome拡張機能で、パフォーマンスに加えSEO、アクセシビリティ、ベストプラクティス、PWAの5つのカテゴリを包括的に診断します。

パフォーマンス測定のみならPageSpeed Insightsが誤差が少なく推奨され、詳細な技術監査やアクセス制限のあるページの診断にはLighthouseが適しています

PageSpeed InsightsとLighthouseは計測の環境が違う

PageSpeed InsightsとLighthouseは、実行される計測環境が大きく異なります。

PageSpeed InsightsはGoogleが用意したサーバー上で実行されるWebサービスで、統一された環境で測定が行われるため、結果が安定しており誤差が少ないのが特徴です。

一方、LighthouseはユーザーのローカルPC環境（クライアント側）で実行されるChrome拡張機能またはDevToolsです。

そのため、使用しているPCのスペック、ネットワーク回線速度、ブラウザの状態などの影響を受けやすく、測定のたびに結果が変動する可能性があります。

この環境の違いにより、同じページでも両ツールでスコアが異なることがあります。

安定した測定を求める場合はPageSpeed Insightsが、自社の開発環境で詳細に診断したい場合はLighthouseが適しています。

PageSpeed InsightsとLighthouseの使い分け

PageSpeed InsightsとLighthouseは目的に応じて使い分けることが重要です。

PageSpeed Insightsは、Webサイトの表示速度改善に特化したい場合に最適です。

Googleサーバー上で実行されるため測定結果が安定しており、実際のユーザーデータ(フィールドデータ)も確認できるため、現実的なパフォーマンス評価が可能です。

URLを入力するだけで簡単に測定でき、日本語対応も完全です。

一方、Lighthouseは総合的なWebサイト品質診断が必要な場合に推奨されます。

パフォーマンスだけでなく、SEO、アクセシビリティ、セキュリティ、PWA対応など5つの観点から詳細な技術監査を実施します。

また、アクセス制限のあるページやローカル開発環境でのテストにも対応可能です。速度測定のみならPageSpeed Insights、包括的な品質改善ならLighthouseを選択しましょう。

PageSpeed Insightsの使い方

PageSpeed Insightsの使い方を解説していきます。

PageSpeed Insightsの測定方法と結果の確認方法

PageSpeed InsightsにアクセスしURLを入力し分析ボタンをクリックするだけで計測が行われます。

計測に1分前後ほど待つ場合がありますが、計測結果や改善点も詳しく表示されます。

スマホ・デスクトップの数値が見分けられる

計測されると下記の画像のような表示となり計測結果も表示されます。

ここでは、URL入力のすぐ下の部分（画像の赤で囲われている箇所）でスマホとデスクトップそれぞれの計測結果を別に見ることができます。

スマホとPCでは大きく差が生まれることが多く、スマホ・デスクトップ別にどこを修正したらいいか確認する際はこちらを見るようにしましょう。

実際のユーザーの環境での評価の見方

URL入力欄の少し下の部分に「実際にユーザー環境で計測する」という項目が出てきます。

実際にユーザー環境で計測された数値は下記画像の赤枠部分で確認することができます。

ポイントとして、ここで表示されているデータは「実際のユーザーの環境」での評価となります。

実際のユーザーの環境というのは、Chrome User Experience Report（CrUX）データに基づいており、以下の具体的な条件が加わり測定されています。

• wデバイスやブラウザ環境
• 回線速度や接続環境
• 地理条件

そのため「実際のユーザーの環境で計測されている数値」となり、ユーザー環境によっても変動することだけ理解しておくといいでしょう。

ここでは

• LCP：ページ内で最も大きなコンテンツが表示されるまでの時間
• INP：ユーザーの操作に対するページの応答速度
• CLS：ページ表示中のレイアウトの予期しない移動量
• FCP：ページ内で最初のコンテンツが表示されるまでの時間
• TTFB：サーバーが最初のデータを返すまでの時間

これらの数値の評価が確認できます。

パフォーマンスの問題を診断するの見方

更に下の方へスクロールすると、下記の画像のように「パフォーマンスの問題を診断する」という項目があります。

ここでは、パフォーマンス、ユーザー補助、おすすめの方法、SEOという項目に分けて改善方法が公開されます。

それぞれ詳しく解説していきます。

「パフォーマンス」の項目の見方について

パフォーマンスの項目は下記の画像のような項目が表示されています。

ここでは

• FCP：ページ内で最初のコンテンツが表示されるまでの時間
• LCP：ページ内で最も大きなコンテンツが表示されるまでの時間
• TBT：ページが操作不能な時間の合計
• CLS：ページ表示中のレイアウトの予期しない移動量
• SI：ページの可視部分が表示される平均速度

これらの数値の評価が確認できます。

「パフォーマンス」の項目に関しては、「FCP」「LCP」「TBT」「CLS」「SI」という５項目の指標の数値が見れます。

また「パフォーマンスの問題を計測する」セクションは、Lighthouseエンジンによるラボデータ（シミュレーション環境）で測定されているという点は押さえておきましょう。

具体的には、下記のような環境下で計測されている数値となります。

• CPUを4倍スローダウン
• ネットワークを4G LTE速度に制限
• モバイルは375×667px画面
• デスクトップは1920×1080px画面
• キャッシュなしの初回訪問の状態

実際のユーザー環境とは異なる理想的な実験室環境で、具体的な技術的問題の特定と改善提案に特化した診断結果となります。

インサイト・診断項目の見方

更にスクロールしていくと、下記の画像のようなINSIGHTS、診断という項目が出てきます。

ここでは、計測結果に応じた具体的な改善内容が確認できます。

上記画像の①では、各指標別の改善項目を絞り込むことができます。

②に関しては、具体的に改善余地のある項目が並びます。

更に右側にある③をクリックすると、更に詳しい改善箇所なども表示されます。

具体的な改善箇所を確認する場合は、インサイト・診断項目を確認して改善を進めましょう。

PageSpeed Insightsまとめ

表示速度の改善は、SEO評価向上、ユーザー離脱率の低減、コンバージョン率の増加に直結する重要な施策です。

最初から完璧を目指す必要はありません。

継続的な測定と改善の積み重ねが、ユーザーに愛されるWebサイトへと成長させます。

PageSpeed Insightsを活用して、より良いWebサイト作りに取り組んでいきましょう。