Google 标签管理器对网络性能的影响（加载时间）

Question

我正在努力改善我网站的加载时间和性能。总而言之，这是我在不包括 Google 标签管理器的情况下获得的平均加载时间统计数据。

然而，当我只包含 Google 跟踪代码管理器时，下面的代码就在我的页面底部在结束正文标签上方，我可以看到对性能的相关影响，例如：

<script async defer src="https://www.googletagmanager.com/gtag/js?id=myappid"></script>
    <script>
      var gaEnv;
      switch (window.location.hostname) {
        case 'production-domain':
            gaEnv = 'production-id'; // production
            break;
        default:
            gaEnv = 'development-id'; // development
      }
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      // Config for analytics
      gtag('config', gaEnv, { 'send_page_view': false });
      // Config for Adwords   
      gtag('config', 'adwords-id');
    </script>

我已经阅读了很多关于如何使用 async 和 defer 属性提高这些脚本性能的博文，但很明显这些仍然对性能有重要影响（负载超过 2 秒时间和完成时间 1 秒）。

有什么我想念的或可以做的吗？

Answer 1

Google 标签管理器给网站增加了性能瓶颈。产品经理喜欢 GTM，因为当 adding/updating/removing 营销和网站的其他 javascript 层时，工作流程很简单。

您可以做的第一件事是在 <head> 标签中预加载 GTM 库。

<link href="https://www.googletagmanager.com/gtag/js?id=myappid" rel="preload" as="script">

您还可以添加 dns-prefetch

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

第二个也是最重要的一点是不要弄乱 GTM 中的标签。您必须仔细制作 GTM 中的标签。

例如

从 GTM 中删除不必要的标签
将很少更新的永久标签移至html代码本身。
优化从 GTM

Answer 2

如果人们仍在寻找提高 GTM 性能的方法，可以使用这个名为 Partytown 的超酷插件，它可以将您的第三方脚本放入 web worker 中，并从您的主线程中移除繁重的负载。结果，它大大提高了性能。

Google 标签管理器对网络性能的影响（加载时间）

Google Tag manager impact in web performance (load time)

performance

google-tag-manager

web-performance