MENU

GA4で表示速度を計測する方法と活用術を詳しく解説

大規模情報サイト運営
ga4 表示速度
2025/09/26
目次

はじめに

はじめに

「ページの読み込みが遅い」と感じたことはありませんか？表示速度は訪問者の離脱やコンバージョンに直結します。本書では、Google Analytics 4（GA4）を使ってウェブサイトの表示速度を計測・分析し、改善に結びつける具体的な手順を分かりやすく解説します。

この記事で学べること

  • GA4単体では表示速度を直接計測できない理由
  • Google Tag Manager（GTM）とカスタムJavaScriptによる計測方法
  • データの可視化（Looker Studioなど）と分析の基本
  • 実務で使える改善のヒントと注意点

なぜ計測が重要か

表示速度が遅いと直帰率が上がり、売上や閲覧数に影響します。具体例として、ECサイトでのカート離脱、記事サイトでの閲覧数減少があります。計測すると、どのページや状況で問題が起きているかがわかり、優先度をつけて改善できます。

前提と準備

GA4とGTMの管理権限、サイトにタグを追加できる環境、基本的なJavaScriptの理解があるとスムーズです。Looker Studioを使えば、計測データを見やすくまとめられます。

次章からは、実際の計測手順に沿って設定方法を詳しく説明します。わかりやすく進めますのでご安心ください。

GA4で表示速度を計測する方法

概要

GA4標準ではページの表示速度を直接収集しません。ただし、ブラウザ側で計測したロード時間をイベントやページビューのパラメータとして送信すれば、GA4で分析できます。本章では2つの方法を紹介します。

方法1：読み込み完了時にロード時間をイベントで送信

1) ページの読み込み完了（window.onloadなど）でロード時間を取得します。簡単な取得方法はNavigation Timing APIです。

例（概念）:

const t = performance.getEntriesByType('navigation')[0].loadEventEnd;
// or performance.timingを使って差分を計算

2) 取得した値（ミリ秒）をGA4へカスタムイベントとして送信します。gtagかGTMのdataLayer経由で送ります。利点は実装がシンプルな点です。ただしイベントが別扱いになるため、ページビューとの紐付けに注意が必要です。

方法2（推奨）：page_viewイベントのパラメータとして送信

ページビューに表示速度を含めると、既存の集計やセッション情報と自動で結びつきます。手順は次のとおりです。

1) ページ読み込み直後にロード時間を計測する（上と同様）。
2) 計測値をdataLayerに格納しておくか、gtagでpage_view送信時にパラメータとして付与します。

例（概念）:

dataLayer.push({event:'page_load_time', page_load_time:1234});
// GTM側で変数を作ってGA4のpage_viewパラメータにマッピング

実装時のポイント

  • 単位はミリ秒（整数）で送信してください。
  • サンプリングや閾値を設けてデータ量を制御します。
  • 個人情報は含めないでください。
  • RUM（実際のユーザー計測）を優先し、合成テストとは分けて扱ってください。

この章を参考に、まずは少数ページで試験実装し、GA4での表示速度の見え方を確認してください。

GTMによる表示速度計測・GA4への連携手順

1. カスタムJavaScript変数を作成

GTMで新しい変数を作り、performance APIを使ってページ表示時間を計算します。例：

function(){
  try{
    var p=window.performance||{};
    if(p.getEntriesByType){
      var n=p.getEntriesByType('navigation')[0];
      if(n) return Math.round(n.loadEventEnd - n.startTime);
    }
    if(p.timing){
      return Math.round(p.timing.loadEventEnd - p.timing.navigationStart);
    }
  }catch(e){return undefined}
}

ミリ秒(ms)で返すのが一般的です。

2. 発火トリガーを設定（Window Loaded）

「ウィンドウ読み込み完了（Window Loaded）」トリガーを作成し、ページが完全に読み込まれたタイミングで変数を取得します。シングルページアプリではHistory変更やカスタムイベントも検討してください。

3. GA4イベントタグを作成

GA4のイベントタグを作り、イベント名（例：page_load_time）を設定します。イベントパラメータに先ほどの変数を割り当て、キー名はpage_load_timeなど分かりやすくします。テストはGTMプレビューモードとGA4のDebugViewで行います。

4. GA4でカスタム指標を作る

GA4管理画面で「カスタム定義」→「カスタム指標」を作成します。スコープはイベント、単位はミリ秒または秒（変換しておく）にします。これで平均値などを集計できます。

5. Looker Studioで可視化

Looker StudioでGA4データを接続し、平均ページ表示速度や95パーセンタイルなどを指標として配置します。フィルタで開発者のアクセスを除外すると精度が上がります。

テストと注意点

プレビューで値が入るか確認し、Nullや極端な値の除外ルールを用意してください。サンプリングや広告ブロッカーで取得できない場合があります。分かりやすさのため、必要に応じてミリ秒→秒に変換して保存すると良いです。

