如何在 GA4 中跟踪页面加载时间（Page Load Time）

GA4默认并不会提供页面加载时间（Page Load Time）报告。如果希望分析网站加载速度，需要自行采集浏览器的性能数据，并发送到 GA4。

常见有两种实现方式：

• 增加事件参数：在默认的page_view事件中增加一个page_load_time参数
• 发送独立事件：发送一个独立page_load_time事件

两种方式都基于浏览器 Performance API（Navigation Timing API） 获取页面性能数据，只是发送到GA4的方式不同。

方法一：增加事件参数

对于大多数网站而言，只需要知道每个页面平均加载需要多久，并不需要分析具体是DNS、服务器还是浏览器渲染导致变慢。

这种情况下，建议直接把页面加载时间作为page_view的事件参数发送到GA4。

原理和注意点

原理：页面加载完成后，通过浏览器 Performance API 获取页面加载时间，并将结果作为自定义事件参数 page_load_time 附加到默认的 page_view 事件。

这种方式最大的优点是不会额外产生GA4请求，只是在原有的page_view事件中附带一个事件参数，因此更加轻量，也更推荐。

注意事项：

• 触发器必须使用 Window Loaded：由于页面加载时间只有在页面完全加载完成之后才能准确获取，因此page_view事件的触发器不能继续使用默认的 Page View，而应改为 Window Loaded。只有到 Window Loaded 时，浏览器才基本完成页面资源加载，此时才能正确读取页面加载时间。
• 不要提前发送事件：有事件比page_view提前发送可能会会导致归因异常

Step 1：建立自定义JavaScript变量

在GTM里新建一个自定义JavaScript变量，做如下设置：

下面的代码通过浏览器 Performance Navigation Timing API 获取页面加载时间。

源码：

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;
 }
}

Step 2：在page_view中增加事件参数

打开默认的GA4 Page View Tag（或Google Tag的page_view事件），新增一个事件参数page_load_time：

这样，每次 page_view 都会自动携带页面加载时间。

Step 3：修改触发器

将默认的触发器页面浏览改为基于窗口已加载：

这样可以保证 page_load_time 能够正确取得。

Step 4：预览调试

然后再GTM里预览调试，page_load_time=4.43，表示该页面加载耗时约 4.43 秒。：

Step 5：GA4中注册事件参数

在GA4中点击「管理」——「自定义设置」——「自定义指标」——「创建自定义指标」，然后做如下配置：

这样就可以。

Step 6： 数据验证

收集一些数据后，就可以在探索里用自由表格去验证：

还可以进一步通过计算指标计算Page Load Time平均值。

方法二：发送独立事件

原理和注意点

如果希望进一步分析页面为什么变慢，仅知道总加载时间是不够的。

可以在页面加载完成后，通过浏览器 Performance API（Navigation Timing API） 获取多个性能指标，并发送一个独立的 performance_timing 事件到 GA4。

例如：

• Page Load Time（页面总加载时间）
• DNS Time（DNS 查询时间）
• TCP Connect Time（TCP 建立连接时间）
• Server Response Time（服务器响应时间，TTFB）
• Page Download Time（页面下载时间）
• DOM Interactive Time（DOM 可交互时间）
• Content Load Time（DOM 内容加载完成时间）

相比第一种方案，这种方式能够更准确地判断页面性能瓶颈，例如是服务器响应过慢、DNS 查询耗时，还是浏览器渲染速度较慢。

需要注意的是，由于会额外发送一个performance_timing事件，因此每次页面浏览都会增加一次GA4请求。对于流量较大的网站，需要考虑GA4事件数量增加而导致的抽样。

Step 1：建立监听页面性能代码

在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「自定义HTML」，然后命名为“THML time”，做如下设置：

该代码会在页面加载完成后调用浏览器Performance API，计算各项性能指标，并将结果推送到 Data Layer。

