Google Tag Manager script blocks main thread causing low performance

Asked 29/6, 2022 at 12:13 Answered 15/11, 2023 at 16:46

javascript performance google-tag-manager

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+ '&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.

Bisayas answered 29/6, 2022 at 12:13 Comment(3)

Have you found a solution? GTM is blocking my main thread for 710ms. Just insane. – Perfectly 27/9, 2022 at 11:39

Unfortunately not. Let me know, if you figured out something. – Bisayas 27/9, 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. – Shaman 8/12, 2022 at 3:51

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

Illume answered 7/7, 2023 at 0:2 Comment(3)

Interesting! Do you have any numbers on how much you could reduced the blocked time with this solution? Thanks! – Bisayas 7/7, 2023 at 6:34

It eliminated the blocking time coming from that script. It boosted my Lighthouse score by about 10 points just by moving Google Analytics off the main thread – Illume 7/7, 2023 at 18:56

This looks like a great solution, do you have an example on how to implement this on a normal HTML webpage? – Getz 29/11, 2023 at 15:37

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.

Germayne answered 1/8, 2023 at 17:8 Comment(2)

i moved window.dataLayer.... can you explain bit more – Rockey 3/10, 2023 at 11:55

@PawanDeore you can create a separate file for window.dataLayer = window.dataLayer || [];... - code snippet or place it directly to your main .js file, then minify it, that's it. – Germayne 8/10, 2023 at 7:59

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

Dangelo answered 15/11, 2023 at 16:46 Comment(2)

I like the simplicity of this approach. How did you choose the 5 seconds? – Bisayas 10/12, 2023 at 7:51

@Bisayas I increased the time until TBT stopped affecting me. – Dangelo 11/12, 2023 at 12:23

Recommended topics

Hot tags