表示速度の計測方法｜PageSpeed Insights・GTmetrixの読み方

はじめに

表示速度の改善を始めるには、まず「現状を正確に把握する」ことが必要です。主要な計測ツールとして「PageSpeed Insights」と「GTmetrix」が広く使われているが、それぞれ特性が異なり、レポートの見方にもコツがあります。

本記事では、PageSpeed InsightsとGTmetrixの使い方・レポートの読み方・使い分けを解説します。

PageSpeed Insights

概要

PageSpeed Insights（PSI）はGoogleが提供する無料のWebページ速度診断ツールです。URLを入力するだけで、モバイル・デスクトップのパフォーマンススコアと改善提案が表示されます。

アクセス先：pagespeed.web.dev

レポートの構成

Field Data（フィールドデータ）

ページ上部に表示される実際のユーザーのブラウザから収集されたデータです（CrUX: Chrome User Experienceレポートを使用）。過去28日間のデータの集計で、LCP・INP・CLSの実測値が「良好・要改善・不良」で表示されます。

トラフィックが少ないページはField Dataが不十分で表示されないことがあります。

Lab Data（ラボデータ）

Lighthouseで計測したシミュレーションデータです。FCP・LCP・TBT・CLS・SI・TTIの各指標がスコアとともに表示されます。

Opportunities（改善の機会）

実施すれば改善が見込まれる具体的な施策と、推定改善効果が表示されます。

Diagnostics（診断）

パフォーマンスに影響する可能性がある問題の詳細情報。

重要指標の見方

Performanceスコア（0〜100）

90以上が「良好」。70未満は要対応。まず「モバイルスコア」を重視します。

LCP（Largest Contentful Paint）

「○秒」という数値で表示されます。緑（2.5秒以下）を目指します。

TBT（Total Blocking Time）

メインスレッドをブロックするJavaScriptの合計時間。200ミリ秒以下を目標とします。

CLS（Cumulative Layout Shift）

スコアが「0.1以下」なら良好。特にモバイルでの値に注意します。

GTmetrix

概要

GTmetrixはカナダのGT.net社が提供する無料（有料プランあり）の速度計測ツールです。PageSpeed InsightsよりUI・詳細さ・視覚的なウォーターフォールが優れており、発注担当者への説明・詳細なデバッグに向いています。

アクセス先：gtmetrix.com

GTmetrixの主な特徴

ウォーターフォールチャート

ページを構成する各リソース（HTML・CSS・JavaScript・画像等）がどの順序で・どのくらいの時間をかけて読み込まれるかを視覚的に表示します。ボトルネックの特定に非常に有用です。

視覚的なページ読み込みの録画

ページが読み込まれる過程を時系列で視覚化（スクリーンショットの連続）し、どのタイミングでどのコンテンツが表示されるかを確認できます。

計測地点の選択

日本・アメリカ・ヨーロッパ等の複数のサーバー拠点から計測できます。日本からの計測は、日本のユーザーが体験する実際の速度を把握するのに重要です（無料プランでは一部の地点のみ利用可能）。

比較計測

改善前後のURLを比較するレポートを生成できます。

GTmetrixスコアの読み方

GTmetrix Grade（A〜F）

GTmetrix独自のグレードで、PageSpeed Insightsのスコアとは異なる基準。A（90〜100%）が最良。

Performance

LighthouseのPerformanceスコアに相当します。

Structure

GTmetrixが独自に評価するベストプラクティスへの準拠度。

Web Vitals

LCP・INP・CLSのCore Web Vitals指標。

ウォーターフォールの読み方

ウォーターフォールは横軸が時間、縦軸が各リソースを表す。各リソースのバーは以下を示す。

• 青（DNS Lookup）：DNSの名前解決時間

• 緑（Connect・SSL）：TCPコネクション・SSL/TLS確立時間

• 紫（Waiting）：サーバーが応答するまでの時間（TTFB）

• オレンジ（Receiving）：データのダウンロード時間

ボトルネックの特定方法

• 特に長い「Waiting（紫）」のリソースがある → サーバー応答が遅い

• 大きなサイズのリソースがある → 画像・CSS・JSの最適化が必要

• 多数のサードパーティリソースがある → 外部スクリプトの見直しが必要

PageSpeed InsightsとGTmetrixの使い分け

その他の有用な計測ツール

WebPageTest（webpagetest.org）

最も詳細な計測ができる高度なツール。複数のブラウザ・地点・接続速度で計測でき、ウォーターフォール・動画・詳細なタイムラインが取得できます。SEOやパフォーマンス専門家が好んで使用します。

Chrome DevTools（ブラウザ内蔵）

Performance タブ：ページ読み込みと操作のタイムライン記録・FlameCha​rt形式のJavaScript実行分析

Network タブ：各リソースの読み込み時間・サイズのリアルタイム確認・通信速度のスロットル設定

Lighthouse タブ：Lighthouseの計測（前記事参照）

Google Search Console（Core Web Vitalsレポート）

実際のユーザーのField Dataを確認できます。SEOランキングに影響する実測値のモニタリングに必須。

計測の際の注意事項

キャッシュをクリアしてから計測する

ブラウザキャッシュがある状態での計測は「2回目以降の訪問」をシミュレートするため、「初回訪問」の速度より速くなります。初回訪問の体験を正確に測定するためには、キャッシュをクリアしてから計測します。

複数回計測して平均を取る

通信状況の一時的な変動・サーバーの処理量の変動により、同じページでも計測のたびにスコアが変動することがあります。3〜5回計測した平均を取ることで、より安定した評価ができます。

本番環境で計測する

開発環境・ステージング環境ではCDN・キャッシュ・最適化設定が本番と異なる場合があります。本番URLで計測することが重要です。

まとめ

表示速度の計測には「PageSpeed Insights（Field DataとSEOへの影響の確認）」と「GTmetrix（ウォーターフォールを使った詳細なデバッグ）」を目的に応じて使い分けることが有効です。

計測した数値を記録し、改善前後を比較することで「どの施策がどのくらい効果があったか」を客観的に評価できる体制を整えることが重要です。

次の記事では、Core Web VitalsのうちSEOへの影響が最も大きいLCPを改善するための具体的な方法を解説します。