Google 跟踪代码管理器和页面加载性能：它是否会降低 PageSpeed Insights 的性能？

Question

我知道这可能看起来有点模糊，但我将提供更多背景信息：在我工作的公司中，我们使用（我个人的想法是我们滥用）Google Tag Manager (GTM)来注入一些第三方GTM 标签内的脚本。大多数情况下，我们使用它来操作某些页面模板（例如产品页面）中的 DOM 并注入第三方脚本（例如 Zopim 聊天、Facebook Pixel 等\xe2\x80\xa6）。

\n\n

DOMContentLoaded我们通常做的事情是：在页面加载时和/或事件发生时操纵 DOM load，因此对我来说，显然如果没有这些 GTM 标签，我们的网站将在PageSpeed Insights和Chrome DevTools\' Lighthouse中获得更好的分数。如果没有激活 GTM 标签，我无法测试该网站，因为它已经在网站中随处可见。

\n\n

这种 GTM 的使用对我们网站的速度有多大影响？

\n

Answer 1

您可以通过几种不同的方式来了解 GTM 和第三方标签的性能影响。

通过开发人员工具
您可以阻止gtm.js浏览器开发人员工具。这将阻止加载 Google 标签管理器和相关标签。您可以在此处了解有关该功能的更多信息。完成此操作后，您可以从浏览器运行 Google Lighthouse，以查看您的分数如何提高。

通过Webpagetest
您还可以使用Webpagetest来了解没有第三方标签的性能。Webpagetest 具有请求阻止功能，或者您可以使用以下 Webpagetest 脚本仅测试您的第一方域的性能。

blockDomainsExcept   yourwebsite.com
navigate  https://yourwebsite.com

这是为了衡量第三方脚本的性能影响。如果您将第三方脚本直接包含到您的网站而不使用 GTM，您可能会得到类似的结果。话虽如此，有多种方法可以优化 GTM 设置以提高性能，并充分利用标签管理器的功能来提高网站的性能。如果您有兴趣优化 GTM 设置，您可以查看这篇文章。

Answer 2

注入标签就是GTM的用途，所以这并不构成滥用。

GTM本身只是一种传递机制；它是一个 JS 文件（我认为一个空容器解压后大约有 100KB，如果您的浏览器支持压缩，则需要下载 30KB），具有异步加载标签的机制。它本身对页面加载时间的贡献很小。

当然，您通过 GTM 部署的内容可能会大大减慢您的网站速度 - 部分原因是它会下载外部库，部分原因是 DOM 操作可能会强制在浏览器中进行回流/重绘。然而，这不是由于 GTM 造成的，而是由于您使用的标签造成的，如果您通过其他方式集成 Zopim 等，也会发生完全相同的情况。

那么，使用大量（可能是不好的 [1]）JavaScript 会让您的网站变慢吗？很可能是的。这是GTM的错吗？事实并非如此，除了 GTM 使集成那些令人讨厌的东西变得更容易之外。

[1] 不是挖苦你，只是营销标签经常是用过时的 JavaScript 编写的。