Google Analytics でサイト速度を計測する / Measure site speed with Google Analytics

1. Google Analytics で サイト速度を計測する 無料でフロントエンドのパフォーマンス計測 1 株式会社ラクーンホールディングス 技術戦略部 羽山純
2. 自己紹介 • 名前 ◦ 羽山 純（Jun Hayama） ◦ 　　@forrep • 所属 ◦ 株式会社ラクーンホールディングス 技術戦略部 • 技術領域 ◦ バックエンド・インフラ ◦ パフォーマンス改善 ◦ AI（企業審査AI） • 個人活動 ◦ アプリ開発 2
3. アジェンダ 3 Webサイトの表示速度を 分析したいなぁ・・・無料で
4. Navigation Timing API とは (注) Navigation Timing Level 2 は現時点では Working Draft のため、 従来の Navigation Timing API を利用しています Navigation Timing API はナビゲーション開始や各イベント発生 のタイムスタンプをミリ秒単位で取得できます 4 Zhiheng Wang.(2012-12-17).“Navigation Timing W3C Recommendation 17 December 2012”. W3C.https://www.w3.org/TR/navigation-timing/
5. タイムスタンプを引き算して利用 5 Zhiheng Wang.(2012-12-17).“Navigation Timing W3C Recommendation 17 December 2012”. W3C.https://www.w3.org/TR/navigation-timing/ 読み込み時間 = loadEventStart - navigationStart 読み込み時間
6. 代表的な指標 6 取得できる指標が多すぎても迷うので 古い Analytics(ユニバーサルアナリティクス)の「サイト速度」に 利用されていた指標を参考にします 指標 求め方 読み込み時間 loadEventStart - navigationStart ドキュメントコンテンツ読み込み時間 domContentLoadedEventStart - navigationStart ドキュメントインタラクティブ時間 domInteractive - navigationStart リダイレクト時間 fetchStart - navigationStart ドメインのルックアップ時間 domainLookupEnd - domainLookupStart サーバーの接続時間 connectEnd - connectStart サーバーの応答時間 responseStart - requestStart ページのダウンロード時間 responseEnd - responseStart
7. データの蓄積先は？分析方法は？ 7 Navigation Timing API で取得する指標 は決まったけど、どこに蓄積して分析 すればいいんだろう・・・？
8. Google Analytics に蓄積して分析する 8 • Google Analytics はデータ蓄積と分析UIがある無料ツール • タグマネージャで簡単に設定できる • BigQuery にエクスポートしてSQLで分析が可能（有料） 任意のデータを蓄積できる 入れたデータを分析できる タグマネージャで簡単に設定できる BigQuery にエクスポートできる
9. どうやって設定すればいいの・・・？ 9 Tag Manager と Google Analytics の 設定方法が分からない・・・
10. 設定方法 LTでは時間の関係で駆け足で説明するので 詳しい設定方法は以下のブログ記事に参照してください [GA4] Google Analytics 4 でサイト速度を計測する方法 10 https://techblog.raccoon.ne.jp/archives/1649120272.html
11. タグマネージャ・Analytics(GA4)の設定 11 この部分を設定します
12. カスタムHTMLの作成 12
13. カスタムHTMLの作成 13
14. カスタムHTMLの作成 14 <script> (function() { var y = function(c) { return (isNaN(c) || Infinity == c || 0 > c || 300000 < c) ? 0 : c }; var t, d; if ( (t = window.performance && window.performance.timing) && (d = window.dataLayer) && y(t.loadEventStart - t.navigationStart) > 0 ) { d.push({ 'timing_navigation_start': t.navigationStart, 'timing_page_load': y(t.loadEventStart - t.navigationStart), 'timing_domain_lookup': y(t.domainLookupEnd - t.domainLookupStart), 'timing_server_connection': y(t.connectEnd - t.connectStart), 'timing_server_response': y(t.responseStart - t.requestStart), 'timing_page_download': y(t.responseEnd - t.responseStart), 'timing_redirection': y(t.fetchStart - t.navigationStart), 'timing_document_interactive': y(t.domInteractive - t.navigationStart), 'timing_document_content_loaded': y(t.domContentLoadedEventStart - t.navigationStart), 'event': 'timing' }); } })(); </script> Navigation Timing API で各指標の 値を計算しつつ、データレイヤー 変数にそれぞれセット 最後に timing イベントを発火
15. データレイヤーの変数を追加 15
16. データレイヤーの変数を追加 16 以下の変数を追加します • timing_navigation_start • timing_page_load • timing_domain_lookup • timing_server_connection • timing_server_response • timing_page_download • timing_redirection • timing_document_interactive • timing_document_content_loaded
17. カスタムイベントを作成 17
18. カスタムイベントを作成 18 さきほどの timing イベントを受け取るカスタムイベントを作成し ます
19. Analytics への記録用タグを作成 19
20. Analytics への記録用タグを作成 20 Analytics のイベントパラメータで timing_page_load などを送信 timing イベントトリガーで起動 timing_speed_metrics_sample に 1 を送信
21. Analytics の設定 21
22. Analytics の設定 22 timing_navigation_start（ナビゲーション開始タイムスタンプ） をカスタムディメンションとして追加します Analytics で分析するレコードをできるだけ 1 アクセスに 分離するために利用します
23. Analytics の設定 それ以外の値をカスタム指標として追加します timing_speed_metrics_sample は測定単位を「標準」、 それ以外は「ミリ秒」とします 23
24. 分析する 24 実際の分析方法は・・・・？
25. 25 読み込み速度 サンプル数を 1 とする TOPページで絞り込み 開始タイムスタンプはほぼユニーク なので、ディメンションが分離する Analytics の「探索」画面 データをダウンロードしてExcelで分析 すればサイト速度を把握できます
26. もっと便利で高度な分析 26 もっと便利な方法はない？
27. • 無料で使える Looker Studio（旧 Google データポータル）を Google Analytics と連携して使うと便利です • 私たちは Analytics → BigQuery → Snowflake と 3段階のデータ転送をしています もっと便利で高度な分析 27 Snowflakeでの分析例
28. 28 みなさまご清聴ありがとうございました！