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

Question

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

Answer 1

根据定义，Google 跟踪代码管理器是性能障碍。它的唯一目的就是让非技术人员倾倒随机垃圾网站上非常重要的第三方脚本。如果您通过直接在网站上插入所需的外部标签/脚本来绕过 GTM，它将立即提高性能。

\n

如果你做不到这一点，你仍然可以优化 GTM 的加载方式 \xe2\x80\x93\xc2\xa0it\'s not true that you can't defer. 这是默认的 GTM 实现：

\n

<!-- Google Tag Manager -->\n<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({\'gtm.start\':\nnew Date().getTime(),event:\'gtm.js\'});var f=d.getElementsByTagName(s)[0],\nj=d.createElement(s),dl=l!=\'dataLayer\'?\'&l=\'+l:\'\';j.async=true;j.src=\n\'https://www.googletagmanager.com/gtm.js?id=\'+i+dl;f.parentNode.insertBefore(j,f);\n})(window,document,\'script\',\'dataLayer\',\'GTM-XXXX\');</script>\n<!-- End Google Tag Manager -->\n

\n

现在您不能只将 defer 属性放在脚本标记上，因为这在内联脚本上不起作用。但如果您仔细观察该脚本的作用，您会发现它只是插入了另一个gtm.js从 Google 服务器加载的脚本元素。默认情况下它甚至是异步的，请参阅这一行j.async=true。如果你把它j.defer=true改成gtm.js则会延迟加载。请记住，GTM 插入的某些脚本/标签可能不希望出现这种情况，因此可能会以意想不到的方式破坏某些内容。

\n

除此之外，您还可以进行一些小的调整，但您无法回避这样一个事实：GTM 是一个巨大的不必要的库，会影响页面性能。从便利性到性能的滑动尺度上，GTM 始终偏向便利性。如果您必须证明性能不佳\xc2\xa0\xe2\x80\x93\xc2\xa0向您的客户展示测试结果并告诉他们选择一个。

\n

Answer 2

您可以在标签中添加预加载GTM库。

<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。

1. 通过从 GTM 中删除不必要的标签
2. 您可以优化从 GTM 注入的 javascript 代码