2019.09.28 補充 GA 使用者載入時間 報表。
2019.10.10 更新 完整的埋 User Timings 程式碼 部份。
用戶計時（User Timings）功能很少聽到，但很實用
一般會聽到 GA 的功能，大部份就是瀏覽量、事件、目標之類的。即便 Google Analytics 有個 網站速度 報表，卻也比較少在用工作上有用到，因為有蠻多工具可以代替的，像是 Google 自家就有的 PageSpeed Insights、Compare your mobile site speed，網路上搜尋就會出現很多測試頁面速度的工具。
最近發現 Firebase Performance 也有記錄加載速度的功能，值得一試，可參考這篇：
會知道 GA 還有個 用戶計時 的功能，是在寫「GA Debugger 介紹」這篇時看到的，它的功能包含了 User Timings，看到這行才發現 GA 還有這功能，這幾天就來試一下。
它的埋碼簡單，基本上就是寫 GA 事件，但報表呈現的資料很豐富，雖然不像一般的測速工具會顯示從 Request 到 Response 之前每一個階段的速度（其實很多都不知道什麼意思），但 GA User Timings 除了基本的顯示載入時間要多久外，還有以下優點：
記錄每個區間的比例
比方 1-5 秒讀完的有多少人、5-10 秒讀完的有多少人，如下圖：
記錄每個地區平均的讀取時間
比如台灣的平均載入多久、香港的多久等等，也可以再往下一層看是城市的讀取時間，如下圖：
搭配次要維度可再細分
GA 有個很厲害的就是次要維度，把資料再用更多種方式去呈現，比方載入時間搭配 小時 這個次要維度，就可以看見哪一個時間點的載入時間最久，如下圖：
可以看到 17 點時載入時間最久，有可能是那時系統正在更新，或是是一般人上網的巔峰時間，造成讀取時間較其它時段長。
以上 3 點是實作後看到的優點，下面筆記到看報表時會再補充。
埋 User Timings 程式碼
要使用 Google Analytics 的「使用者載入時間」報表，不用再另外開什麼功能，只需要發送 GA事 件就好。關於 GA 事件的介紹可參考這篇：Google Analytics 事件追蹤設定
User Timings 的事件，官方文件的 code 如下：
gtag('event', 'timing_complete', {
'name': 'load',
'value': 3549,
'event_category': 'JS Dependencies',
'event_label': 'Google CDN'
});timing_complete
這是事件動作，不能改變，一定要是 timing_complete。
name
計時變數，必填，因為計時的方式是用 Performance API，如果對這個 API 很了解的高手，可以用不同的 API 設定不同的變量。一般使用時就直接填官方給的示範「load」就行，
value
時間，必填，單位是毫秒，1000 毫秒 = 1 秒。要注意的是 value 不能有小數點，一定要是整數。
value 的值不是寫死的，是由 JavaScript 去抓的，文件中提供的 code 如下：
// 支援Performance API才執行
if (window.performance) {
// performance.now()：頁面從最開始加載到目前為止的時間
// Math.round：四捨五入取整數
var timeSincePageLoad = Math.round(performance.now());
gtag('event', 'timing_complete', {
'name': 'load',
'value': timeSincePageLoad,
'event_category': 'JS Dependencies'
});
}用 performance.now() 去取得頁面開始載入，一直到載入到這行 code 的時間。
用 GTM 埋碼的話，只需要在觸發條件中選擇「視窗已載入」就行。自己寫 code 的話就寫在 window.load 裡就行。這樣就會是抓頁面整個載入完成的時間。
event_category、event_label
載入時間類別（category）、計時標籤（label），非必填，不過地位就跟 GA 事件的類別、標籤一樣，所以建議是必填。
完整的埋 User Timings 程式碼
附上 August 埋碼的程式碼，跟下一段看報表有關，可以參考：
GA 使用者載入時間 報表
埋完 User Timings 的程式碼後，GA 就會開始收集傳來的資料，過幾天就可以在 GA 後台上看到。
報表的位置在：行為 -> 網站速度 -> 使用者載入時間。
一點進使用者載入時間報表，會先看到樣本數，以及平均的載入時間：
主要維度頁籤預設的是類別，也可以點變數跟標籤，以下點擊標籤：
August 設定抓的標籤值是頁面路徑，所以呈現的就是各頁的載入時間，可以看到讀取時間最久的是「Google Maps API學習筆記-5：抓目前位置、計算到各點距離」這篇，載入時間至少是其它頁面的 2 倍。
再點次要維度去查原因，樣本數 5 筆中，有 2 筆來自美國，1 筆來自大陸，不知道是不是主機在新加坡的原因，還是有什麼其它原因，來自這兩個國家的讀取時間都過 20 秒以上：
除了基本的數據，GA 上還有另外 2 個大頁籤，報表頁面上方可以看到：
分布情況
分布情況是每個時間的區間整理，如下圖：
可以看見載入時間 1-5 秒的佔了一半以上。
訪客分佈圖
訪客分佈圖就是按地理位置區分，會秀出世界地以及報表：
世界地圖的部份除了顯示載入時間，也可以切換成樣本取樣數分布。
報表部份除了國家，也可以再切成更細的城市。
筆記後心得
Google Analytics 的使用者速度報表，就埋一個簡單的事件，便可以看到很多系統整理出的資訊。這些資訊可以給開發人員、網站維運人員來使用。
畢竟在 SEO 上，速度是一項很重要的評分，多多了解維運站的速度，更進階的是去了解問題點以及改善，可以對 SEO 有幫助。
參考資源
