javascript - 安装谷歌标签管理器后如何修复网站性能?

标签 javascript google-analytics google-tag-manager web-performance google-optimize

我们的网站上运行着谷歌标签管理器。我曾经将它和其他一些非紧急脚本放在页面加载时 3.5 秒的 javascript“setTimeout”中,这是我用来在许多性能测试工具上给出出色性能分数的技巧。但是,由于 setTimeout 的延迟,同样在运行的 Google Optimize 不会在我们的网站上验证 - 它仅在页面加载时运行且没有计时器延迟时才有效。

在将 GTM 移出超时后,它使我们的性能分数从大约 90 下降到 20 到 40 之间。

我知道这可能是因为在 GTM 中加载了什么,但我无法不在其中加载其中的某些项目。

我想知道在这种情况下是否还有其他方法可以提高页面速度性能,在这种情况下我需要 GTM 和 Google 优化页面加载。我们网站上的大多数其他性能项目都已经过优化,这就是这次下降如此令人震惊的原因。

我曾尝试将此 GTM 标记移动到页脚并将其设置为使用 window.onload 加载,但没有成功。此外,它已经使用异步设置。

这是我现在设置的,但它会降低性能。

(function () {
            var e = document.createElement('script');
            e.async = true;
            e.src = 'https://www.googletagmanager.com/gtag/js?id=UA-###';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(e, s);

            window.dataLayer = window.dataLayer || [];

            function gtag() {
                dataLayer.push(arguments);
            }

            gtag('js', new Date());

            gtag('config', 'UA-###', {'optimize_id': 'GTM-###'});
        }());

最佳答案

您可以使用 GTM 来利用页面上的各种触发器,并将不同的标记链接到这些事件。初始化 GTM 时启动页面 View 触发器。 DOM 触发器在页面加载时启动,Window Loaded 触发器在所有资源加载时启动。您可以使用这些来推迟非时间关键标记、脚本和工具的启动。有关这些触发器的更多详细信息,请参阅此 support article .

关于javascript - 安装谷歌标签管理器后如何修复网站性能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56979397/

相关文章:

javascript - 获取选择标签的当前值

google-analytics - 使用Web Services GTM丰富数据层

jquery - Google Analytics(分析)外部链接代码不起作用

google-tag-manager - Google Tag Manager 错误 : Uncaught TypeError: w[l]. 推送不是功能

google-analytics - 为什么我应该使用谷歌标签管理器?

javascript - 如何识别 youtube 播放器中的音量变化

javascript - 使用 @ts-check 在 JS 文件中输入断言元素

javascript - 使用 jQuery 检索属性中的文本?

mysql - 有人可以帮我用 R 编程解决这个问题吗?

javascript - 重定向到谷歌标签管理器上的移动脚本