如何避免页面速度中与 Google 标签管理器相关的问题以提高性能？

Question

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

Answer 1

Google 根据定义，跟踪代码管理器是一种性能障碍。它的唯一目的是允许非技术人员在站点上转储 ~~随机垃圾~~ 非常重要的第三方脚本。如果您通过直接在您的网站上插入您想要的外部 tags/scripts 来绕过 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 插入的一些 scripts/tags 可能不会预料到这一点，因此它可能会以意想不到的方式破坏某些东西。

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

Answer 2

您是否测试过将脚本放在页面上而不是 GTM 容器内？

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

如何避免页面速度中与 Google 标签管理器相关的问题以提高性能？

How to avoid issue related to Google Tag Manger in page speed to improve perfomance?

performance

pagespeed

web

google-tag-manager

craftcms