Google标签管理器脚本阻止主线程导致低性能

发布于 2025-02-11 14:34:38 字数 1123 浏览 2 评论 0原文

我正在努力提高网站的性能。经过一番调查，我专注于减少总阻塞时间（TBT）。 Chrome Lighthouse告诉我“减少第三方代码第三方代码的影响，以250毫秒的方式阻止了主线程”。 Google标签管理器和Google Analytics（Google Analytics）似乎大部分时间都在阻止该线程：

检查“性能”选项卡也确认了这一点：我有4个“长任务”，其中3个与Google Tag Manager或Analytics有关。

下面的代码显示了网站中如何包含Google标签管理器：

<head>

        <!-- 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+ '&gtm_auth=XXXXXXXXXXXXX&gtm_preview=env-2&gtm_cookies_win=x';f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
        <!-- End Google Tag Manager -->

GTM是否具有3个任务并阻止主线程并导致高TBT？我做错了吗？是否有任何方法可以解决此问题并减少网站上具有GTM时的TBT？

谢谢！ W.

原文

I'm working on improving the performance of a site. After some investigation, I'm focusing on reducing the Total Blocking Time (TBT). Chrome Lighthouse tells me to "Reduce the impact of third-party code Third-party code blocked the main thread for 250 ms". It seems that Google Tag Manager and Google Analytics are blocking the thread for most of the time:

Checking the performance tab confirms this too: I have 4 "long-tasks" and 3 out of them are related to Google Tag Manager or Analytics.

The below code shows, how Google Tag Manager is included in the site:

<head>

        <!-- 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+ '>m_auth=XXXXXXXXXXXXX>m_preview=env-2>m_cookies_win=x';f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
        <!-- End Google Tag Manager -->

Is this normal that GTM has 3 tasks and blocks the main thread and causes a high TBT? Am I doing anything wrong? Is there any way to fix this and reduce the TBT while having GTM on the site?

Thanks!
W.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

自此以后，行同陌路 2025-02-18 14:34:38

我发现的最好的解决方案是 partytown ，它将您的分析脚本从主线程中移出并进入工人

回复收藏 0 原文

安静 2025-02-18 14:34:38

我们以下面的方式解决了它，请记住，您将失去花费不到5秒钟来查看页面的人的统计数据。

window.addEventListener('DOMContentLoaded', (event) => {
    window.onload = function() {
        setTimeout(function() {
            (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+ '>m_auth=XXXXXXXXXXXXX>m_preview=env-2>m_cookies_win=x';f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','GTM-XXXXXXX');
        }, 5000);
    };
});

We solved it in the following way, keep in mind that you will lose the stats of people who spend less than 5 seconds viewing the page.

window.addEventListener('DOMContentLoaded', (event) => {
    window.onload = function() {
        setTimeout(function() {
            (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+ '>m_auth=XXXXXXXXXXXXX>m_preview=env-2>m_cookies_win=x';f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','GTM-XXXXXXX');
        }, 5000);
    };
});

回复收藏 0 原文

只为一人 2025-02-18 14:34:38

6月5日的更新答案
我最终采用了另一种方法。

我所做的工作是在本地存储的，并从src =“ https://www.googletagmanager.com/gtag/js？id=g-xxxxxx”缩小了GTM外部脚本; head＆gt; tag：

window.dataLayer = window.dataLayer || [];
function gtag(){
    dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-xxxxxxxx');

这就是我设法摆脱绩效问题的方式。

旧答案：

Google指令说我们需要在标头中链接GTM并添加一个类似的脚本：

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>

我

window.dataLayer = window.dataLayer || [];
function gtag(){
    dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-xxxxxxxx');

将window.datalayer Block移动到一个单独的.js文件中，并将其与其他JS代码一起进行了更大可以摆脱一个阻止物品。

UPDATED ANSWER on 5 JUN 24
I ended up with a different approach.

What I did is stored locally and minified GTM External script from src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX", and kept inside <head> tag:

window.dataLayer = window.dataLayer || [];
function gtag(){
    dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-xxxxxxxx');

This is how I managed to get rid of the performance issue.

OLD ANSWER:

The Google instruction says that we need to link GTM in header and to add a script like:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>

and

window.dataLayer = window.dataLayer || [];
function gtag(){
    dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-xxxxxxxx');

I moved window.dataLayer block in a separate .js file and minified it along with other js code which allowed to get rid of one blocking item.

回复收藏 0 原文

~没有更多了~

关于作者

慕巷

暂无简介

文章

28 人气

关注发私信

友情链接

文江博客

Google标签管理器脚本阻止主线程导致低性能

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

alipaysp_snBf0MSZIv

梦断已成空

瞎闹

凯凯我们等你回来

寄意

似梦非梦

友情链接

Google标签管理器脚本阻止主线程导致低性能

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

alipaysp_snBf0MSZIv

梦断已成空

瞎闹

凯凯我们等你回来

寄意

似梦非梦

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。