'Google Tag manager impact in web performance (load time)

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?

performancegoogle-tag-managerweb-performance


Solution 1:[1]

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

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Callan

Related Questions