javascript - Google Tag Manager script blocks main thread causing low performance

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=
        '.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 -->

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.

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./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 -->

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.

Share Improve this question asked Jun 29, 2022 at 12:13 wanderlusted 3691 gold badge3 silver badges14 bronze badges

Have you found a solution? GTM is blocking my main thread for 710ms. Just insane. – newguy Commented Sep 27, 2022 at 11:39
Unfortunately not. Let me know, if you figured out something. – wanderlusted Commented Sep 27, 2022 at 15:25
This is very painfull task. Giving script defer and async does not work also. In my case it still blocks my main execution thread. – Rutvij07 Commented Dec 8, 2022 at 3:51

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

The best solution I've found is partytown, which moves your analytics scripts off the main thread and into a worker

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./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');
        }, 5000);
    };
});

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./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./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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Google Tag Manager script blocks main thread causing low performance - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)