はじめに
本調査の目的
本調査は、Webサイトの表示速度を測定し、改善につなげるための方法とツールをわかりやすくまとめたものです。測定の手順や指標、実際のツール操作まで網羅し、実務で使える知識を提供します。
誰に向けた内容か
サイト運営者、開発者、デザイナー、マーケターなど速度改善に関心のある方を想定しています。専門用語は最小限にし、具体例で補足しますので初学者にも読みやすい構成です。
本書で扱う内容（概要）
- 第2章: 速度測定の重要性と基本概念 — なぜ速さが大切か、基本的な考え方
- 第3章: 主要な速度測定ツール — 特徴と使いどころ
- 第4章: 計測時の詳細指標 — よく使う指標と解釈のポイント
- 第5章: Chromeデベロッパーツールを使った測定 — 実践的な手順と確認ポイント
読み進め方のポイント
章を順に読むと理解が深まります。まずは第2章で基礎を押さえ、その後ツールや実測に進むことをおすすめします。
Webサイト速度測定の重要性と基本概念
なぜ速度が重要か
Webサイトの表示速度は、訪問者の体験と成果に直結します。ページが遅いと離脱が増え、問い合わせや購入などのコンバージョンが下がります。検索エンジンも速度を重視するため、表示が速いと検索順位の有利につながります。
基本的な指標（やさしく説明）
- TTFB（Time to First Byte）: サーバーが最初のデータを返すまでの時間。例えると料理の注文から最初の料理が出るまで。
- FCP（First Contentful Paint）: 最初に文字や画像が表示される時間。見出しが見えるまでの速さです。
- LCP（Largest Contentful Paint）: ページで最も大きな要素（大きな画像や見出し）が表示される時間。体感で“ページが開いた”と感じる指標です。
- TTI（Time to Interactive）: ボタンが押せるなど、実際に操作できるようになるまでの時間。
- CLS（Cumulative Layout Shift）: 画面が勝手にズレる量。広告や画像でレイアウトが突然変わると高くなります。
測定の種類と注意点
- ラボ測定: 同じ条件で繰り返せる再現性のあるテスト。改善の効果を比べやすいです。
- フィールド（実ユーザー）データ: 実際の利用環境での計測。ネット回線や端末差が影響します。
測定時は複数のデバイスや回線で試し、繰り返して平均を取ることをおすすめします。優先順位はユーザーが体感する指標（LCPやTTI）を先に改善すると効果が分かりやすいです。
主要な速度測定ツール
概要
代表的な速度測定ツールは、URLを入れてすぐに計測できるものから、詳細なウォーターフォール解析や地域・デバイス指定ができるものまで揃っています。目的に応じて使い分けると効率的です。
主なツールと特徴（簡潔に）
- Google PageSpeed Insights：モバイルとPCでスコアと改善提案を表示します。実運用に即した指標が出ます。
- Lighthouse：詳細な監査レポートを出し、パフォーマンスやアクセシビリティの問題を掘り下げます。開発中の検証に向きます。
- Pingdom Website Speed Test：操作が簡単で、ページロード時間と基本的なリソース一覧を確認できます。
- GTmetrix：詳細なレポートと歴史的な比較が可能で、改善前後の差を追いやすいです。
- WebPageTest：多くのロケーションとブラウザ選択、ウォーターフォールの詳細解析に優れます。
- KeyCDN Website Speed Test：CDNやレスポンス時間のチェックが簡単にできます。
- Site Relic／IsItWP：軽いテストで素早く問題の有無を把握するときに便利です。
使い分けのポイント
簡単にスコアだけ見たいときはPageSpeedやPingdom。実際のロード過程を詳しく見るならWebPageTestやGTmetrix。開発段階で総合的に診断するならLighthouseを使います。地域やモバイルでの挙動を確認したい場合は、ロケーションやデバイス指定ができるツールを選んでください。
簡単な測定手順
- テストしたいページのURLを入力します。
- 必要なら地域やデバイス（モバイル/デスクトップ）を選びます。
- テストを実行して結果を複数回確認します。
- ウォーターフォールや改善提案を見て優先順位を決めます。
注意点
同じページでも実行ごとに結果が変わります。キャッシュやネットワーク状況を考慮して複数回測定し、傾向を見ることが重要です。したがって、一回のスコアだけで判断しないでください。
計測時の詳細指標
総リクエスト数
説明：ページ読み込み時に発生するHTTPリクエストの合計です。多いほど接続が増え遅くなります。例：画像や外部スクリプトが多い場合。
対策：画像スプライトやCSS/JSの結合、不要な外部スクリプトの削除、遅延読み込みを使います。
ページサイズ（コンテンツサイズ）
説明：HTML・画像・スクリプトなど全ての合計バイト数です。大きいほど転送に時間がかかります。例：未圧縮の大画像。
対策：画像を圧縮・適切な解像度にする、WebP利用、コードのミニファイ、GZIP/Brotli圧縮を有効化します。
読み込み時間（合計読み込み時間）
説明：ページが完全に読み込まれるまでの時間です。ユーザー体感と直結します。
対策：初回表示を早めるために重要リソースを優先、遅延読み込みとプリフェッチを利用します。
待機時間・受信時間
説明：サーバー応答までの待ち時間（待機）とダウンロードにかかる時間（受信）です。例：遅いサーバーや大きなファイルが原因です。
対策：CDN導入、キャッシュの活用、サーバー性能改善、ファイル分割を行います。
HTTPステータスコード
説明：200/301/404/500などのコードはページの正常性を示します。多くのリダイレクトや404はパフォーマンス悪化の原因です。
対策：不要なリダイレクトを減らし、壊れたリンクを修正し、適切なキャッシュヘッダを設定します。
ファイルタイプ別の影響
説明：画像・JS・CSS・フォント・外部APIはそれぞれ異なる影響を与えます。サードパーティスクリプトは特に遅延を招きます。
対策：重いスクリプトは非同期化または遅延読み込み、必要ないフォントは削除、画像は遅延読み込みにします。
サイト全体の総HTTPリクエスト数
説明：ページごとだけでなくサイト全体での合計も監視します。多ページ構成だと重複資源が増えます。
対策：共通リソースはCDNやキャッシュで共有し、リソースの重複を減らすことで全体の負荷を下げます。
各指標は単独で見るのではなく、組み合わせて分析します。例えば総リクエスト数が少なくても大きなファイルがあれば体感速度は遅くなります。測定時は具体的な数値と実際の表示イメージを両方見て判断してください。
Chromeデベロッパーツールを使用した測定
概要
Chromeのデベロッパーツール(DevTools)は、ブラウザ上で手軽に表示速度の詳細を確認できます。WindowsはCtrl+Shift+I、MacはCommand+Option+Iで開きます。
基本操作（手順）
- DevToolsを開き「Network」パネルを選択します。上部の「Disable cache」にチェックを入れ、ページをリロードしてください。これでキャッシュの影響を除いて測定できます。
- 右上の「Online」からネットワーク速度を選びます。例えば”Slow 3G”を選ぶと実際の遅い回線での挙動を確認できます。
- 「Performance」パネルで録画を開始し、ページを操作してから録画を停止します。詳細なタイミングやレンダリングの様子が確認できます。
指標の見方（具体例）
- TTFB（最初の応答）: サーバーが応答するまでの時間。長いと表示が遅れます。
- First Contentful Paint（FCP）: ユーザーが初めて何かを目にする瞬間。テキストや画像が表示されればFCPが記録されます。
- Largest Contentful Paint（LCP）: ページ内で最も大きな要素が表示される時点。目に見える主要コンテンツの読み込み状況を示します。
便利な使い方
- Filmstrip（Performanceの要約）で時間経過ごとの見た目を確認します。どの時点で何が表示されたか分かります。
- 重いスクリプトはProfileでCPU負荷を測定し、遅延の原因を特定します。
- 計測結果は保存してチームと共有できます。
まとめチェックリスト
- キャッシュ無効化でリロード、ネットワーク/CPUスロットリング、Performanceで録画、主要指標(FCP・LCP・TTFB)を確認。これらを繰り返して改善を進めてください。
