High performing, cost-effective alternatives to WordPress
website performance
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!
What do I mean by third party code?
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:
- Statistics software that measures website visitors and their behaviour. Google Analytics would be a good example here
- Cookie management: a service that helps your website visitors keep their data private. An example of this would be Cookiebot.
- Marketing data collection: Code that tracks conversions and collects user data for remarketing. For example, Facebook Pixel or LinkedIn Insights.
- Prevent spam and abuse: Code that tracks dodgy stuff like spam email sent to you via your web forms. A good example of that is Recaptcha code. This is the code that checks you're human and not sending spam.
- Ads: Third party code that injects ads into your content.
- Social media feeds
- Google Maps
- Other code that developers have used when building functionality into your web components. For example, jQuery, or a Javascript library for powering a gallery. I covered solutions for this in my article on optimising Javascript.
In the main, third party code is Javascript.
How does third party code impact page loading speed?
[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:
- Server requests take time and processing power
- You're totally dependent on that third party server. If it's loaded down with requests, then it won't respond as quickly. This knock-on effect can slow the whole loading of your site.
So in sum we're dealing with these main issues:
- Code in the head section is blocking rendering of your web page
- The speed of the code loading is dependent on the speed of another server responding. Annoying if you've spent a fortune on a fast server for your site but the code is coming from a slow server.
- The code is so large that it consumes loads of browser parsing power once it's downloaded
An example of the impact of Google Tag Manager and Google Recaptcha
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?
Solutions for reducing the impact of third party code
How much value is the third party code adding?
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.
Conditionally add code, depending on where it's needed
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.
Check out lighter-weight versions
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.
Turn it off and on
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.
Defer code until the page loads
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.
Lazy load code
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.
Get scripts off the main browser thread
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.
Keep code up-to-date
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.
