“Reduce The Impact of Third Party Code” With Google Tag Manager

0:00Optimizing JavaScript With Google Tag Manager

This is WP Speed Fix, and I'm back for another video. This is a short video where we're going to talk about how to optimize JavaScript using Google Tag Manager. There are two methods we use, and this basically moves the JavaScript outside the website render window. We're talking about third party JavaScript things like analytics code, marketing tracking code and live chat, and basically optimizing it with Google Tag Manager.

I'm in here in our Google Tag Manager at the moment for WP Speed Fix, and I just want to load up some of the tags and show you how we do it.

0:46The Window Loaded Trigger Method

I'll load up this Google Analytics 4 tag and the trigger that we use. You'll see the trigger that we've used here is called All Pages Window Loaded. Inside your Tag Manager you'll probably find there are some triggers, and you're probably using the All Pages trigger. This is one of the default triggers that comes with Tag Manager. The problem with this page view trigger is that the code fires whenever the browser gets to the Google Tag Manager container, which is usually in the head of the site. Your analytics code and your marketing code are not mission critical. They're not critical to the render of the page, and they are render blocking, so you'll see some render blocking errors in Google PageSpeed Insights or speed test tools when you have that code on the website.

If you look here, I'll link you up to this in the description. This is from the Google website directly, with the different trigger types. You see here, page view: the trigger fires immediately when the browser begins to load a page. We don't really care when the analytics code loads. It doesn't really matter if it loads immediately with the page or takes 2 seconds to load. It matters from a rendering perspective, because it makes the website slower to render. From a practical standpoint, for the data that the analytics tool or the marketing tool is recording, it doesn't really matter if it loads one or two seconds later.

You'll see here that Window Loaded is the trigger we want to use. It fires after the page has fully loaded, including any embedded resources like images and scripts. Basically the code fires later in the loading process. Once the site is essentially loaded and has probably rendered (it may not necessarily have rendered in all cases, but the site is loaded and rendered), then the code in Google Tag Manager fires. Then the analytics code fires, or the marketing tracking cookies, or the live chat. You're moving the load of that heavy JavaScript to later in the render process, after the site is visually available. The net result is that the marketing tools still work the same and the analytics tools still work the same, but we get a faster page load.

It's very simple. All we need to do is create a new trigger. I'll just discard changes here and go back. Go to Triggers, and it's a bit slow, but just create a new one. We called ours All Pages Window Loaded, like you saw. You just hit the New button and create a trigger like this. Just here, Window Loaded, and that's it. Give it a name and save it, and then add it to the tags. Switch over whatever your page view tags are to All Pages Window Loaded, go ahead and submit, and you're away.

3:05Using Timer Triggers For Live Chat

The other one you'll see here is that we use a timer trigger in some cases as well. This is very useful for live chat tools. It won't work with all live chat tools. There are some, like HubSpot and a few others, that have their own speed optimization built in, so this may break that. Just keep that in mind. We use it for tools like Tawk.to, which is a good one and a very common live chat tool. You add a timer as a trigger, so I'll load it up here, where we have All Pages Wait 7 Seconds. This waits for 7 seconds to fire the code. In this case we don't have live chat on the website the way we used to, but we used to have a live chat lead widget all over the website.

You'll see this trigger here down the bottom, Timer. It'll populate the event name by itself, GTM timer. Just set the interval here: 7,000 milliseconds, 7 seconds. We want to run it once, so only one time, and then the URL contains wpspeedfix. You just want to change that to whatever your URL is. This is just to make sure it only fires on the website itself. That just won't fire the code for 7 seconds, so the page has well and truly loaded by that 7 second mark. Then it fires the live chat, so in this instance that also moves the live chat load outside of the render window.

It also makes the website a bit faster overall, a bit lighter, especially when someone's clicking and navigating through quickly. All live chat tools and messenger tools are quite heavy, because they're a web app inside the website. They're very heavy to load, so if someone's clicking through the website quickly, those live chat tools may slow things down. It might hurt things like your INP metrics. By using this timer trigger, if someone's been on the page 7 seconds, they're well and truly reading it or hanging around, so they're more likely to engage with the live chat. 99.9% of people are not coming to the website and engaging with the live chat in 7 seconds or less, so again it's not really affecting the functionality of the live chat tool.

5:22Reliability Over Performance

That's it, that's pretty straightforward. Those are the two ways we use Tag Manager to optimize JavaScript. There is a third way, and I'm not going to show you here because it's quite technical, but there is a way to combine some of these triggers. You can use a Window Loaded trigger and a timer together, so you can wait until the site has loaded and then wait a certain period of time. You can also wait until user interaction, so you can do user interaction or window load to trigger. There are combinations, but these are the two that we use mainly.

One of the key fundamentals at WP Speed Fix is reliability over performance, because a slow, broken website is basically zero speed. We always want to focus on the reliability of optimization, so these are two very reliable ways to optimize the JavaScript. Give it a try, it's pretty straightforward.

6:09Free Speed And SEO Tools

If you have any questions, post in the comments below. If you do need site speed help, we've got a few tools on our website. If you're wanting to get someone to help you, at wpspeedfix.com you can request a free site audit and we'll come back to you and tell you how we can help. On the homepage you'll see there are some links to our free site speed test tool, our Core Web Vitals report and our SEO audit tool. These are free tools. They take 60 to 90 seconds to run, and there's no opt-in required. You do need to put in your web address, of course, to make them work.

This one is the WordPress site speed test tool, powered by AI, and it will give you detailed insights on how to speed up your site. This one will give you a Core Web Vitals report, so long as you have enough traffic. You need 50 to 100 visits a day, and it'll tell you how you're doing overall with your Core Web Vitals. Then this is a free SEO audit tool, in the same style as our site speed audit tool. It'll give you detailed insights on SEO and the things that need to be improved. That's it for this video. Like I said, if you have any questions, post in the comments below and I'll put those links in the description. Cheers.