Google 跟踪代码管理器脚本阻塞主线程，导致性能低下

问题描述 投票：0回答：2

我正在致力于提高网站的性能。经过一番调查后，我将重点放在减少总阻塞时间（TBT）上。 Chrome Lighthouse 告诉我“减少第三方代码的影响第三方代码阻塞了主线程 250 毫秒”。看来 Google 标签管理器和 Google Analytics 在大部分时间都阻塞了线程：

检查性能选项卡也证实了这一点：我有 4 个“长任务”，其中 3 个与 Google 跟踪代码管理器或分析相关。

下面的代码显示了 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 高，这正常吗？我做错了什么吗？有什么方法可以解决这个问题并减少 TBT，同时网站上有 GTM？

谢谢！ W.

javascript performance google-tag-manager
2个回答
1
投票

我发现的最佳解决方案是partytown，它将分析脚本从主线程移至工作线程中

0
投票

我的5美分，

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 块移到了一个单独的 .js 文件中，并将其与其他 js 代码一起缩小，从而可以消除一个阻塞项。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.