How to avoid issue related to Google Tag Manger in page speed to improve perfomance?

Question

We have an official company website. When we check the page speed, the site is ranking low and showing Google Tag Manager script in "Reduce unused javascript". As google tag manager is important for the website, is there any way to solve this issue? The 'defer' attribute is not working with the script.

Crore

Answer 1

Google Tag Manager is by definition a performance impediment. Its only purpose is to allow non-technical people to dump random garbage very important third-party scripts on a site. If you bypass GTM by inserting the external tags/scripts that you want on your site directly, it will improve performance immediately.

If you can't do that, you can still optimize the way GTM is loaded – it's not true that you can't defer. This is the default GTM implementation:

<!-- 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;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->

Now you can't just put the defer attribute on the script tag since that doesn't work on inline scripts. But if you look closely at what the script does, you'll see that it just inserts another script element that loads gtm.js from Google servers. It's even asynchronous by default, see this line j.async=true. If you change that to j.defer=true, gtm.js will be loaded deferred. Keep in mind that some scripts/tags inserted by GTM may not expect this, so it might break something in unexpected ways.

Besides that, there are a couple minor tweaks you can do, but you won't get around the fact that GTM is a huge unnecessary library that will impede page performance. On a sliding scale from convenience to performance, GTM is all the way on the side of convenience. If you have to justify the poor performance – show your client the test result and tell them to pick one.

Uziel

How can we track conversions if not through Google Tag Manager? – Portiere

@Portiere Google Tag Manager is just an interface that allows you to put scripts on a page without touching the code. Conversions aren't tracked by GTM, but by the script and code snippets inserted by GTM - for example, Google Analytics. If you put those scripts on your page manually and write your own code to track specific events and conversions, you can achieve the same thing without the overhead of GTM. Of course, this means that modifying the conversion tracking now has to be done in code instead of through an interface. Whether that's a good or bad thing is up to you to decide. – Uziel

Answer 2

You can add preload the GTM library in the tag.

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

You can also add DNS-prefetch

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

also, you can optimize your GTM carefully.

1. by Removing unnecessary Tags from GTM
2. You can Optimize your javascript codes injected from the GTM

Horripilation

should we add it inside the head or body ? – Swarey

@Swarey inside head. – Rabkin

Are you sure it's gtag/js?id=mygtmid instead of gtm.js?id=mygtmid? – Ghat

Answer 3

Have you TESTED placing scripts on the page instead of within the GTM container?

Because I have with up to 40 scripts, and the improvement is virtually zero gain.

Taken

Answer 4

You can try partytown. It will move your GTM into a Web Worker and it will no longer be a performance impediment.

Make sure you have all the events that your scripts trigger so you can forward them to the web worker.

Trailblazer