はじめに
目的
本記事は、Webサイトの表示速度を正しく計測し、改善につなげるための入門ガイドです。表示速度は閲覧者の満足度や検索順位、コンバージョンに直結します。まずは正しい計測方法を知り、再現性のあるデータを集めることが重要です。
この記事で学べること
- 表示速度を測る理由と効果的な指標の見方
- 無料で使える代表的な計測ツールの特徴と使い方
- 実際にブラウザで計測する手順と結果の読み取り方
- 計測結果からとるべき改善アクション
- 複数ツールの使い分け方と選び方
対象読者
サイト運営者、マーケター、フロントエンド開発初心者など、技術的な背景が浅くても読みやすい内容にしています。具体例を交えて丁寧に解説します。
進め方
まず本章で趣旨を把握し、第2章以降を順に読み進めてください。実際にツールで計測しながら読むと理解が深まります。各章ごとに手順やポイントを分かりやすく示しますので、手元のサイトで試してみてください。
なぜWebサイトの表示速度を計測する必要があるのか
ユーザー体験（UX）に直結する
読み込みが遅いと訪問者は待てずに離脱します。例えばモバイルでページが3秒以上かかると、買い物や記事閲覧を途中でやめる人が増えます。表示速度を計測すれば、どの部分が遅いか（画像、スクリプト、サーバー応答など）を特定できます。
検索順位（SEO）への影響
検索エンジンは快適に閲覧できるサイトを評価します。特にモバイルでの表示速度は重要です。計測して改善を続けることで、検索結果での露出が改善する可能性が高まります。
コンバージョンと収益の関係
ページが速く表示されれば、購入や問い合わせの完了率が上がります。ECサイトなら、カート画面の表示が遅いだけで注文が減る例が多く報告されています。
改善のための出発点になる
速度を測らないと改善の効果を判断できません。測定は問題発見と優先順位付けに役立ち、修正後の変化も数値で確認できます。
表示速度を計測できる代表的な無料ツール
概要
代表的なツールを分かりやすく紹介します。目的や手軽さに合わせて選べます。
PageSpeed Insights（Google）
- 何をするか：URLを入力するだけで、モバイル・デスクトップ両方のスコアと改善提案を出します。
- 使い方：サイトのURLを貼り付けて「分析」を押すだけです。出力は赤（0～49）、黄（50～89）、緑（90～100）で評価されます。
- 特徴：改善点を具体的に提示するため、優先度の高い対策が分かりやすいです。
Lighthouse
- 何をするか：ページのパフォーマンス、アクセシビリティ、SEOなどを自動で監査します。
- 使い方：Chromeの拡張機能かデベロッパーツール内のLighthouseタブでレポートを生成します。
- 特徴：詳細な改善案とスコアが得られ、ローカル環境でも使えます。
Chromeデベロッパーツール（Networkタブ）
- 何をするか：実際の読み込み時間やリクエストの順序を確認できます。
- 使い方：Chromeでサイトを開き、F12→Networkタブでリロードすると各リソースの読み込み時間が見えます。
- 特徴：実測値が分かるため、体感速度に直結した原因追及に向きます。
GTmetrix
- 何をするか：PageSpeedやYSlowベースの分析に加え、読み込みの可視化（動画）も行えます。
- 使い方：URLを入力してテストを開始します。地域やブラウザの選択が可能です。
- 特徴：複数の視点から比較したい場合に便利です。
Testmysite（Think with Google）
- 何をするか：モバイル中心の速度評価とビジネス影響の簡易推計を出します。
- 使い方：URLを入力して結果を確認します。モバイルユーザー向けの指標が見やすいです。
Pingdom Website Speed Test
- 何をするか：ページの読み込み時間と各ファイルの寄与を可視化します。
- 使い方：テスト地点を選んでURLを実行します。
- 特徴：どのファイルが遅いか直感的に分かります。
Site Relic（サイトレリック）
- 何をするか：無料プランで基本的な速度チェックや監視ができます。
- 使い方：URLを登録してレポートを取得します。
- 特徴：定期的に監視したいときに向きます。
どのツールも一長一短があります。まずはPageSpeed InsightsとChromeデベロッパーツールを併用して状況を把握し、必要に応じてGTmetrixやPingdomで深掘りすることをおすすめします。
PageSpeed Insightsの具体的な使い方
使い方（手順）
- PageSpeed Insightsのサイトを開きます。
- 測定したいページのURLを入力し、「分析」ボタンを押します。
- 数秒で結果が表示されます。モバイルとデスクトップの両方が見られます。
スコアの見方
- スコアは0〜100点で色分けされます。高いほど速いです。
- 「モバイル」「デスクトップ」それぞれ評価されます。モバイルは通信環境を想定した評価です。
表示される項目と意味
- ラボデータ：ツールが実際に計測した数値（例：ページが見えるまでの時間）。
- フィールドデータ：実際のユーザーの実測値（あれば表示）。
- Opportunities（改善案）：ページを速くするための具体案と想定される短縮時間。
- Diagnostics（診断）：細かい技術的な指摘。
- Passed audits：問題がない項目の一覧。
改善アドバイスの読み方
- 各提案をクリックすると、何をどう直すか説明があります。例：画像の最適化→画像を小さくする、遅延読み込みを検討する。
- JavaScriptやCSSの削減、圧縮、キャッシュの活用などがよく出ます。具体的な手順は例とともに示されます。
実務での使い方のコツ
- 比較したい複数ページを同じ条件で測り、違いを比べます。
- 改善後は再測定して効果を確認します。
注意点
- 一度の測定だけで結論を出さず、複数回測ると安定した判断ができます。
Chromeデベロッパーツールによる実測方法
準備
- Chromeで計測したいページを開きます。右クリック→「検証」または Ctrl+Shift+I でデベロッパーツールを起動します。
- 「Network（ネットワーク）」タブを選びます。
- キャッシュの影響を除きたい場合は、開いた状態で「Disable cache」にチェックを入れます（ツールを開いている間のみ有効）。
実測手順（簡潔）
- Networkタブを開いたままページをリロードします（F5やCtrl+R）。
- 表示されたウォーターフォールの下部に合計時間や各イベント（DOMContentLoaded、Load）の時間が表示されます。これが実測の読み込み時間です。
リソースごとの確認方法
- ウォーターフォールで各ファイルの読み込み順と時間を確認できます。長くかかっているリクエストをクリックするとヘッダーやTimingの詳細が見られます。
- フィルタ（JS/CSS/Imgなど）で種類ごとに絞り込みできます。
ネットワーク制限と繰り返し計測
- 右上の「No throttling」から3G等を選び、遅い回線での挙動を再現できます。複数回リロードして平均を取ることをおすすめします。
記録の保存と注意点
- 右クリック→「Save all as HAR with content」でHARファイルを保存できます。共有や詳細解析に便利です。
- ローカル環境や開発者ツールが開いた状態の影響があるため、本番環境のユーザー環境とは差が出る場合があります。複数条件で確認してください。
計測結果からの改善アクション
全体の流れ
計測で出た指摘を小さな単位で直し、都度再計測します。影響の大きい項目から対応すると効率的です。順番を守ることでスコアと体感速度が両方改善します。
優先順位の付け方
ユーザーが最初に見る部分（画像やファーストビュー）と、操作の応答性に関係する項目を優先します。指標の数値だけでなく、実際の表示や操作感を確認してください。
具体的な改善例
- 画像圧縮と次世代フォーマット：WebPや適切なサイズの画像を用意し、遅延読み込みを設定します。例：大きなバナーは遅延読み込みに。
- キャッシュ利用：静的ファイルに長めのブラウザキャッシュを設定し、変更時はファイル名を変えます。CDNの導入も有効です。
- JS/CSSの最適化：不要なスクリプトを削除し、縮小（minify）や遅延読み込み（defer/async）を使います。重要箇所はCritical CSS化します。
- サーバー改善：HTTP/2や圧縮（gzip/brotli）、応答時間の短縮を検討します。
- 外部スクリプトの管理：広告や解析タグは遅延や条件付きで読み込みます。
改善後の再計測と運用
変更ごとに計測し、効果が出ているか数値と実機で確認します。改善履歴を残し、定期的にチェックする運用を作ると効果が持続します。
注意点
表示崩れや機能不全が起きないよう、段階的に適用し、ステージ環境で検証してください。その他の改善はユーザー影響を最優先で判断します。
各ツールの比較と選び方
比較のポイント
- 目的：点数でざっくり把握したいのか、実際の表示を細かく調べたいのかで選びます。例：運用レポートはPageSpeed Insights、個別リソース調査はChromeデベロッパーツールが向きます。
- データ種別：ラボデータ（実験室での計測）とフィールドデータ（実際のユーザー環境）を確認しましょう。PageSpeed Insightsは両方を示します。
- 継続管理：履歴や複数ページの一括分析が必要ならGTmetrixや類似サービスが便利です。
各ツールの特徴（簡潔に）
- PageSpeed Insights
- 点数評価と改善提案が分かりやすいです。モバイルとデスクトップ別に評価します。運用レポート作成に向きます。
- Lighthouse
- ブラウザやコマンドでレポートを出せます。アクセシビリティやPWAなどもチェック可能で総合診断に便利です。
- Chromeデベロッパーツール
- 実際の読み込み過程を確認できます。ネットワークやリソース単位で問題を追えます。デベロッパー向けの詳細分析に最適です。
- GTmetrix / TestMySiteなど
- 詳細なタイムラインや履歴管理、競合サイトとの比較機能が充実しています。改善の効果検証に向きます。
選び方の目安（実例付き）
- まず点数と代表的な問題を知りたい：PageSpeed Insightsを使います。
- 手元でページを操作しながら原因を突き止めたい：Chromeデベロッパーツールで実測します。
- 定期的にスコア推移を監視したい：GTmetrixのような履歴機能を使います。
- 自動化してCIに組み込みたい：Lighthouseのコマンド実行やCI連携を検討します。
実務的なおすすめワークフロー
- PageSpeed Insightsで総合評価を確認する。問題の優先度を把握します。
- Chromeデベロッパーツールでリソース単位の原因を特定する。
- GTmetrixなどで修正前後の履歴を取り、改善効果を検証する。
必要に応じて複数ツールを組み合わせると効果的です。
まとめ
ここまでの内容を簡潔に振り返ります。
要点
- 表示速度の計測はSEOとユーザー体験改善の第一歩です。
- 複数のツールを併用すると、実測値とラボ測定の両面から状況を把握できます。
- 測定結果に基づき、優先度をつけて改善を続けることが重要です。
実践のポイント
- 定期的に計測して変化を追いましょう。
- LCPやCLSなど重要指標をまず改善対象にします。
- 小さな改善を繰り返し、効果を検証します。
ツールの使い分け
- PageSpeed Insights：最初の診断と推奨事項の確認。
- Chromeデベロッパーツール：実際の読み込みを詳しく調べるときに有効。
- WebPageTestやLighthouse：詳細分析や比較に便利です。
次にやること（実践案）
- サイトの代表ページをPageSpeedで計測する。
- 上位の改善項目を3つ選び対応する。
- 変更後に再測定し効果を確認する。
継続的に取り組めば、ユーザー満足度とサイト価値が確実に向上します。
