如何在 PageSpeed Insights 中减少 GTM 的 JavaScript 文件
作者
Uliana Lesiv
Google Tag Manager (GTM) 的 JavaScript (JS) 文件有助于跟踪和分析网站访问者的行为。然而，过多的 JS 文件会严重影响您网站的性能和功能。
这些 JS 代码会导致网站加载变慢，从而恶化客户体验。此外，您知道吗？亚马逊的研究表明，页面加载时间每增加 100 毫秒，就会损失 1% 的收入。因此，减少 JS 文件对您的网站至关重要。
在本文中，我们将展示减少 GTM JS 文件数量的解决方案，涵盖从审计容器到改用服务端跟踪的各个方面。
为什么应该减少 GTM 的 JavaScript 文件
优化 GTM 中 JS 文件的首要优势在于能显著提高网站加载速度。
每个 JS 文件都需要单独的 HTTP 请求来加载，此类文件越多，意味着请求也越多。对用户而言，这会导致网站内容加载延迟，进而可能导致跳出率上升。直接对您的网站来说，这可能导致 SEO 排名下降和网站流量减少。
减少 JS 文件将减少 HTTP 请求的数量，从而加快网站加载速度。
| 跟踪脚本过多拖慢了网站速度？使用 Stape 免费的 Website Tracking Checker 查看正在运行的内容，明确需要清理的项目。该工具可向您展示网站分析跟踪与现代最佳实践的契合度，并指出为分析系统和广告平台提升数据质量的机会。数字营销人员和代理机构可以快速运行跟踪审计，将该报告用作仔细检查部署情况的清单，并通过证明服务端跟踪的价值来赢得更多客户。 |
如何减少 GTM 的 JavaScript 文件
GTM 文件通常出现在 PageSpeed Insights 报告的以下部分：
点击您遇到问题的部分，即可直接跳转至对应内容。
减少第三方代码的影响
第三方 JS 代码可用于设置对不同用户操作（点击、滚动、分享内容等）的跟踪。然而，它会影响网站速度，且往往是网页上最沉重的负担之一。
要优化 GTM 文件，我们建议采用以下解决方案：
解决方案 1：审计代码。
检查 GTM 容器中的所有代码，因为某些代码可能已不再用于网站效果分析。这一简单的步骤有助于减少第三方代码的数量并减轻网站负担。
要完成此任务，我们建议使用 GTM.Tools。在这里，您可以检查容器、编辑并批量更新工作区内容。
解决方案 2：减少自定义 HTML 代码的数量。
自定义 HTML 代码对某些个性化跟踪配置很有帮助；然而，它们往往过于庞大，触发时会影响网站的加载时间。请检查现有的自定义代码，并尝试改用 GTM 模板，因为模板经过了更好的优化。
解决方案 3. 使用内容分发网络（CDN）。
CDN 会缓存您的网站数据，并从距离访客更近的服务器提供某些页面。这样可以更快地提供 JS 文件。
| 当您在 Stape 上托管并为服务端跟踪添加自定义网域时，您可以选择使用 Global CDN 或 Own CDN，这有助于实现精准跟踪。 |
解决方案 4. 延迟触发低优先级代码。
某些代码不需要在页面加载时就触发。为可以延迟的代码设置代码先后顺序。代码先后顺序允许您指定在某个“主”代码触发之前或之后立即触发的代码。要找到此选项，请转至要延迟的代码的“高级设置”。
解决方案 5. 迁移到服务端跟踪。
如果减少自定义 HTML 代码和/或删除某些代码对您不起作用，我们建议尝试服务端跟踪。
它是如何运作的？切换到服务端时，您可以将所有 GTM 代码从网页端容器移至服务端容器。这些代码将在服务端容器中加载，而不是在用户的浏览器中加载。这可以加快网站的加载速度。
| 更快的网站加载速度是服务端跟踪的优势之一，请查看我们的博文了解更多好处。 |
减少 Google Tag Manager 中未使用的 JavaScript
未使用的 JS 代码是指渲染页面（加载和显示页面内容）时不需要的代码。此类代码会增加 JavaScript 捆绑包的体积，从而导致网站加载变慢。
解决此问题最有效的方法是审核您的 GTM 容器并删除不必要的代码。
但是请注意，在大多数情况下，您将无法完全从 PageSpeed Insights 的这一部分中排除此类 JS 文件。
某些变量类型可能是 GTM 本身的一部分，也是确保 GTM 正常运行所必需的。这些变量包括 Auto Event Variable、DOM Element、Element Visibility 等。即使您并未在容器中添加这些变量，也可能会在 PageSpeed Insights 中看到它们被列为“未使用的 JS 代码”。
它们是 GTM 库的一部分，删除它们可能会破坏代码并导致 GTM 运行异常或完全失效。
如果它是 GTM 库的一部分且对 GTM 运行至关重要，为什么还会出现在“未使用的 JS 代码”中？PageSpeed Insights 之所以将其标记为未使用的代码，是因为您的容器中并没有此类变量。它仅存在于 GTM 库中。
控制 GTM 的 JavaScript 文件
由此可见，您在使用 GTM JS 文件时可能遇到的根本问题与杂乱、过载的容器有关。关键的解决方案是监控容器大小并及时删除不必要的代码。
监控 GTM 容器大小有两种方法：
使用扩展程序
在浏览器中添加 Get Google Tag Manager Size 扩展程序，并在需要检查时直接在网站上使用它。
该扩展程序将向您显示容器的大小，并提供有关变量、代码和触发器数量的详细信息。
从 GTM 获取响应
使用下方链接检查您的 GTM 容器大小。将网址中的“YOUR_ID”部分替换为您的容器 ID（在 GTM 中点击“Workspace”，即可看到该 ID）。
获得结果页面后，将其复制并粘贴到 TextEdit（适用于 Mac OS）或 Notepad（适用于 Windows OS）中。随后便可查看此文件的大小——这正是您 GTM 容器的大小。
| ❗注意：使用此方法得出的数值会高于扩展程序，因为它包含了 33 KB 的 GTM 库文件。该扩展程序仅计算容器自身的内容（代码、触发器、变量）。扩展程序与 GTM 响应之间的差值甚至可能大于 33 KB，因为 GTM 响应的是解压缩后的容器大小，这使其体积大于 33 KB。 |
何时需要检查 GTM 容器大小？
容器大小上限为 200 KB，但当达到 140 KB 时，GTM 就会向您发出警告。当然，强烈建议将容器大小控制在远低于此限值的水平，以免影响网站性能。
我们建议您不定期监测容器大小，尤其是在进行了大规模调整和跟踪配置之后，以便掌控 GTM 代码对网站性能产生的影响。
总结
GTM JS 文件过多会严重拉低网站在 PageSpeed Insights 中的性能评分。这些代码会导致网站加载变慢，从而导致跳出率升高并影响 SEO 排名。
减少 GTM JS 文件数量最有效的方法是控制其体积、审查 GTM 容器并删除不必要的代码。但是，如果减少代码数量仍无济于事，我们建议考虑采用服务端跟踪而非客户端跟踪。通过服务端跟踪，所有 GTM 代码都将加载到服务端容器而不是浏览器中，从而加快网站加载速度。
评论