Next.js引入GTM脚本触发PageSpeed未使用JavaScript告警如何解决

该告警触发的原因是GTM脚本在首屏加载时就被请求执行，但其中大部分追踪逻辑在首屏阶段并未运行，被PageSpeed判定为未使用的冗余JS。

• 用Next.js官方Script组件替换原生script标签，配置懒加载策略
  Next.js内置的next/script组件支持多种加载优先级，将加载策略设为lazyOnload可以让GTM脚本在浏览器空闲时再加载，不会阻塞首屏渲染，也不会被计入首屏未使用的JS体积。
  参考代码示例：

// pages/_app.js
import Script from 'next/script'
import Head from 'next/head'

export default function App({ Component, pageProps }) {
  return (
    <>
      <Head>
        {/* 其他站点头部配置 */}
      </Head>
      {/* GTM脚本配置 */}
      <Script
        id="gtm-init"
        strategy="lazyOnload"
        dangerouslySetInnerHTML={{
          __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-xxxxxx');`
        }}
      />
      <Component {...pageProps} />
    </>
  )
}

• 配合Partytown隔离第三方脚本运行
  Partytown可将GTM这类第三方脚本转移到Web Worker线程中运行，不占用主线程资源，同时不会把第三方JS的体积计入主线程的未使用JS统计，性能提升效果更明显，配置后仅需将Script组件的strategy参数调整为worker即可。

• 按需触发GTM加载
  如果站点设有Cookie授权弹窗，可将GTM的加载逻辑延后到用户同意追踪授权后再执行，首屏加载时完全不会请求GTM相关资源，自然不会触发该类告警。

• 清理GTM容器内冗余配置
  多数情况下GTM脚本体积过大是因为容器内残留了大量不再使用的标签、触发器、变量，定期清理无用配置可以缩小GTM脚本的实际体积，降低未使用代码的占比。

内容的提问来源于stack exchange，提问作者studio-pj