GA4本身并没有提供完整的页面性能报告，因此如果希望分析页面加载的各个阶段，就需要自行采集浏览器性能数据。
本文介绍如何通过GTM调用浏览器 Performance API（Navigation Timing API），采集页面各阶段的加载时间，并发送到GA4。
实现原理说明
页面加载完成后，通过浏览器提供的 Performance API（Navigation Timing API） 获取页面各阶段的性能数据。
随后，JavaScript 会将这些数据推送到 Data Layer：
dataLayer.push({
event: "performance_timing",
page_load_time: ...,
server_response_time: ...,
...
});GTM 监听到performance_timing事件后，再通过GA4事件代码将这些性能指标发送到GA4。
GTM配置步骤
Step 1：在GTM中配置监听代码
在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「自定义HTML」，然后命名为“THML time”，做如下设置：
该代码会在页面加载完成后调用浏览器Performance API，计算各项性能指标，并将结果推送到 Data Layer。
Step 2：建立数据层变量
JavaScript 会向 Data Layer 推送多个性能指标，因此需要在 GTM 中建立对应的数据层变量，包括：
| Data Layer 变量 | 说明 |
|---|---|
| page_load_time | 页面总加载时间 |
| page_download_time | 页面资源下载时间 |
| dns_time | DNS 查询时间 |
| redirect_response_time | Redirect 时间 |
| server_response_time | 服务器响应时间（TTFB） |
| tcp_connect_time | TCP 建立连接时间 |
| dom_interactive_time | DOM 可交互时间 |
| content_load_time | DOM 内容加载完成时间 |
以为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预览调试
配置好后，在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，更容易定位页面性能问题的真正原因，从而制定更有针对性的优化方案。
实践建议 & 注意事项
SPA/前端路由需额外处理
上述方案适用于传统网站
对于 React、Vue、Angular 等 SPA 网站，浏览器只会在首次进入页面时产生 Navigation Timing 数据，后续前端路由切换不会重新生成，因此不会再次触发 performance_timing。
如果需要统计 SPA 页面切换性能，可以结合PerformanceNavigationTiming 或自定义触发
