Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

forrep

May 26, 2024
Tweet

More Decks by forrep

Other Decks in Programming

Transcript

  1. 自己紹介 • 名前 ◦ 羽山 純(Jun Hayama) ◦   @forrep •

    所属 ◦ 株式会社ラクーンホールディングス 技術戦略部 • 技術領域 ◦ バックエンド・インフラ ◦ パフォーマンス改善 ◦ AI(企業審査AI) • 個人活動 ◦ アプリ開発 2
  2. 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/
  3. タイムスタンプを引き算して利用 5 Zhiheng Wang.(2012-12-17).“Navigation Timing W3C Recommendation 17 December 2012”.

    W3C.https://www.w3.org/TR/navigation-timing/ 読み込み時間 = loadEventStart - navigationStart 読み込み時間
  4. 代表的な指標 6 取得できる指標が多すぎても迷うので 古い Analytics(ユニバーサルアナリティクス)の「サイト速度」に 利用されていた指標を参考にします 指標 求め方 読み込み時間 loadEventStart

    - navigationStart ドキュメントコンテンツ読み込み時間 domContentLoadedEventStart - navigationStart ドキュメントインタラクティブ時間 domInteractive - navigationStart リダイレクト時間 fetchStart - navigationStart ドメインのルックアップ時間 domainLookupEnd - domainLookupStart サーバーの接続時間 connectEnd - connectStart サーバーの応答時間 responseStart - requestStart ページのダウンロード時間 responseEnd - responseStart
  5. Google Analytics に蓄積して分析する 8 • Google Analytics はデータ蓄積と分析UIがある無料ツール • タグマネージャで簡単に設定できる

    • BigQuery にエクスポートしてSQLで分析が可能(有料) 任意のデータを蓄積できる 入れたデータを分析できる タグマネージャで簡単に設定できる BigQuery にエクスポートできる
  6. カスタム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 イベントを発火
  7. データレイヤーの変数を追加 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
  8. • 無料で使える Looker Studio(旧 Google データポータル)を Google Analytics と連携して使うと便利です •

    私たちは Analytics → BigQuery → Snowflake と 3段階のデータ転送をしています もっと便利で高度な分析 27 Snowflakeでの分析例