<script>
(function() {

    var siteSpeedSampleRate = 100;
    var gaCookiename = '_ga';
    var dataLayerName = 'dataLayer';

    // No need to edit anything after this line
    var shouldItBeTracked = function(siteSpeedSampleRate) {
        // If we don't pass a sample rate, default value is 1
        if (!siteSpeedSampleRate)
            siteSpeedSampleRate = 1;
        // Generate a hashId from a String
        var hashId = function(a) {
            var b = 1, c;
            if (a)
                for (b = 0,
                c = a.length - 1; 0 <= c; c--) {
                    var d = a.charCodeAt(c);
                    b = (b << 6 & 268435455) + d + (d << 14); d = b & 266338304; b = 0 != d ? b ^ d >> 21 : b
                }
            return b
        }
        var clientId = ('; ' + document.cookie).split('; '+gaCookiename+'=').pop().split(';').shift().split(/GA1\.[0-9]\./)[1];
        if(!clientId) return !1;
        // If, for any reason the sample speed rate is higher than 100, let's keep it to a 100 max value
        var b = Math.min(siteSpeedSampleRate, 100);        
        return hashId(clientId) % 100 >= b ? !1 : !0
    }

    if (shouldItBeTracked(siteSpeedSampleRate)) {
        var pt = window.performance || window.webkitPerformance;
        pt = pt && pt.timing;
        if (!pt)
            return;
        if (pt.navigationStart === 0 || pt.loadEventStart === 0)
            return;
        var timingData = {
            "page_load_time": pt.loadEventStart - pt.navigationStart,
            "page_download_time": pt.responseEnd - pt.responseStart,
            "dns_time": pt.domainLookupEnd - pt.domainLookupStart,
            "redirect_response_time": pt.fetchStart - pt.navigationStart,
            "server_response_time": pt.responseStart - pt.requestStart,
            "tcp_connect_time": pt.connectEnd - pt.connectStart,
            "dom_interactive_time": pt.domInteractive - pt.navigationStart,
            "content_load_time": pt.domContentLoadedEventStart - pt.navigationStart
        };
        // Sanity Checks if any value is negative abort
        if (Object.values(timingData).filter(function(e) {
            if (e < 0) return e; }).length > 0)
            return;
        window[dataLayerName] && window[dataLayerName].push({
            "event": "performance_timing",
            "timing": timingData
        })
    }
}
)() 
</script>    

Step 2：建立数据层变量

JavaScript 会向 Data Layer 推送多个性能指标，因此需要在 GTM 中建立对应的数据层变量，包括：

以为page_load_time为例，在GTM中点击「变量」——「新建」——「选择一个变量类型以开始设置…」——「数据层变量」，然后命名为“page_load_time”，做如下设置：

同理配置其他几个数据层变量：

Step 3：建立触发器

JavaScript 推送数据时，会发送一个自定义事件performance_timing，需要建议一个自定义事件触发器。

在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置…」——「自定义事件」，然后命名为“performance_timing”，做如下设置：

Step 4：配置GA4事件

最后就是配置GA4事件。

在GTM中点击「变量」——「新建」——「选择一个代码类型以开始设置…」——「Google Analytics（分析）：GA4 事件」，然后命名为“GA Page performance_timing”，做如下设置：

Step 5：预览调试

配置好后，在GTM上预览调试，调试没问题就可以发布出去收集数据。

Step 6：GA4中注册事件参数

事件参数里的所有参数都需要在GA4里注册，才可以使用。

以page_load_time为例，在GA4中点击「管理」——「自定义设置」——「自定义指标」——「创建自定义维度」，然后做如下设置：

需要注意，这里的衡量单位是毫秒。

同理注册其他的事件参数即可。

Step 7：数据验证

可以在探索里查看数据：

这里的单位是毫秒，数值是加总的，如果要看页面平均时间是多少秒，需要用总时间除以事件数，再除以1000。

这样便可以快速找出加载速度较慢的页面，并进一步分析性能瓶颈。例如：

• DNS Time 偏高：可能需要优化 DNS 服务或启用 DNS Prefetch。
• Server Response Time 偏高：说明服务器响应速度较慢，可优化数据库、缓存或应用程序。
• TCP Connect Time 偏高：可能受网络延迟或 TLS 握手影响。
• Page Download Time 偏高：建议压缩资源、启用 CDN、减少资源体积。
• DOM Interactive Time 或 Content Load Time 偏高：通常与大量 JavaScript 执行、第三方脚本或复杂页面渲染有关。

通过分别分析各项性能指标，相比单纯查看 Page Load Time，更容易定位页面性能问题的真正原因，从而制定更有针对性的优化方案。

两种方案如何选择？

对于绝大多数网站，如果只是想监控页面加载速度，推荐使用第一种方案，因为实现简单、不会增加额外请求。

如果需要分析页面慢在哪里，例如服务器响应、DNS、资源下载或浏览器渲染等不同阶段的耗时，则建议采用第二种方案，也是本文接下来介绍的方法。