Back to top button

Improve page speed & SEO using Tag Manager & delayed Triggers

Improve page speed & SEO using Tag Manager & delayed Triggers
In this post we'll try and improve your pagespeed score, increase some of those core web vitals in Search Console and give your users a better browsing experience while still maintaining great analytics and ad tracking Tags in Google Tag Manager without the burden on search rankings and the user's browser.

We'll be using a few tools in this post so I'm going to list them all for you so you can come grab the links when you need them. You're going to need:

All these tools do pretty similar things, measuring your page speed, but it's good to compare results from different tools.

Before we start, disclaimer, you don't need this tutorial if you're not expericeing issues and you don't have a bunch of ad tracking tags etc. in Tag Manager like we do. We use this method a lot on our Webflow projects to delay Tags and improve the speed of Webflow site as you don't really have a lot of control in Webflow when it comes to adding code and when what fires to improve page speed. This is not to say you shouldn't use this method in any site that has a bunch of Tag firing on page views or that are just embedded in your code. So let's start by answering why you would need this when using Tag Manager and conversion tracking, remarking tags etc from Ad networks like Facebook, Google Ads, LinkedIn, Twitter, Pinterest etc and other tools like heat maps from Hotjar or Microsoft Clarity etc. (As an aside, if you don't have it and want, scroll, heat and click maps; go ahead and install Microsoft Clarity. It's a great free heat map tool. We'll do a post on how to set that up at some stage.)

On another note, if you are using code from platforms like Facebook, Google Ads etc in your site and you're not using Google Tag Manager, you should seriously consider ripping it out and using Tag Manager to implement the code. You can get the basics on Installing Tag Manager, adding your Google Analytics through Tag Manager and setting up basic conversions in the linked posts. Tag Manager makes adding tracking codes etc. to your site super simple and easy to manage. We'll do some more how-to's on adding more ad tracking and conversions in later posts. If there's something specific you want us to cover, post in the comments.

So why are we doing this how-to and the steps below to speed things up? Okay, go ahead, open the links in the list, enter the pages you want to scan and run the speed tests. Try running in Incognito mode in Chrome so your plugins don't interfere with things like Lighthouse. If you've got a bunch of tracking codes you might see some warnings about LCP, FID, CLS etc. and suggestions of deferring some code to speed things up. Now once you've run these test, leave those tabs open, we're gonna come back and see if things have improved and if there's less moaning about deferring things and whatnot and whether your scores improved when we're done and we rerun the tests.

First up, what is LCP, well it stands for Largest Contentful Paint. Done. Crap, not really, I mean, what the hell is that. Basically, it's when you can see what's on your page, so when has stuff stopped loading and when is it visible in the viewport.

Largest Contentful Paint threshold recommendations

Typically you want this to be fast, well you want everything to be fast but why would tracking codes slow this down? It comes down to how these sinppets of code load. You basically get two ways synchronously and asynchronously. In the first instance one thing loads after another and everything has to wait for the thing before it to load before it starts loading. So probably not great right. You don't want your header image and text to wait for some tracking script to load first just because it's sitting in the <head> of your page. This is where asynchronous comes in, here things load in parallel, so nothing is waiting for the thing before it, problem is that while things can now load when they want it does increase the bandwidth required as you're loading a bunch of things at the same time as well as increasing the load on the users's browser because it's redering and doing a bunch of things at the same time.

So while Tag Manager is great, it's loading asynchronously, so the elements on your page and all the Tags you've added are loading at the same time and competing for resources which isn't so great. But how do we fix that without just ripping out all the Tags. We delay what's not essential to load immediately. And that's what we're going to be doing. Firing what's important immediately using the good old all All Pages trigger and the rest, the stuff that's important to you, but that you don't need right away a little later so that the other important stuff on the page can load first. We're gonna do this by adding a Trigger, some custom code in a Tag and another custom Trigger to fire the "not so important to load first" Tags.

So let's dig in and get started:

Step 1 - Decide what's most important and what's not.

This is probably the head scratcher, what we usually do is take a gander at Tag Manager and see what we have in there and what really needs to load first and what we can 'delay'. We tend to still load our Google Analytics 4 tags first on an normal All Pages trigger, stuff like Facebook Tags, Google Ads Remarketing Tags etc, are important, but an extra second or two won't really break the bank that if you have a whole bunch of those that it's usually the things that these tools, especially Google PageSpeed Insights and Lighthouse moan about.

Step 2 - Creating your Full Loaded Tag

Now we're going to create a custom code Tag and Trigger that will create an event which will give the page time to load before we fire those Tags we decided could wait a bit in Step 1.

Open up Tag Manager, go to Tags and hit new.

Tag Manager

Give the Tag a name, choose Custom HTML as the Tag Type and paste the following code in:

<script>
 (function() {
  try {
    window.setTimeout(
     function(){
      dataLayer.push({'event' : 'afterLoad'});
     }, 1500);
   } catch (err) {}
 })();
</script>
Tag Manager  Fully Loaded Tag

When you fire this Tag the custom code you just pasted in will run and create a event in the page's dataLayer, which will wait for 1.5 seconds. You can make this more if you want, but 1.5 should be fine and this tag will only trigger once the Window Loaded trigger event fires.

Now select the Trigger. You want to create a new Tigger here instead of just using the usual All Pages Trigger, we're trying the give the page time to load first, so select Page View - Window Loaded. Then give your Tag and name and save everything.

Tag Manager Window Loaded

Now you'll have a Tag that will create a dataLayer event when fired and will only trigger on the Window Loaded event.

Step 3 - Create the custom event Trigger that you'll use on all Tags you want to delay.

Head to Trigger and hit new.

Tag Manager Trigger

Give the Trigger a name, select Custom Event as the Trigger type and afterLoad as the Event Name. afterLoad is case-sensative. Save and you're done.

Tag Manager Custom Event Trigger

Now you can use this Custom Event trigger as the selected trigger for all the Tags that need to be delayed a bit.

But what's happening, let's recap.

Unlike the most All Pages triggers the Tag you created in the beginning is now waiting for the Window Loaded trigger to fire, once that happens it's waiting 1.5 seconds before it pushes an event to the dataLayer called afterLoad. When this happens your Fully Loaded Tigger will fire and trigger all the Tags that you added it to. This gives everything else time to load and holds back a lot of the scrips Google PageSpeed usually moans about. So apart from helping to improve your scores it also provides a better user experience and allows for less penalisation from tools that monitor this kind of thing.

You don't have to follow the route we take by letting our GA Tag fire on All Pages, this can be delayed to, it just depends on how accurate you want what analytics to be, it's all up to you. For that matter, fire any Tag you don't need immediately using the custom event if you're happy with the delay

Last bit, publish the container, check that everything's working fine by previewing the site in Tag Manager to make sure everything still fires and then head over to the Tabs you left open when you ran the test. Run the tests again, there should now be a tiny improvement depending on how many Tags you delayed, but don't just do this because you want a better score, it's also good for your user experience.

Have any questions or comments, hit us up in the comments, and remember when you run the tests, especially in Lighthouse, run both Mobile and Desktop more than once to just to check if there's a difference.

Remember to check out the How-To section of our blog for more tutorials.

recent projects