NextJs集成GTM致Lighthouse性能下降的高效集成方案咨询

你当前的实现方式存在多个明显的性能问题，是导致分数从96掉到38的核心原因：

• 同时给gtag脚本添加async和defer属性，两个属性的加载逻辑冲突，浏览器不会按预期延迟执行脚本，首屏解析阶段就会拉取GTM资源阻塞渲染
• 脚本直接放在_document.tsx的Head标签内，默认加载优先级和页面核心资源一致，挤占首屏带宽、主线程资源，拖慢LCP、FCP等核心性能指标
• 初始化时立刻触发config上报，会连带拉取GTM容器内配置的所有第三方跟踪脚本，首屏阶段额外增加大量JS执行、网络请求开销
• 你当前写的是GA4 gtag直连逻辑，没有做加载时机控制，冗余执行逻辑多

低性能损耗的GTM集成实现 #

核心思路是把GTM的加载时机延后到首屏核心内容渲染完成后，完全不阻塞首屏关键路径，具体实现如下：

1. 调整加载位置与时机 #

不要把GTM脚本放在_document.tsx的Head中，改到_app.tsx（Pages Router）或者根布局的客户端组件（App Router）中，通过useEffect在页面完全加载后再动态注入脚本：

// Pages Router 写在 _app.tsx，App Router 写在根layout的客户端组件中
import { useEffect } from 'react'
import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    const GTM_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS
    if (!GTM_ID) return

    const initGTM = () => {
      // 初始化dataLayer队列
      window.dataLayer = window.dataLayer || []
      function gtag(...args: any[]) {
        window.dataLayer.push(args)
      }
      window.gtag = gtag

      gtag('js', new Date())
      // 延后2秒再执行配置和页面上报，避免抢占首屏资源
      setTimeout(() => {
        gtag('config', GTM_ID, {
          page_path: window.location.pathname,
          send_page_view: false // 关闭默认自动上报，避免重复触发
        })
        // 页面稳定后手动上报page_view
        gtag('event', 'page_view', {
          page_path: window.location.pathname
        })
      }, 2000)

      // 动态插入脚本，设置最低加载优先级
      const script = document.createElement('script')
      script.src = `https://www.googletagmanager.com/gtag/js?id=${GTM_ID}`
      script.async = true
      script.fetchPriority = 'low'
      document.head.appendChild(script)
    }

    // 等页面所有核心资源加载完成后再初始化GTM
    if (document.readyState === 'complete') {
      initGTM()
    } else {
      window.addEventListener('load', initGTM, { once: true })
    }
  }, [])

  return <Component {...pageProps} />
}

2. 提前做网络预连接优化 #

在_document.tsx的Head中添加预连接提示，减少后续GTM资源拉取的网络握手耗时，这两个标签不会阻塞页面渲染：

<link rel="dns-prefetch" href="https://www.googletagmanager.com" />
<link rel="preconnect" href="https://www.googletagmanager.com" crossOrigin="anonymous" />

3. 进阶优化手段 #

• 清理GTM容器内闲置的标签、触发器、变量，每个未使用的配置都会增加额外的JS执行开销
• 有条件的话部署GTM服务端容器，把所有第三方跟踪请求转发到自有服务端处理，浏览器端仅需发送一次请求到自有域名，能把GTM的性能影响降到趋近于0
• 路由切换时的页面浏览上报不要用GTM默认的自动触发，手动在路由切换完成后延迟上报，避免路由跳转时抢占主线程资源

按上述方案调整后，GTM的加载完全不会占用首屏关键路径的资源，Lighthouse性能得分基本可以回到集成前的水平，分数波动不会超过3分。

内容的提问来源于stack exchange，提问作者Anamol Haque