はじめに
本書の目的
本ドキュメントは「表示速度 チェック」に関する調査結果を分かりやすくまとめたものです。Webサイトの表示速度がなぜ重要かを説明し、主要なツールの特徴や使い方、計測される指標について丁寧に解説します。初めての方でも実務で使えるように具体例を交えて説明します。
想定する読者
サイト運営者、Web担当者、デザイナー、開発者の方を想定しています。専門知識がなくても読み進められるように、専門用語は最小限にし具体例で補足します。
本書の構成と読み方
第2章以降で表示速度がユーザーに与える影響、ツール別の特徴と計測手順、主要指標の見方、Google AnalyticsやSearch Console、Chromeデベロッパーツールでの確認方法を順に説明します。まずは第2章から順に読むと理解しやすいです。ご自身のサイトで実際に計測しながら進めてください。
Webサイト表示速度の重要性と直帰率への影響
なぜ表示速度が重要か
Webサイトの表示速度は、訪問者が体験を判断する最初の要素です。ページ表示が遅いとユーザーは待たずに離脱します。特にスマートフォン利用が多い現代では、短時間で快適に閲覧できることが求められます。表示速度はSEO（検索順位）にも影響し、結果的にアクセス数や認知につながります。
直帰率への影響（調査結果）
ある調査では、表示速度の低下が直帰率に大きな影響を与えると報告されています。具体的には、表示が1秒から3秒に落ちると直帰率は約32%上昇、1秒から5秒では約90%上昇、1秒から6秒では約106%上昇します。短い遅延でも離脱が増える点に注意が必要です。
ビジネスへの具体的影響
表示が遅いと購入や申し込みが減ります。ECサイトなら購入完了まで到達する割合が下がり、広告収入や会員獲得にも悪影響を与えます。ブランドの印象も低下し、長期的な信頼を損なう恐れがあります。
身近な改善ポイント
- 画像を適切に圧縮する
- 不要な外部スクリプトを減らす
- キャッシュを活用する
これらは専門知識が少なくても取り組める対策です。まず現状を測定し、効果の高い改善から進めましょう。
Page Speed Insightsの概要と特徴
概要
Page Speed InsightsはGoogleが提供する無料ツールで、URLを入力するだけでWebページの表示速度を測れます。モバイルとデスクトップの両方を評価し、スコアや改善点を具体的に示します。初心者でも使いやすい設計です。
主な特徴
- モバイルとデスクトップ両方のスコア表示。
- 実際のユーザーデータ（フィールド）とラボデータの両方を提示。
- 改善の優先順位がわかる提案を表示。具体的にどのファイルを軽くするか示します。
測定される要素（簡単に）
代表的な項目を分かりやすく説明します。
– 初期表示の速さ（ページが見え始めるまでの時間）
– 実際に操作できるまでの時間（ボタンなどが反応するまで）
– 画像やスクリプトの読み込み効率
レポートの見方（ポイント）
- スコアは目安です。高ければ良いですが、低い項目を優先的に改善してください。
- 提案の中にある具体的なファイル名や行動を参考に作業を進めます。例：大きい画像を圧縮する、不要なスクリプトを遅延読み込みする。
利点と注意点
利点は手軽さと具体的な改善指示です。注意点として、スコアだけに頼らず実際のユーザー体験（ページの見やすさや操作感）も確認してください。
Page Speed Insightsの使用方法
使い方の概要
使い方はとてもシンプルです。公式ページにアクセスし、分析したいページのURLを入力して「分析」ボタンを押すだけで、数秒から十数秒で結果が表示されます。モバイルとデスクトップの両方を確認できます。
手順（具体例）
- Page Speed Insightsのページを開く。
- 調べたいページのURLを入力する（例: https://example.com）。
- 「分析」を押すと処理が始まり、結果が表示されます。
- 結果画面で「モバイル」「デスクトップ」を切替えて確認します。
結果の見方
スコアは0～100で評価され、3つのカテゴリーに分かれます。
– 良好：90～100（表示時間の目安 1.8秒以内）
– 改善が必要：50～89（1.8秒〜3秒）
– 低速：0～49（3秒以上）
結果画面は「フィールドデータ（実際のユーザーの計測）」と「ラボデータ（ツール内の計測）」に分かれ、両方を見比べると現状と想定改善効果がつかめます。
改善提案の活用例（具体的な対処）
- 画像最適化：不要に大きな画像は圧縮、WebPなど軽い形式に変換する。
- 遅延読み込み：画面外の画像や動画は遅延読み込みにする。
- キャッシュ設定：ブラウザキャッシュを有効にして再訪問を速くする。
- 不要なスクリプト削減：読み込まれている外部スクリプトを見直す。
注意点
提案には効果の大きさが表示されます。まず「推定節約時間」が大きい項目から対応し、修正後に再計測してください。
Page Speed Insightsで計測される主要指標
LCP（Largest Contentful Paint）
ページで最も大きな要素（画像や本文）が表示されるまでの時間を測ります。例えば記事のメイン画像や見出しが表示される速さです。目安は2.5秒以下。改善策は画像の圧縮や遅延読み込み、サーバー応答の改善です。
FID（First Input Delay）
ユーザーが最初に操作したとき（ボタンやリンクなど）にブラウザが応答するまでの遅延です。短いほど操作感が良く、目安は100ms未満。長いスクリプトを分割することで改善します。
CLS（Cumulative Layout Shift）
ページの視覚的な安定性を示します。読み込み中にレイアウトが動くとスコアが悪化します。例は画像の高さ指定が無くて本文が跳ねる場合です。対策は画像や広告枠にサイズを設定することです。
FCP（First Contentful Paint）
最初にテキストや画像などが表示されるまでの時間です。ユーザーが何か見えるまでの速さを示します。早めるには重要なCSSを優先して読み込むと良いです。
Speed Index（SI）
ページが視覚的にどれだけ早く表示されるかの総合的な指標です。全体の見え方の速さを評価します。レンダリングの順序を見直すと改善します。
TBT（Total Blocking Time）
読み込み中にユーザー操作を阻害した合計時間です。長いスクリプトが原因になりやすいです。スクリプトの最適化で短くできます。
INP（Interaction to Next Paint）
最近の応答性指標で、あらゆる操作に対する応答の速さを評価します。一貫した良い操作感を目指す際に重要です。
TTFB（Time to First Byte）
ブラウザが最初のバイトを受け取るまでの時間で、サーバー応答の速さを示します。サーバーやCDNの設定を見直すと改善します。
Google Analyticsを使用した表示速度の確認
概要
Google Analytics（UA）でもページの表示速度を確認できます。サイト内の全ページで測定され、平均読み込み時間は「行動」→「サイトの速度」→「サマリー」で確認できます。各ページの読み込み時間は「ページ速度」で見られ、サイト平均より遅い場合は赤、早い場合は緑で表示されます。
基本の確認手順
- Google Analyticsにログインし、該当プロパティを選択します。
- 「行動」→「サイトの速度」→「サマリー」を開き、期間を指定します。
- サイトの平均読み込み時間やサンプル数を確認します。
- 「ページ速度」タブで個別ページの読み込み時間を確認し、表示をソートします。
使い方のコツと注意点
- サンプルベースの測定のため、件数が少ないとぶれます。十分な期間で確認してください。
- デスクトップとモバイルで差が出ることが多いので、セカンダリディメンションで「デバイス」「ブラウザ」「国」を追加して比較しましょう。
- 目安例：平均2秒未満は良好、3〜5秒は改善要、5秒以上は注意。例えばサイト平均が3秒で特定ページが6秒なら、優先的に調査します。
改善につなげる使い方
- 遅いページを抽出して、該当ページのリソース（画像、スクリプト）を見直します。
- カスタムアラートを設定し、平均読み込み時間が閾値を超えたときに通知を受け取ります。
- 他ツール（PageSpeed InsightsやChrome DevTools）と組み合わせると、原因特定が早まります。
Google Search Consoleでの確認方法
概要
Google Search Console（GSC）ではサイト全体の表示速度パフォーマンスを把握できます。サイドバーの「エクスペリエンス＞ウェブに関する主な指標」から、モバイル・PC別に読み込み状況を確認できます。Page Speed Insightsはページ単位の詳細分析に適しますが、サイト全体の不良URLを洗い出すにはGSCが便利です。
確認手順（簡単な流れ）
- GSCにログインし、対象プロパティを選択します。
- サイドバーで「エクスペリエンス＞ウェブに関する主な指標」を開きます。
- モバイル／PCタブで『良好／改善が必要／不良』の割合を確認します。
- 「レポートを開く」をクリックすると、問題ごとのURL一覧が表示されます。
不良URLの確認と対処
- 問題の例：LCP（最大コンテンツの描画遅延）が遅い、CLS（視覚の安定性）が悪い、FID/INP（ユーザー操作応答）が遅い。
- URLをクリックすると該当箇所とサンプルURLが見えます。まず影響の大きいページ（アクセス数が多い、コンバージョンが高い）を優先します。
- 具体的な対策例：大きな画像は圧縮・遅延読み込み、不要な外部スクリプトを削除、サーバー応答を改善する。
改善後の確認方法
修正を行ったら、レポート内の該当問題で「修正を検証」を実行します。GSCが再チェックして問題が解消されればステータスが更新されます。検証は数日かかることがあります。
活用のコツ
- CSVでエクスポートして優先順位をつけると効率的です。
- モバイルとPCで原因が異なる場合が多いので、それぞれ別に対策してください。
- Page Speed Insightsと組み合わせ、GSCで対象URLを見つけたらPSIで詳細を計測すると効果的です。
Chromeデベロッパーツールを使用した計測
開始方法
Chromeを開き、Windowsなら「Ctrl + Shift + I」、Macなら「Command + Option + I」でデベロッパーツールを表示します。ページを正確に測定するには、ツールを開いた状態で操作します。
Networkタブでの計測手順
- 上部の「Network」タブを選択します。右上の「Disable cache」にチェックを入れるとキャッシュの影響を除けます。
- 通常のリロードではなく、ツールを開いた状態でリロードボタンを長押しして「Empty Cache and Hard Reload」を選ぶか、単にリロードして計測します。これで初回読み込みを再現できます。
- 画面左上のスロットル設定で回線速度（例: Slow 3G、Fast 3G、No throttling）を選び、実際のユーザー環境をシミュレートします。
ウォーターフォールチャートの見方
各リソースが横棒で表示され、読み込み順と時間がわかります。棒が長いファイルは遅延の原因になりやすいです。上から順に読み込まれるため、上位に重いファイルがあると表示開始が遅れます。
詳細診断（TimingとHeaders）
任意のリクエストをクリックして「Timing」タブを確認します。DNS、SSL、接続、TTFB（最初のバイト）とダウンロード時間に分かれて表示されます。TTFBが長ければサーバ改善、ダウンロードが長ければファイル軽量化を検討します。
Performanceタブの活用
パフォーマンスタブで録画すると、レンダリングやスクリプト実行、レイアウトの遅延（長いタスク）を可視化できます。視覚的にどの処理が重いか把握でき、例えばJavaScriptの実行に時間がかかっている場合は遅延読み込みや分割を検討します。
よくある原因と対処の例
- 大きな画像：画像を圧縮・WebP化・遅延読み込み
- ブロッキングなCSS/JS：非同期化や遅延読み込み
- サードパーティスクリプト：読み込み順の見直しや遅延
まずはNetworkでウォーターフォールを見て、Performanceで深掘りしてください。正しい設定で計測すると改善点が明確になります。
