Login/Register
Google Tag manager impact in web performance (load time)
Asked Answered
Solved performancegoogle-tag-managerweb-performance
B

4

6

I´m trying to improve the load time and performance of my website. To summarize this is the average loading time stats that I get without including Google Tag Manager.

enter image description here

However when I just include Google Tag Manager with the code below which is just at the bottom of my page above the closing body tag, I can see a relevant impact in performance like:

enter image description here

<script async defer src="https://www.googletagmanager.com/gtag/js?id=myappid"></script>
    <script>
      var gaEnv;
      switch (window.location.hostname) {
        case 'production-domain':
            gaEnv = 'production-id'; // production
            break;
        default:
            gaEnv = 'development-id'; // development
      }
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      // Config for analytics
      gtag('config', gaEnv, { 'send_page_view': false });
      // Config for Adwords   
      gtag('config', 'adwords-id');
    </script>

I have read a lot of blog posts about how to improve performance of these scripts y using async and defer attributes, but it´s pretty clear that these is still an important impact in performance (more than 2 secs in load time and 1sec in finish time).

Is there anything that I´m missing or can do?

Bacon answered 26/3, 2020 at 11:42 Comment(0)
E
11

Google tag manager adds performance bottlenecks to the site. Product managers like to have the GTM because of the workflow easiness when adding/updating/removing marketing and other javascript layers to the site.

The first thing you can do is preload the GTM library in the <head> tag.

<link href="https://www.googletagmanager.com/gtag/js?id=myappid" rel="preload" as="script">

You can also add dns-prefetch

<link rel="dns-prefetch" href="https://www.googletagmanager.com/" >

The second and most important thing is not to mess the tags in GTM. You have to carefully craft the tags in the GTM.

Eg.

  • Remove unnecessary tags from GTM
  • Move the permanent tags which update rarely to the html code itself.
  • Optimize javascript codes injected from the GTM
Extraterritorial answered 26/3, 2020 at 12:17 Comment(5)
What do you mean with "Optimize javascript codes injected from the GTM"? If they are injected by GTM...how can we optimize it? – Bisectrix
By this, Gihan means ensure any JavaScript that has been added in GTM is optimised as best as possible. You can add custom code directly in GTM, so it should be optimised accordingly – Smoothshaven
I tested the use of adding a <link> tag and it didn't appear to work. It stopped the script being flagged in Google's PageSpeed tool, however it stopped Analytics events from being tracked – Smoothshaven
where to put those <link rel="preload"> and <link rel="dns-prefetch">? because Google says we need to put gtm code directly after opening of <head> – Biographical
why preload and not 'preconnect' if GTM is not critical for rendering? – Giese
M
4

If people are still looking for ways to improve GTM performance, there is this cool plugin called Partytown that puts your third party scripts in a web worker and removes the heavy load from your main thread. As a result it increases the performance by a lot.

Malliemallin answered 9/5, 2022 at 7:24 Comment(1)
Tool is still in beta after like 2 years of the answer, eh – Excision
N
1

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. enter image description here

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.

Noni answered 1/8, 2023 at 17:15 Comment(2)
Where is "arguments" defined? – Grandstand
@MatthewMichaud Hey mate, I updated the answer with a better approach. – Noni
C
0

Google is pushing for gtag vs GTM. gtag gives you a single code:

Here's what I used:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id={INSERT-YOUR-ID}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '{INSERT-YOUR-ID}');
</script>

I used both of the following sources:

https://developers.google.com/tag-platform/gtagjs

https://support.google.com/tagmanager/answer/7582054?hl=en

Both will reduce the impact of GTM on the page speed.

Converge answered 31/7 at 4:30 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.