# 表示速度の計測方法｜PageSpeed Insights・GTmetrixの読み方 元のページ: サイト表示速度の改善方法｜Core Web Vitals対策ガイド 表示速度の計測方法としてPageSpeed InsightsとGTmetrixの読み方を解説します。スコアの構成・ウォーターフォールの読み方・2つのツールの使い分けをまとめています。 ## **はじめに** 表示速度の改善を始めるには、まず「現状を正確に把握する」ことが必要です。主要な計測ツールとして「PageSpeed Insights」と「GTmetrix」が広く使われているが、それぞれ特性が異なり、レポートの見方にもコツがあります。 本記事では、PageSpeed InsightsとGTmetrixの使い方・レポートの読み方・使い分けを解説します。 ## **PageSpeed Insights** ### **概要** PageSpeed Insights（PSI）はGoogleが提供する無料のWebページ速度診断ツールです。URLを入力するだけで、モバイル・デスクトップのパフォーマンススコアと改善提案が表示されます。 アクセス先：[pagespeed.web.dev](http://pagespeed.web.dev/) Webサイトの表示速度がUXやSEOに与える影響については「[**サイト表示速度とは（UXとSEOへの影響）**](https://chot-inc.com//knowledge/what-is-site-speed)」で詳しく解説しています。 ### **レポートの構成** #### **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](http://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の使い分け** | **用途** | **推奨ツール** | | - | - | | SEOに関連するField Dataの確認 | PageSpeed Insights | | 経営層・クライアントへの説明 | PageSpeed Insights（Googleのツールで信頼性が伝わる） | | ボトルネックの詳細デバッグ | GTmetrix（ウォーターフォールが詳細） | | 改善前後の比較 | GTmetrix（比較機能が充実） | | 特定地点からの速度確認 | GTmetrix（地点選択が可能） | | 定期的なモニタリング | 両方（Search Console + GTmetrixでの定点観測） | ## **その他の有用な計測ツール** ### **WebPageTest（**[**webpagetest.org**](http://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を改善するための具体的な方法を解説します。 ## エージェント型Web・AIアプリ 開発のご相談 chot inc.ではエージェント型Webの設計・構築・ 運用を 一貫してサポートしています。 [お問い合わせ](https://chot-inc.com/contact) ## このテーマの他の記事 - ### [サイト表示速度とは？なぜUXとSEOの両方に影響するのか](https://chot-inc.com/knowledge/what-is-site-speed) [サイト表示速度とは何か、なぜUXとSEOの両方に影響するのかを解説します。直帰率・CV率・Core Web Vitalsのランキング要因としての位置づけ・速度が遅くなる6つの原因をまとめています。](https://chot-inc.com/knowledge/what-is-site-speed) - ### [Core Web Vitalsとは？LCP・INP・CLSの意味と目標値](https://chot-inc.com/knowledge/core-web-vitals-explained) [Core Web VitalsのLCP・INP・CLSの意味と目標値を解説します。各指標の定義・良好・要改善・不良の基準・悪化する原因・Field DataとLab Dataの違いをまとめています。](https://chot-inc.com/knowledge/core-web-vitals-explained) - ### [Lighthouseの使い方｜スコアの見方と表示速度の改善手順](https://chot-inc.com/knowledge/lighthouse-guide) [LighthouseとはGoogleのパフォーマンス計測ツールです。PageSpeed Insights・Chrome DevTools・CLIの3つの起動方法・スコアの読み方・改善サイクルの回し方をまとめています。](https://chot-inc.com/knowledge/lighthouse-guide) [サイト表示速度の改善方法｜Core Web Vitals対策ガイド一覧](https://chot-inc.com/knowledge/themes/web-performance)