如何解决PageSpeed Insights中第三方代码（GTM/GA）的性能影响问题？

• 延迟加载非关键脚本

  • 把GTM代码从<head>移到</body>标签前，避免阻塞首屏渲染。
  • 给脚本加defer属性，保证DOM加载完再执行，不阻塞页面解析：

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

  • 要是通过GTM加载GA，把触发条件改成“DOM Ready”，别用默认的“Page View”，推迟初始化时机。

• 启用GTM的延迟加载功能

  • 进GTM容器设置，打开“延迟加载容器”，让GTM在浏览器空闲时加载非必要标签，降低首屏资源占用。
  • 给GA标签设置低优先级，比如滚动、点击这类非核心事件跟踪，让首屏先处理核心代码。

• 精简GTM里的冗余标签

  • 清理GTM中重复或没用的GA跟踪代码，避免重复请求资源。
  • 把多个GA配置合并到一个标签里，减少HTTP请求次数。

• 改用轻量化GA代码

  • 要是不需要GTM的复杂管理，直接用精简版GA代码，去掉GTM容器的额外开销：

    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'GA-XXXXXX', { send_page_view: false });
      // DOM加载完成后手动发送页面视图
      document.addEventListener('DOMContentLoaded', () => {
        gtag('event', 'page_view');
      });
    </script>
    

  • 关闭自动页面视图，手动选合适时机触发，避免首屏网络请求阻塞。

• 利用浏览器空闲时机加载

  • 用requestIdleCallback让脚本在浏览器空闲时加载，降级情况就等页面加载完再执行：

    if ('requestIdleCallback' in window) {
      requestIdleCallback(() => {
        const script = document.createElement('script');
        script.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX';
        document.body.appendChild(script);
      });
    } else {
      window.addEventListener('load', () => {
        const script = document.createElement('script');
        script.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX';
        document.body.appendChild(script);
      });
    }
    

内容的提问来源于stack exchange，提问作者Parthiban Natesan