这一篇介绍如何通过Google Tag Manager（GTM）采集页面在浏览器中的各阶段性能时间，并将这些数据发送到Google Analytics 4（GA4），用于分析网站性能、服务器响应以及页面加载体验，排查服务器、CDN、爬虫、跨区域访问问题非常有价值。
这套方案直接读取浏览器 Performance API，更灵活，也更适合做深度分析或自定义对比。
实现原理说明
整体原理可以分成三步：
- 页面加载完成后
- 通过浏览器Performance API获取各阶段耗时
- 将结果写入DataLayer → GTM触发 → 发送到GA4
GTM配置步骤
Step 1：在GTM中配置监听代码（自定义 HTML）
在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「自定义HTML」，然后命名为“THML time”，做如下设置：
这段代码的作用是页面加载的时候，从浏览器获取页面加载时间数据。
<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：配置数据层变量（Data Layer Variable）
需要为每一个时间字段创建数据层变量。
数据层变量有 page_load_time、page_download_time、dns_time、redirect_response_time、server_response_time、tcp_connect_time、dom_interactive_time、content_load_time
以为page_load_time为例，在GTM中点击「变量」——「新建」——「选择一个变量类型以开始设置…」——「数据层变量」，然后命名为“page_load_time”，做如下设置：
同理配置其他几个数据层变量：
Step 3：配置触发器（自定义事件）
自定义事件只要一个，是performance_timing
在GTM中点击「触发器」——「新建」——「选择一个触发器类型以开始设置…」——「自定义事件」，然后命名为“performance_timing”，做如下设置：
Step 4：配置GA4事件代码
最后就是配置GA4事件，在GTM中点击「变量」——「新建」——「选择一个代码类型以开始设置…」——「Google Analytics（分析）：GA4 事件」，然后命名为“GA Page performance_timing”，做如下设置：
事件名称命名为“performance_timing”，事件参数都是数据层变量里的。
Step 5：GTM预览调试
配置好后，在GTM上预览调试，确认无误后即可发布。
GA4中注册事件参数（非常重要）
GA4默认不会保存所有事件参数，必须手动注册才可以使用。
以page_load_time为例，在GA4中点击「管理」——「自定义设置」——「自定义指标」——「创建自定义维度」，然后做如下设置：
需要注意，这里的衡量单位是毫秒。
同理注册其他的事件参数即可。
数据查看与分析方式
可以在探索里查看数据：
这里的单位是毫秒，数值是加总的，如果要看页面平均时间是多少秒，需要用总时间除以事件数，再除以1000。
实践建议 & 注意事项
SPA/前端路由需额外处理
performance.timing 只在完整页面加载时有效，SPA页面切换不会重新触发
如需支持SPA，需要配合 PerformanceNavigationTiming 或自定义触发
有疑问可以在底部留言
