更新時間：2026年6月2號
本篇將介紹如何在 Google Analytics 4（GA4）中追蹤網頁載入速度（Page Load Time）。
一般來說，在GA4中追蹤頁面載入時間有兩種做法：
- 方法一：使用獨立事件追蹤：當網頁完成載入後，額外發送一個事件至GA4，並將頁面載入時間作為事件參數傳送。
- 優點： 設定方式較直觀，可獨立分析頁面效能資料
- 缺點： 每次頁面瀏覽都會額外發送一次GA4請求，增加資料收集量與事件數量
- 方法二：將載入速度整合至page_view事件：透過自訂 JavaScript 取得瀏覽器提供的效能資料（Performance API），並將頁面載入時間作為事件參數附加到 page_view 事件中，一起送往 GA4。
- 優點： 不需額外發送事件，不會增加GA4請求數量，實作較有效率
- 缺點： 設定方式稍微複雜一些
本篇將介紹第二種做法。
在開始設定之前，有兩個重要觀念需要先了解：
- 觸發條件必須使用「視窗已載入（Window Loaded）」：不要使用「網頁瀏覽（Page View）」作為觸發條件。原因是當 Page View 觸發時，網頁資源可能尚未完全載入，此時無法正確取得頁面載入時間，因此容易出現空值或不準確的數據。瀏覽觸發條件的優先順序如下：同意聲明初始化>初始化>網頁瀏覽（也叫容器已載入）>DOM就緒>視窗已載入，因此，若要取得完整的頁面載入時間，應選擇最後執行的「視窗已載入」。延伸閱讀：深入認識GTM中網頁瀏覽觸發條件：Dom就緒、網頁瀏覽和視窗已加載 和GTM 入門介紹——認識觸發條件。
- 窗口已載入之前不要觸發事件：如果事件比PageView更快觸發，可能會影響 GA4 的流量來源歸因（Attribution）。
接下來看具體設定過程：
步驟一：建立Page Load Time變數
在GTM裡新建一個自訂JavaScript的變數，這個變數的作用是通過瀏覽器API獲取網頁加載速度。
在GA4裡點擊「變數」——「新增」——「請選擇變數類型以開始設定…」——「自訂 JavaScript」，命名為“Page Load Time”，如：
Source Code：
function(){
var timing = performance.getEntriesByType('navigation')[0] || performance.timing;
var load_time = ((timing.loadEventStart-timing.fetchStart)/1000).toFixed(2);
if(load_time>0){
return load_time;
}
}
上述程式碼透過瀏覽器的 Navigation Timing API 取得頁面載入時間，計算方式如下：
loadEventStart - fetchStart代表從瀏覽器開始請求頁面，到頁面完成載入（Load Event）之間所花費的時間。
最後將結果轉換為秒數（Seconds），並保留兩位小數。
步驟二：修改默認網頁瀏覽追蹤
找到GA4默認網頁瀏覽的代碼，接著在「共用事件設定（Shared Event Settings）」中新增一個事件參數：
然後將這個代碼的觸發條件改為窗口已載入：
步驟三：預覽測試
完成設定後，進入 GTM 預覽模式（Preview）進行測試：
可以看到，事件參數page_load_time追蹤到網頁加載速度。
步驟四：在GA4建立自訂指標
由於page_load_time屬於自訂事件參數，因此需要在GA4中註冊成自訂指標。
在GA4中點擊「管理」——「自訂定義」——「自訂指標」——「建立自訂指標」，然後做如下設定：
這樣就可以。
步驟五：資料驗證與分析
等待資料累積一段時間後，可以前往「探索（Explore）」進行驗證與分析：
這裡的Page Load Time是多個網頁加總，如果要看平均的，可以用計算指標，公式是{Page Load Time}/{事件數}，報表如：
你可以知道每個網頁的平均加載時間了。
結語
透過GTM的自訂JavaScript與瀏覽器Performance API，我們可以在不增加額外GA4事件請求的情況下，將頁面載入時間直接整合到page_view事件中。
相較於額外發送獨立事件的做法，這種方式具有以下優勢：
- 不增加GA4請求數量
- 不增加事件量
- 可直接搭配頁面維度分析
- 適合大部分內容網站與電商網站使用
若後續需要進一步分析網站效能，也可以搭配Core Web Vitals（LCP、INP、CLS）等指標一併追蹤，建立更完整的網站效能監測機制。