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

编程问答 2022-12-05

问题描述

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

enter image description here

解决方法

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 属性放在脚本标记上，因为这不适用于内联脚本。但是，如果您仔细查看脚本的作用，您会发现它只是插入了另一个从 Google 服务器加载 gtm.js 的脚本元素。默认情况下它甚至是异步的，请参阅此行 j.async=true。如果您将其更改为 j.defer=true，gtm.js 将被延迟加载。请记住，GTM 插入的某些脚本/标签可能不会预料到这一点，因此它可能会以意想不到的方式破坏某些内容。

除此之外，您还可以进行一些小调整，但您无法回避 GTM 是一个巨大的不必要库，会阻碍页面性能的事实。在从便利到性能的滑动尺度上，GTM 始终站在便利的一边。如果您必须证明表现不佳，请向您的客户展示测试结果并让他们选择一个。

craftcmsgoogle-tag-managerpagespeedpagespeedperformanceperformanceperformancewebweb