skip to content

Tuning Google Tag Manager for Speed

Tag managers are a popular way to manage third party scripts in your website. It helps marketing people try out new tools without getting the development team involved and having to re-deploy the entire website. Tag managers have lowered the bar for adding and deploying code to websites significantly. As a wise man once said, with great power, comes great responsibility. The tags added to your website can significantly affect the performance and security of your website (though we will be focusing on the performance implications in this article).

Here is an example of a tag manager implementation gone wrong — this shows a waterfall chart of the resources loaded by the website directly and resources loaded by the tags injected by the tag manager.

Tag manager or not?

Adding a tag manager to your website is an extra script to your website, so it must be bad for performance right? Not necessarily.

The tags are usually loaded by a tag manager in an asynchronous way. This means that a slow loading tag won’t affect the other tags. You get this feature “for free” when you use a tag manager.

Also, some very bad APIs like document.write don’t work as expected when loaded in this asynchronous way, which I would argue is a good thing. Using document.write is terrible for performance and it was one of the ways to include new tags a long time ago but I would seriously reconsider any tag which still uses it in its recommended installation method.

If you are using a tag manager to just inject one script like Google Analytics into your page, it may not be worth it.

If you have the proper discipline and use the tag manager’s features efficiently, you can definitely have a fast loading website along with the other benefits a tag manager provides.

Removing unused tags and variables

The fastest request is the request that is not made — Ilya Grigorik (probably)

This is the most impactful thing you can do to increase the performance of your tags — remove them.

There would be tools whose functionality you are not using anymore. There might be remarketing pixels which are passively collecting data in the background which your marketing department is not planning to run campaigns with. Your contract with your CRM might have ended, but their tracking code might still be in your website — the factors which can cause the number of unused tags in your website to insidiously creep up are endless.

Carry out a regular audit of your tags and remove the ones which are no longer in use.

Also keep an eye on the number of variables your container uses since variables are evaluated on every single page load. This can be an issue if the script used to calculate the variable is performing some expensive computation.

Optimizing tag triggers

Optimizing when your tag gets triggered is crucial to provide a smooth experience to your users. By loading as less code upfront, you can get your website interactive as soon as possible, improving your Time to Interactive (TTI).

By default, you can try to load your tags only on Window Loaded. This prioritises your website’s own content first and loads the other tags when the load event has been fired. For most tags, this should be okay, unless the tag needs to track something before the page finishes loading.

GTM offers other advanced triggers which can be used to control when the tags are fired. For example, using variables and inbuilt triggers, you can trigger tags only in the following scenarios:

Using the right tag

There might be multiple ways of achieving the same functionality and some more performant than the others. For example, if you want a simple Facebook share button on your website, you needn’t include the entire Facebook SDK in your website. You can achieve the same thing by just a simple anchor tag.

As another example, instead of loading the entire Facebook tracking pixel Javascript, you can embed the pixel with just an image tag as Facebook suggests. This is definitely way more performant.

Updating your tags

Check if there are newer, more performant ways of including the same tag.

Simplifying your tag setup

You can combine multiple similar tags with slightly different configurations into a single tag that uses variables to dynamically set the values of certain fields. For example, ten similar tags, each configured with a trigger that tells each tag to fire on ten separate pages, can be combined into one single tag/trigger combination that uses a Lookup Table variable to set the values of the relevant fields.

Look out for the size indicator in GTM

Since last year, GTM started showing a warning if you start approaching the size limit of the container. This is Google’s way of telling you that you have way too many tags on your website!

Auditing performance of tags

Auditing the performance of your tags regularly is a good idea.

It is a good idea to go through a checklist like this one and scoring each tag in your website for performance. This also makes it easier to evaluate new tags — tags which don’t pass a minimum score in your performance checklist do not get included in the website.

Another quick way to evaluate the impact of a third party script is to block the domain via your browser developer tools and roughly see how different metrics change.

I also like to use WebpageTest to either block specific domains in the Block tab when running a test or running a test with a custom Webpagetest script like this which blocks all domains except the ones you have whitelisted.

blockDomainsExcept   yourwebsite.com
navigate  https://yourwebsite.com

Tools like Calibre and Speedcurve also help tracking the performance of third party scripts over time.

Do you have any other tips for optimizing tags in your website? Let us know in the comments!