如何避免与 Google Tag Manger 相关的页面速度问题以提高性能？

Question

我们有一个官方公司网站。当我们检查页面速度时，该网站排名较低，并在“减少未使用的 JavaScript”中显示 Google 跟踪代码管理器脚本。由于谷歌标签管理器对网站很重要，有什么方法可以解决这个问题吗？ “defer”属性不适用于该脚本。

Answer 1

Google 跟踪代码管理器顾名思义就是性能障碍。它的唯一目的是允许非技术人员在网站上转储“随机垃圾”非常重要的第三方脚本。如果您通过直接在网站上插入所需的外部标签/脚本来绕过 GTM，它将立即提高性能。 如果您做不到这一点，您仍然可以优化 GTM 的加载方式 - 并不是说您不能推迟。这是默认的 GTM 实现：

<!-- Google Tag Manager -->
<script>(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-XXXX');</script>
<!-- End Google Tag Manager -->

现在您不能只将 defer 属性放在 script 标记上，因为这在内联脚本上不起作用。但如果您仔细观察该脚本的作用，您会发现它只是插入另一个从 Google 服务器加载 

gtm.js

的脚本元素。默认情况下它甚至是异步的，请参阅这一行

j.async=true

。如果将其更改为

j.defer=true

，

gtm.js

将延迟加载。请记住，GTM 插入的某些脚本/标签可能不希望出现这种情况，因此可能会以意想不到的方式破坏某些内容。除此之外，您还可以进行一些小的调整，但您无法回避这样一个事实：GTM 是一个巨大的不必要的库，会影响页面性能。从便利性到性能的滑动尺度上，GTM 始终偏向便利性。如果您必须证明性能不佳的合理性 – 向您的客户展示测试结果并告诉他们选择一个。

Answer 2

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

您还可以添加 DNS 预取

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

此外，您还可以仔细优化您的 GTM。

从 GTM 中删除不必要的标签

1. 您可以优化从 GTM 注入的 javascript 代码

Answer 3

因为我有多达 40 个脚本，而改进几乎为零。

Answer 4

partytown

。它将把您的 GTM 移至 Web Worker，并且不再成为性能障碍。 确保您拥有脚本触发的所有事件，以便您可以将它们

转发

给网络工作者。