如何解决PSI提示的Google Tag Manager主线程阻塞问题

• GTM加载时机与方式问题：默认嵌入的GTM代码如果是同步加载（放在<head>且无async/defer属性），会直接阻塞主线程解析HTML，两个标签同时触发时，脚本请求、解析、执行的开销会叠加，拉长主线程阻塞时间。
• 标签资源冗余或体积过大：你提到的两个Google标签可能加载了重复的依赖脚本（比如重复引入GA4核心库），或者本身包含不必要的功能模块，导致传输和解析耗时增加。
• 触发条件不合理：如果两个标签都设置为“页面视图”触发，会在页面最繁忙的初始渲染阶段集中执行，进一步挤占主线程资源，加重阻塞。
• 未启用GTM内置优化选项：GTM后台有不少优化设置（比如延迟加载、标签优先级），可能你没找到对应的入口，导致默认的未优化配置拖慢性能。

调整GTM加载方式 #

• 把GTM脚本移到<body>末尾，并添加async或defer属性：

  <script async src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXX"></script>
  

  async让脚本异步下载，下载完成后立即执行；defer则等HTML解析完成后再按顺序执行，适合有依赖关系的标签。
• 开启GTM容器的延迟加载：进入GTM后台，打开容器设置，找到标签加载选项，将非核心标签设置为“延迟加载”（比如页面加载完成后2-5秒触发），避免和页面初始渲染抢资源。

优化标签触发逻辑 #

• 调整触发时机：把两个标签的触发条件从“页面视图”改为“DOM就绪”或“窗口加载完成”，让标签在主线程空闲时执行。
• 合并重复资源：检查两个标签是否加载了相同的脚本（比如都引入了GA4），删除重复的，只保留一个全局加载的标签，减少重复请求。

精简标签内容 #

• 清理冗余标签与变量：删除两个标签中不必要的自定义变量、触发器，或者禁用非核心功能（比如某些非必需的广告跟踪）。
• 使用官方精简模板：优先选择GTM提供的官方标签模板（比如GA4、Google Ads的官方模板），这类模板经过性能优化，比自定义脚本体积更小、执行效率更高。

补充浏览器端优化 #

• 配置缓存策略：确保你的服务器对GTM的gtm.js脚本设置了合理的缓存头（比如Cache-Control: max-age=86400），让浏览器缓存脚本，减少重复下载的开销。

内容的提问来源于stack exchange，提问作者Allisa Jacobs