![Image of a peregrine falcon - make sure your website is fast like this peregrine falcon](/images/compressed/hero-peregrine-falcon-vvy4YUpLg_-820.jpeg?_cchid=5b0fb2e3b51ac26e8b6ba4e09d2214d6)
High performing, cost-effective alternatives to WordPress
website performance
Web
Web
Welcome to our seventh article on website speed for marketers. This time we're investigating, and finding solutions to, the beast that is third party code. It can have an enormous impact on the speed that web pages load.
This is the seventh of 10 things that all marketers should know about website speed.
Remember the priority is fast loading web pages. Why? Because you'll have happier, stickier visitors and Google will give you an SEO boost in their result pages.
I'm an ex-marketer turned dev providing guidance for marketers on speed issues. I wish I had known these tips back in the day!
It's all the code that isn't on our server by default. It comes from a third party. And does stuff for us (as all code does of course!). Some typical examples include:
In the main, third party code is Javascript.
[Annoyingly...] the third party code providers usually tell you to add their code to the <head> section of your website. They want their code loaded first. And sometimes, depending on what it is, the code needs to load as one of the first items so that it fully works.
The head section of your site is always loaded first. Unless advised otherwise, the browser will do as it's told, and process everything in the head first. And only then, move on to the main body (i.e. your content) of your web page.
So, whatever is loading here, can prevent rendering of your web page. That's not good from a loading-speed perspective.
It's also coming from a third party server. That server (i.e. computer) needs to respond with the code. This slows everything down as:
So in sum we're dealing with these main issues:
This website scores a nice 100/100 for performance on PageSpeed Insights (see article one) - you can tell I am proud of that! We have Google Tag Manager installed that implements Google Analytics.
As a test, I removed our current way of loading Google Tag Manager (GTM). I replaced it with a standard install of GTM in the <head>. Our speed dropped to 84/100 on mobile. And triggered the PageSpeed Insights Reduce unused Javascript. On desktop, the PageSpeed Insights test dropped performance to 99/100.
We also use Google Recaptcha (V2) on our contact form on our contact page. Currently, I only load the Google Recaptcha code on that page.
But for this test, I loaded it across the site. As is the case with many websites that I analyse.
I was shocked...
Performance on mobile now dropped to 67/100. And triggered the Reduce unused Javascript plus the Minimize main-thread work warnings.
On first load, GTM and Recaptcha code weighed about 380 kilobytes. Not a big deal - about the size of a large hero image. But this is compressed plus happening before your content loads. To use it, the browser has to uncompress it. Uncompressed, this code weighs in at about one megabyte! That is a lot of code for any browser to parse (i.e. process).
You can see what a large impact this is having on your page loading speed.
Most websites have some form of stats, cookie control, ad tracking etc. You can see how this mounts up. The casualty... the loading speed of your website!
What can we do about that? We can't go without these services I hear you say! Or can you?
Marketers, you need to weigh up how much value the extra code is giving you. Is it essential, or is it a nice-to-have? I've seen websites with Google Analytics and Matomo Analytics installed... my goodness, why?
If it's not adding value, then strip it out.
Does every page in your website need access to this code? For example, the Recaptcha code I use on our contact us page is only needed there. I don't load it anywhere else.
Shop around... are there lighter-weight versions that provide the same, or a similar service. The example, I am thinking here is swapping out Google Analytics for a lighter-weight stats service. Plausible Analytics sells itself as privacy-friendly and lightweight. Perfect! With the added benefit that if you're only using stats then you can ditch the cookie management service.
Do you need the service all the time? Consider only using it when you need it. We can setup statically generated sites where a simple checkbox can turn Facebook Pixel on and off. If you're not running any FB ad campaigns then turn it off. Facebook pixel has a lifespan of 180 days.
This is the method of telling all code to pause downloading until the page is loaded. We use this approach on Pendigital.
In fact, we use a more extreme version of this. We listen for the DOMContentLoading event that's sent by the browser when everything has finished loading. And then we wait for user interaction (e.g. scrolling), or wait 4 seconds, before loading... only then do we load GTM. Using this approach we might lose out on some bounce rate reporting but since the site loads so quickly, I believe this is negligible.
If you have code, for example, that powers a Google Map that is at the bottom of the page. Then why load that code if the user never scrolls down to the map? There's no point. The better approach would be to detect if the user scrolls to a certain distance from the map and then load the code.
In computing speak, a main thread is where all the processing happens in sequence. It's like working through a list of things. Any list item in second place can't be got to until the first item is done.
Browsers can have more than one thread running, i.e. another place where stuff can be done at the same time as the first thing! It's like suddenly having another pair of hands to work through the above list. PartyTown JS has code in Beta that will do this. Check it out.
It's important to keep code up-to-date. The vendor of the code may have introduced a lighter-weight version.
So there you go, a list of solutions to help speed up the loading of your web pages. I hope this helps with discussions about speed with your web developer.
Remember, we're here to help if you need support with your website especially with website speed.
Looking forward to the next article that's going to be all about Fonts! Yay! They can have a massive impact on page load speed. See you then.
Another interesting animal fact... a barracuda is a super quick fish. Their body is designed for speed with a top speed of 36mph. Hence the barracuda image as the hero image for this blog article - make sure your website is like this barracuda!
If you've found this article on third party code interesting then don't forget to follow us: LinkedIn, Twitter and Facebook.
You might like these other web articles...
Grab a coffee and have a read!
website performance
Web
website performance
Web
website performance
Web
website performance
Web
Helpful guidance, profitable solutions
Get started on a project with Pendigital