Slide 1

Slide 1 text

Google Analytics で サイト速度を計測する 無料でフロントエンドのパフォーマンス計測 1 株式会社ラクーンホールディングス 技術戦略部 羽山純

Slide 2

Slide 2 text

自己紹介 ● 名前 ○ 羽山 純(Jun Hayama) ○   @forrep ● 所属 ○ 株式会社ラクーンホールディングス 技術戦略部 ● 技術領域 ○ バックエンド・インフラ ○ パフォーマンス改善 ○ AI(企業審査AI) ● 個人活動 ○ アプリ開発 2

Slide 3

Slide 3 text

アジェンダ 3 Webサイトの表示速度を 分析したいなぁ・・・無料で

Slide 4

Slide 4 text

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/

Slide 5

Slide 5 text

タイムスタンプを引き算して利用 5 Zhiheng Wang.(2012-12-17).“Navigation Timing W3C Recommendation 17 December 2012”. W3C.https://www.w3.org/TR/navigation-timing/ 読み込み時間 = loadEventStart - navigationStart 読み込み時間

Slide 6

Slide 6 text

代表的な指標 6 取得できる指標が多すぎても迷うので 古い Analytics(ユニバーサルアナリティクス)の「サイト速度」に 利用されていた指標を参考にします 指標 求め方 読み込み時間 loadEventStart - navigationStart ドキュメントコンテンツ読み込み時間 domContentLoadedEventStart - navigationStart ドキュメントインタラクティブ時間 domInteractive - navigationStart リダイレクト時間 fetchStart - navigationStart ドメインのルックアップ時間 domainLookupEnd - domainLookupStart サーバーの接続時間 connectEnd - connectStart サーバーの応答時間 responseStart - requestStart ページのダウンロード時間 responseEnd - responseStart

Slide 7

Slide 7 text

データの蓄積先は?分析方法は? 7 Navigation Timing API で取得する指標 は決まったけど、どこに蓄積して分析 すればいいんだろう・・・?

Slide 8

Slide 8 text

Google Analytics に蓄積して分析する 8 ● Google Analytics はデータ蓄積と分析UIがある無料ツール ● タグマネージャで簡単に設定できる ● BigQuery にエクスポートしてSQLで分析が可能(有料) 任意のデータを蓄積できる 入れたデータを分析できる タグマネージャで簡単に設定できる BigQuery にエクスポートできる

Slide 9

Slide 9 text

どうやって設定すればいいの・・・? 9 Tag Manager と Google Analytics の 設定方法が分からない・・・

Slide 10

Slide 10 text

設定方法 LTでは時間の関係で駆け足で説明するので 詳しい設定方法は以下のブログ記事に参照してください [GA4] Google Analytics 4 でサイト速度を計測する方法 10 https://techblog.raccoon.ne.jp/archives/1649120272.html

Slide 11

Slide 11 text

タグマネージャ・Analytics(GA4)の設定 11 この部分を設定します

Slide 12

Slide 12 text

カスタムHTMLの作成 12

Slide 13

Slide 13 text

カスタムHTMLの作成 13

Slide 14

Slide 14 text

カスタムHTMLの作成 14 (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' }); } })(); Navigation Timing API で各指標の 値を計算しつつ、データレイヤー 変数にそれぞれセット 最後に timing イベントを発火

Slide 15

Slide 15 text

データレイヤーの変数を追加 15

Slide 16

Slide 16 text

データレイヤーの変数を追加 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

Slide 17

Slide 17 text

カスタムイベントを作成 17

Slide 18

Slide 18 text

カスタムイベントを作成 18 さきほどの timing イベントを受け取るカスタムイベントを作成し ます

Slide 19

Slide 19 text

Analytics への記録用タグを作成 19

Slide 20

Slide 20 text

Analytics への記録用タグを作成 20 Analytics のイベントパラメータで timing_page_load などを送信 timing イベントトリガーで起動 timing_speed_metrics_sample に 1 を送信

Slide 21

Slide 21 text

Analytics の設定 21

Slide 22

Slide 22 text

Analytics の設定 22 timing_navigation_start(ナビゲーション開始タイムスタンプ) をカスタムディメンションとして追加します Analytics で分析するレコードをできるだけ 1 アクセスに 分離するために利用します

Slide 23

Slide 23 text

Analytics の設定 それ以外の値をカスタム指標として追加します timing_speed_metrics_sample は測定単位を「標準」、 それ以外は「ミリ秒」とします 23

Slide 24

Slide 24 text

分析する 24 実際の分析方法は・・・・?

Slide 25

Slide 25 text

25 読み込み速度 サンプル数を 1 とする TOPページで絞り込み 開始タイムスタンプはほぼユニーク なので、ディメンションが分離する Analytics の「探索」画面 データをダウンロードしてExcelで分析 すればサイト速度を把握できます

Slide 26

Slide 26 text

もっと便利で高度な分析 26 もっと便利な方法はない?

Slide 27

Slide 27 text

● 無料で使える Looker Studio(旧 Google データポータル)を Google Analytics と連携して使うと便利です ● 私たちは Analytics → BigQuery → Snowflake と 3段階のデータ転送をしています もっと便利で高度な分析 27 Snowflakeでの分析例

Slide 28

Slide 28 text

28 みなさまご清聴ありがとうございました!