Next.js集成Google Tag Manager致性能下降，求高效集成方案

GTM拖慢Lighthouse评分的核心原因是它的脚本加载、解析以及附带标签的执行会抢占首屏资源，哪怕用了Next.js的三种加载策略，也得从GTM本身和加载时机两方面入手优化：

• 拆分GTM标签的触发时机
  别把所有标签都绑定到「Page View」触发，把非核心的（比如广告追踪、非必要用户行为分析）改成在用户交互后触发——比如第一次滚动、点击页面，或者等到window.load之后。在GTM后台直接给这类标签设置对应的触发器就行，首屏只跑基础的统计逻辑。

• 调整Next.js中的GTM注入方式
  别在_document.js里硬塞完整代码，改用next/script的lazyOnload策略，同时把初始化逻辑拆分：

  // 放到_app.js里，而非_document.js
  import Script from 'next/script'
  
  function MyApp({ Component, pageProps }) {
    return (
      <>
        <Component {...pageProps} />
        <Script
          id="gtm-main"
          src={`https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX`}
          strategy="lazyOnload"
          onLoad={() => {
            window.dataLayer = window.dataLayer || [];
            window.dataLayer.push({ 'event': 'gtm.js', 'gtm.start': new Date().getTime() });
          }}
        />
      </>
    )
  }
  export default MyApp
  

  至于noscript标签，直接丢到_document.js的body最末尾，完全不影响首屏渲染。

• 瘦身后端GTM容器
  打开GTM后台，删掉没用的标签、触发器和变量，容器体积越小，加载和执行的开销就越低。另外记得开启发布设置里的「容器版本压缩」，能进一步减小传输的代码量。

• 结合Next.js的静态生成能力
  如果是静态页面，用SSG或者ISR提前渲染内容，首屏内容直接输出，GTM脚本就算加载也不会阻塞用户看到页面。动态页面的话，把GTM的非必要逻辑延迟到页面初始化完成后再执行，别和页面渲染抢资源。

• 定位具体性能瓶颈
  用Chrome DevTools的Performance面板看看GTM脚本的加载、解析、执行耗时，到底是哪个标签拖了后腿，针对性优化比盲目调整加载策略有用得多。

内容的提问来源于stack exchange，提问作者Elgun Ezmemmedov