NextJS afterInteractive仍然根据PageSpeedInsights阻止加载

2w2cym1i  于 2023-05-22  发布在  其他
关注(0)|答案(1)|浏览(141)

我有一个nextjs应用程序,在_app.js文件中,我根据nextjs文档导入Google Tag Manager:

<Script
       id="googleAnalytics0"
       src="https://www.googletagmanager.com/gtag/js?id=XXX"
       strategy="lazyOnload"
      />
      <Script
       id="googleAnalytics"
       strategy="lazyOnload"
       dangerouslySetInnerHTML={{
         __html: `
           window.dataLayer = window.dataLayer || [];
           function gtag(){window.dataLayer.push(arguments);}
           gtag('js', new Date());

           gtag('config', 'XXX');
         `
       }}
      ></Script>

当我做一个内置在chrome中的灯塔测试时,没有任何问题-然而当我做一个Page speed insights测试时,它说google标签管理器阻止了加载。

我试过将strategy=“lazyOnload”改为strategy=“afterInteractive”,但这并没有什么区别。

sgtfey8w

sgtfey8w1#

Google Tag Manager(和Google Analytics)将始终在主线程上运行,因此它将始终在Google Page Speed中引发“主线程阻塞时间”。
Next.js Script标记的strategy属性只改变加载这些脚本的时间。有关详细概述,您可以在浏览器的开发人员工具中使用Performance tab
我写了一篇关于如何在Next.js here中实现GTM和GA的博客文章
如果你在GTM容器中设置了多个标签,你应该密切关注你的网站的性能,多个标签会很快消耗掉你的核心网站的性能。您可以使用GTM服务器端跟踪来解决这个问题。
有关更多信息,请参阅这些链接:

相关问题