How to Speed Up External Scripts
Watch this short video to learn a little known technique to speed up 3rd party (external) scripts for a massive speed boost.
What We'll Cover:
Your Next Action Steps:
- Discover which scripts you need.
- Install tag manager.
- Configure scripts load settings.
Your Next Training Video
Today I want to show you a really sneaky technique to make your website load a lot faster. One of the components of a website is all these third-party scripts. Things like analytics tracking, Facebook re-targeting, chat widgets and all those kind of things add load time to a site.
The hard part is you cannot control the scripts. You cannot edit them, modify them or improve them. So there’s very little you can do, but this technique works wonders! So what we’re gonna do is we’re gonna use a product called Google tag manager. It allows you to control all of these scripts and choose when to fire them.
I’m not going to show you how to install tag manager, there’s a lot of training on that, but I’m going to show you the technique that allows us to delay these scripts so that people are not waiting. A lot of the functionality is not required for an immediate page load.
It’s only something you need later. So let me give you an example. If you have a look at this website in a new browser…I think the Internet is playing up… but what are you not noticing immediately? You know you’re looking over here, and you’re looking over here.
This little feature over here is an external script, and it takes load time. So there’s no need for this to load in the first, I don’t know 30 seconds or something because you’re first looking at the site and then you’re gonna see this little bobble pop-up over there.
So, let’s have a look at the tag manager and see what happens. In this case there is a tag installed and what you can do is you can enable it and you can enable a trigger that happens with a two-second delay.
So that says ‘hey load the site but show people everything that needs to be loaded but also wait two or five seconds or however long you want before you add this feature’ and that depends on what it is.
You know, we generally look between two and five seconds. One other thing. So here is a small improvement that could be done. Most website visitors spend like a minute to two minutes or even I think the site is a three-minute read time. I can’t remember. So this analytic script is loading right at the start and on all pages immediately. Now if you think about it that doesn’t need to happen. It could wait even just two seconds because page speed is about the first three seconds. So this analytics tag does not need to start capturing people until they’ve been on the site for three seconds.
Remember, a lot of bots are hitting sites and so what that means is they might hit a site that’s been less than a second and go and that’s a bounce rate. But in this case, I’m gonna show you a way to delay this.
So what I’m going to do is I’m going to create a new variable, a two-second delay and I’m going to select that. That means that it’s going to weigh two seconds before it loads this.
So let me show you how I created this timer. You can see here GTM timer. You’re going to use the timer.It’s a two-second delay. That’s 2,000 milliseconds. It must only fire once and it’s when the page arrow matches the regex.
Now let’s create a new one there just so that you can see it from the start. Let’s do a five-second delay. All pages five-second delay, and create a trigger. The interval is 5,000. So I’m just going to move this. Yep, no, no we can leave it up there…
We only want this to fire once. But this thing is going to fire repeatedly. The page URL matches the red shakes dot stop. It always fires. Save it. And, it’s now going to trigger obviously. We’ve got way too many triggers happening here. So this one should only trigger on a five-second delay just like that and save. And this Beamer really doesn’t need to load within two seconds that could also be five seconds.
Let’s add the five-second delay instead. Moreover with this, you can also remove things. So this Beamer might not need to fire on a thanks page and delay a thanks page.
So what you can do is you can add an exception in here. At the bottom, add an exception, and now if any page… Okay. So you can do a thanks page and then obviously you can configure this add page URL some page views page URL contains, Thanks.
Yes, so we don’t want it to fire on the thanks page. So it is on all pages of the five-second delay, but don’t fire on the thanks page. It means that this page will load that much faster because this script does not need to load. We’re going to publish it and this is going to obviously increase the speed of this site because these little scripts are not going to run.
Rather, they’re going to wait for five seconds before they load. Rather than the immediate loading that was happening here and the two-second loading here. So that’s a sneaky technique. A very sneaky technique to get external scripts to load a bit faster!