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.

This is your website. This is your website on tag managers. pic.twitter.com/jVkM363Cde

— Harry Roberts (@csswizardry) October 5, 2017

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 manger 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. GTM convienetly gives you a gun to shoot yourself in the foot in the form an option to enable this API when adding new tags though.

If you are using a tag manger 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 manger provides.

Choosing the right tag manager

It is probably not worthwhile thinking about which is the fastest tag manager. Most tag manager scripts are probably pretty well optimized, load from a CDN, offer a way to integrate with your website in an asynchronous way, etc. There is a higher chance that your website is slow because of the tags you inject in your website rather than the choice of your tag manager.

That being said, some tag mangers set you up for sucess in having a fast loading website. For example, Adobe’s tag manager lets you host the tag management library and config on your own servers. This usually is better in terms of performance since the browser does not need to look up the DNS for the tag manager’s domain, connect it to etc.

We will be looking at Google Tag manager (GTM) in this article since it is the most widely used tag manager, though the principles should apply to any tag manager you use.

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 a eye on the number of variables your container uses since variables are evaulated 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 possible, improving your Time to Interactive (TTI).

By default, you can try to load your tags only on Window Loaded. This prioritises your website 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. Your analytics team might be concerned if loading scripts on window load might affect metrics. The Telegraph engineering team wrote about how deferring their scripts did not affect their metrics or delayed their advertising. YMMV but definitely try this out to see how it affects your analytics.

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

• when the user has scrolled some percentage of the page via scroll depth
• when the URL matches a particular string (trigger tags only on your blog pages for example)
• when the user is not on a mobile device. At Dexecure, we have decided not to load our chat widget on mobile devices. Though there is no direct trigger for detecting the device the user is on, it is pretty simple to write a Javascript function which can find the device type of the user and you can configure GTM to trigger the tag based on this variable.
• Non essential scripts can be triggered after a timeout via the timer trigger
• when a particular element on the page is clicked

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.

Tags usually have a noscript tag to enable similar functionality when Javascript is not enabled on the client. In some cases, you can get the functionality you are looking for by just including the noscript version of your tag and ignoring the rest of the code and usually this is good for performance.

Updating your tags

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

Simplifing 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 if you a warning if you started 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! Though you can inject multiple containers in the same website, it might be better to audit your existing tags before you go down that route. In case you are using multiple containers per website, it is recommended that they share the same dataLayer.

A new feature was released in #GoogleTagManager all quietly a few days ago.

If you publish / create a version of a container which is approaching (something like 70%+) the container max. size limit, you’ll see an indicator in the versions list and the version page! pic.twitter.com/eU4lT7YIdb

— Simo Ahava (@SimoAhava) February 1, 2019

Proxying tags through Dexecure

Dexecure’s Third Party Optimizer product can help by routing third party scripts through a single CDN, reducing DNS lookup times, TCP connect times and making better use of your bandwidth by automatically optimizing third parties which haven’t been properly optimized.

Some of our clients have routed almost all their tags in their tag manager through Dexecure for faster load times.

Auditing performance of tags

Auditing the performance of your tags regularly is a good idea. I recently changed the live chat provider on my website since the previous one didn’t seem to care about performance as much 🤷🏽‍♂️

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 evalute new tags - tags which don’t pass a minimum score in your performance checklist does 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.

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 execpt 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!

Contact us if you want to give our Third Party Optimizer product a whirl.