21

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)?

sp

Improve this question
1
  • I'm getting a thread blocking time for gtm.js around 4,680 ms. I have absolutely no idea what this is. When I load the actual page there's nothing like this kind of delay.
    – Simon_Weaver
    Commented Oct 29, 2022 at 1:05

4 Answers 4

Reset to default
11

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

Improve this answer
1
  • 1
    I've seen big issues with GA data when using defer, and would not recommend it. IMO there's no point in using GA if you're not gathering accurate data. I agree preconnect is the proper way to handle it. In my experience the best place to put the tracking script is in the <head> of a document or after opening <body>. As long as all render blockers are removed, you can get away with it just fine.
    – Mike Ciffone
    Commented Feb 23, 2022 at 15:20
3

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.

Improve this answer
1
  • 1
    Interestingly, GA has an async snippet and GTM has an non-async...
    – RemarkLima
    Commented Dec 13, 2019 at 16:58
2

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

Improve this answer
1
0

Patrick Kenny offers the best advice in this thread, preconnect should be used.

My 2 cents: If OP is chasing 90+ score the answer is to not use GTM to inject the tracking script, just hard code it, and preconnect.

I recognize the OP specifically asks about GA, but they'd be wise to address the other 221 Kilobytes coming from Google.

I'd probably toss FontAwesome too and just locally host the handful of icons used from it, serving them as SVG.

enter image description here

Improve this answer
2
  • 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.
    – Patrick Kenny
    Commented Feb 24, 2022 at 1:41
  • Ah. Yet another reason to continue to opt out of the beta tester program ; )
    – Mike Ciffone
    Commented Feb 24, 2022 at 2:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.