Pagespeed Insights reports that Google Analytics is blocking main thread in page load

google-analytics javascript page-speed google-tag-manager google-pagespeed

5,127

Solution 1

GA4 uses Google Tag Manager to load Google Analytics, which means a bigger hit to your site's performance.

To minimize the performance impact, here are some things I did.

Use preconnect

Use preconnect by adding these two tags to the <head>:

<link rel="preconnect" href="https://www.googletagmanager.com">
<link rel="preconnect" href="https://www.google-analytics.com">

You need both to 1) get Google Tag Manager, which will in turn 2) fetch Google Analytics.

preconnect tells the browser "we are definitely going to connect to this server, so go ahead and open up a connection" which makes things slightly faster.

Use `async` or `defer`

For loading the script, you have two options, async and defer.

Loading the script async will improve performance in all modern browsers (everything except IE, basically) and has no negative impact.

Use of defer will minimize the impact on total blocking time because it will delay the execution of the script until the page has loaded; however, it will impact the accuracy of your reporting because incomplete page loads may not be reported as hits.

If you're using defer, you can put the <script> tag at the bottom of the document (just before the </body> tag instead of in <head>.

More about async and defer.

Results

Using preconnect and defer, I cut the impact of Google Analytics on total blocking time by about 60%.

Solution 2

I would definitely reccommend loading GTM async, chances are it would be loaded in less than a second anyway, so you won't miss many is any events. In Googles analytics documentation, they recommend loading it async. I think tag manager is the same. On my site I have it loading async, and it works fine, I get page load events fine.

Solution 3

I disagree with Conors answer.

Let's compare these two methods: For GTM you need in the head-tag

<!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><!-- End Google Tag Manager (noscript) -->

and in body-tag

<script async>(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;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>

Use "async" to load that script (Google doesn't tell you)

For Analytics.js you only need in the body-tag

<!-- Global site tag (gtag.js) - Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-X"></script><script>window.dataLayer=window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag('js', new Date()); gtag('config', 'UA-56544056-1');</script>

"async" here as well increases the performance.

Now test both options with Google Pagespeed Insight and the results will be better if you choose the second method. It's confusing, because the first method results in less traffic from Javascript, what should give you more points in Pagespeed Insight. Considering that and the fact that Google is pushing GTM, I guess the lower result by choosing the first method is unintended by Google. But there are other tools to measure page performance...

I'm wondering if other users can confirm this finding.

Cheers, Mathias

5,127

kaustubh sinha

Updated on September 18, 2022

Comments

kaustubh sinha over 1 year

I'm chasing page speed, partly as proof that getting 90%+ is consistently achievable.

My main issue now is Google Analytics. In the below example, it's loaded via Google Tag Manager, so there's just the one GTM snippet at the top of the screen - however page speed insights appears to state that it's GA (and GTM) causing the largest delay.

Is there a way to prevent GA from slowing page load? Should the GTM script be set as async (given that we may miss some analytics data)?
kaustubh sinha over 4 years

Interestingly, GA has an async snippet and GTM has an non-async...
Tibor Nagy almost 4 years

<script async>(function... is not correct, that's why Google doesn't tell us. The async attribute is only for external scripts (and should only be used if the src attribute is present).
Patrick Kenny about 2 years

If you're using UA, you can inject the tracking script directly, but AFAIK, GA4 forces you to use gtag.js, which will inject GTM whether you like it or not.
Mike Ciffone about 2 years

Ah. Yet another reason to continue to opt out of the beta tester program ; )