Chromeで表示速度を計測する方法と効果的な使い方解説

はじめに

本ドキュメントは、Google Chromeを使ってWebサイトの表示速度を正しく計測し、改善につなげるための実用ガイドです。Chrome DevToolsのNetworkタブやPerformanceタブ、Lighthouse、そしてPageSpeed Insightsなどの使い方や違いを分かりやすく説明します。

目的
– 日常的に使える計測手順を身につけること。
– 結果の見方と優先度の付け方を理解すること。

対象読者
– サイト運営者、Web制作担当者、個人ブロガーなど、専門知識がそれほどなくても始められます。

この記事で学べること（例）
– Chromeで具体的にどこを見れば速さが分かるか
– 他の無料ツールとの違いと使い分け
– SEOやユーザ体験への影響の基礎

前提
– 最新のChromeがインストールされていることが望ましいです。基本的なHTMLやブラウザ操作の知識があれば取り組みやすいです。

進め方
– 第2章以降を順に読み、実際のサイトで計測しながら進めると理解が深まります。小さな改善を繰り返すことで確実に効果が出ます。

なぜサイトの「表示速度」をChromeで計測する必要があるのか

表示速度は訪問者の印象を決める重要な要素です。ページが遅いと直帰率や離脱率が上がり、最終的に購入や問い合わせといったコンバージョンが下がります。特にスマートフォンの回線ではミリ秒単位の差が体感に響くため、細かい最適化が重要です。

ユーザー体験への直結

読み込みが速いとユーザーは快適に閲覧できます。画像やスクリプトの読み込みが遅いと「使いにくい」と感じやすく、結果としてページを離れてしまいます。実装の小さな改善が大きな効果を生みます。

SEOへの影響（Core Web Vitals）

Googleはページ速度やCore Web Vitalsを検索順位の評価要素に含めています。表示が遅いサイトは検索で不利になります。したがって速度改善は集客にも直結します。

Chromeで計測する利点

Chromeは世界で広く使われるブラウザです。DevToolsやLighthouseを使うと、読み込み時間やレンダリング、主要なVitalsを詳しく測定できます。ネットワークやCPUを擬似的に遅くする設定でモバイル環境を再現できる点も便利です。

以上の理由から、特に実利用者の多いChromeでの計測が現実的で有用です。

表示速度を測る3つの代表的な無料ツールの全体像

概要

代表的な無料ツールは使い方と得られる情報が異なります。ここでは「PageSpeed Insights」「Search Console」「ブラウザ系ツール（Chrome DevTools／Lighthouse／Test My Site）」の三つに分けて、特徴と使いどころをやさしく説明します。

1) PageSpeed Insights

URLを入力するだけで、モバイルとデスクトップ両方のスコアと改善提案を表示します。Core Web Vitals（読み込み速度や応答性、視覚の安定性）を個別に示すため、トップページや商品ページなど個別URLの問題点がわかります。例：画像が大きすぎると「画像最適化」を提案します。

2) Google Search Console（スピード関連レポート）

サイト全体をまとめて監視できます。問題のあるURLを一覧で表示し、どのページを優先して直すべきか把握できます。例：モバイルで遅いページが複数あると、まとめて改善計画を立てやすくなります。

3) ブラウザ系ツール（Chrome DevTools／Lighthouse／Test My Site）

• Chrome DevTools：開発者向けで、リソースごとの読み込み時間やネットワーク通信が見られます。実際の動作を確認しながら原因を特定できます（例：特定のスクリプトが遅い）。
• Lighthouse：自動でパフォーマンスやSEO、アクセシビリティをスコア化します。改善箇所を項目ごとに示すので、施策の優先順位がつけやすいです。
• Test My Site：モバイル向けの速度診断を手軽に行えます。実際の携帯回線を想定した結果が得られるので、スマホユーザーの体感を確認できます。

使い分けの目安

• まずはSearch Consoleでサイト全体の優先箇所を把握します。次にPageSpeed Insightsで重要な個別ページを診断します。深掘りする際はChrome DevToolsやLighthouseで原因を特定し、Test My Siteでモバイル体感を確認すると効率的です。

Chrome DevToolsで表示速度を計測する基本手順（Networkタブ編）

はじめに

この章では、ChromeのDevTools Networkタブを使った基本的な表示速度計測手順を、実際の画面操作に沿って丁寧に説明します。特別なツールは不要で、すぐに原因の絞り込みができます。

手順（簡潔）

1. DevToolsを開く：Windows/LinuxはCtrl+Shift+I、MacはCommand+Option+I。
2. Networkタブを選択。
3. 「Disable cache」にチェックを入れ、ページをリロード（F5）。これでキャッシュの影響を除けます。
4. 必要ならネットワーク速度をシミュレート（例：Fast 3G）して実際の回線での体感を確認します。
5. 読み込み後、タブ下部の合計読み込み時間（Finish）を確認します。

ボトルネックの見つけ方

• TimeやSizeでソートして長いものや大きいものを探します。
• Waterfall（帯グラフ）で長く待っている部分（待ち時間や受信時間）を確認します。
• ドメイン名を見て外部サービスが遅くないかもチェックします。

よくある原因と対策（具体例）

• 大きな画像：リサイズ・圧縮・WebP化、画像の遅延読み込み。
• 重いスクリプト：defer/asyncの利用、遅延読み込み、不要なスクリプトの削減。
• 多数の小さなリクエスト：結合やスプライト、HTTP/2対応、CDN利用。
• キャッシュ未設定：適切なキャッシュヘッダーを設定。

使い方のコツ

• 結果を1回だけで判断せず、キャッシュあり/なしや速度設定を変えて複数回測定してください。
• 改善後は同じ手順で再測定し、効果を確認します。

Chrome DevTools「Performance」タブでの高度な速度分析

概要

Performanceタブはブラウザ内部の動作を詳しく追えます。メインスレッドの処理、レイアウトやペイント、JavaScript実行の痕跡（トレース）を可視化します。初回はライブ指標やCore Web Vitalsの概要が見えます。

計測の基本手順

Recordボタンを押し、ページをリロードして数秒待ちます。操作を再現してからRecordを止めると詳細なタイムラインが得られます。スクリーンショットやタイムスタンプも同時に記録できます。

Flame Chart（フレームチャート）の読み方

縦が機能、横が時間です。長く伸びるバーは長時間処理を示します。Scripting（JS実行）、Rendering（レイアウト／スタイル計算）、Painting（描画）に注意してください。長いScriptingは分割（Web Workerや分割実行）で改善できます。

Core Web Vitalsの確認

LCPやCLS、INP（旧FID）のマーカーが表示されます。いつLCPが起きたか、何がそれを遅らせたかをトレースで特定できます。

実践的な使い方と改善策

• Timelineの「Bottom-Up」「Call Tree」で重い関数を特定します。\n- Filmstripで視覚的に描画タイミングを確認します。\n- 長時間タスクは分割し、画像遅延読み込みやCSSの軽量化で描画負荷を下げます。\n
  以上を繰り返し計測して、小さな変更ごとに効果を確認してください。