表示速度データの活用方法・分析例

概要

表示速度データは、ページごとの比較や期間・ユーザー属性別の分析に使えます。ユーザー体験（UX）改善や優先順位付けに直結する実務的な情報が得られます。

基本的な活用法

  • ページ別比較：商品ページ、ブログ、トップページなどで平均表示時間を比べ、遅いページを特定します。具体例：商品ページが平均で2.5秒、ブログが1.2秒なら商品ページを優先改善します。
  • 期間比較：サイト変更前後やキャンペーン期間でどう変わったかを比較します。リリースの効果検証に便利です。
  • 属性別分析：デバイス（スマホ/PC）、国、ブラウザ別に表示速度を分けて確認します。例えば、スマホで遅い場合は画像やCSSの最適化が疑われます。

具体的な分析手順（例）

  1. 遅いページをリスト化（上位10）
  2. そのページの高い割合を占める属性を確認（例：モバイル利用が多い）
  3. 開発側で原因を洗い出す（大きな画像、重い外部スクリプト、サーバー応答）
  4. 改善を実施し、1週間〜1か月で再計測して効果を確認します

優先順位の付け方

  • 影響度×発生頻度でスコア化します。例：訪問数が多く表示遅延が大きいページを先に直します。
  • 簡単に直せる施策（画像圧縮や遅延読み込み）を先に行うと効果が早く出ます。

モニタリング運用

  • 定期レポート（週次または月次）で主要指標を追います（平均、75パーセンタイル、直帰率の相関など）。
  • アラート設定で急な劣化を検知すると対応が早くなります。

注意点

  • 単一の指標だけで判断せず、トラフィックやコンバージョンと合わせて見ることが重要です。

GA4「表示回数」との違い

概要

表示回数（ページビュー）は、ユーザーがページを見た回数を表します。GA4では「エンゲージメント＞ページとスクリーン」で確認できます。一方、表示速度はページがどれだけ速く表示されるかで、ユーザーの体感や離脱率、コンバージョンに影響します。

指標の違いを具体例で

例）商品ページAは表示回数が多いが読み込みが遅い。ページBは表示回数が少ないが速い。
・Aは集客は良いが速度改善で離脱や購入率が改善する可能性が高い。
・Bは集客施策で表示回数を増やす価値がある。

どう使い分けるか

  1. 優先度の決定：表示回数が多く、速度が遅いページを優先します。
  2. 改善と計測：速度改善の前後で表示回数・コンバージョンの変化を比較します。
  3. 継続的確認：改善後も定期的に両指標をチェックして効果を維持します。

実務のヒント

・表示回数はGA4のレポートで、速度は計測イベントやブラウザのパフォーマンス指標を組み合わせて確認します。
・どちらか一方だけで判断せず、両方を合わせてページ改善の優先順位を決めると効果的です。

注意点・FAQ

注意点

  • イベント量とサーバー負荷：表示速度を細かく（例：各要素や連続計測）送るとイベント数が急増し、計測側や解析側の負荷が高まります。一般的には「ページ単位」での計測を優先し、例外的に重要な要素だけ追加で送ると負荷を抑えられます。
  • GA4の標準機能の限界：GA4はページ表示速度を自動で詳しく出しません。したがって、カスタムイベントやGTMを使った計測が必須です。計測コードは軽くし、非同期で送信してください。
  • サンプリングと偏り：大量イベントではサンプリングやデータ欠損が起きやすいです。代表的なページを優先したり、サンプリング設定の確認を行ってください。
  • 同意とプライバシー：ユーザー同意が必要な場合は、同意を得てから速度データを送る仕組みにしてください。IPや個人情報を含めない設計が安心です。

よくある質問（FAQ）

Q: どの粒度で送ればいいですか？
A: まずは「ページ読み込み完了の指標（例：LCP相当）」をページ単位で送り、後から必要に応じて重要要素を追加してください。

Q: サーバーサイド計測とブラウザ計測はどちらが良いですか？
A: ブラウザが実際のユーザー体験を反映します。サーバー側は補完として使うと効果的です。

Q: テスト方法は？
A: 開発環境でGTMのプレビューやブラウザの開発者ツールで送信イベントを確認し、実装後はサンプル日数を取って傾向を確認してください。

Q: データが異常に多い・少ないときは？
A: イベント発火条件やフィルタ、同意処理を再確認し、ログで発火回数を検証してください。

必要があれば、実装チェックリストやGTMの具体設定例もお作りします。ご希望を教えてください。

＼ 最新情報はInstagramで📲 ／

Instagramを見る

人気投稿

大規模情報サイト運営
ga4 表示速度
よかったらシェアしてね！
  • URLをコピーしました！

この記事を書いた人

userのアバター user

関連記事

目次