The need for speed

I’m a website speed anorak. Web page load times aren’t everything, but they do make a real difference to a website’s bottom line. Google says that as the load time of a web page increases from 1 second to 7 seconds, the probability of a mobile visitor bouncing (leaving again right away) increases 113%. This is why search engines take page loading time into consideration – the logic goes that search engine users want to be directed to speedy websites, so they’ll consider Google a better tool if Google adjusts their algorithm to give preferential treatment to fast websites.

So I thought I’d run an experiment.

TL;DR – Jump straight to the summary and results.

The methodology

I created a brand new website on Bluehost, which is WordPress.org’s own top recommendation for hosting websites running WordPress. I called it ‘Owls Are Cute’ because, well, owls are cute, aren’t they? I also made it about owls because I needed some images that would retain a large file size even when compressed, to really test my setup, and I figured the complex texture of their feathers would keep image file sizes on the large size. If I wanted to really up the ante I could have just used images of random noise, but random noise isn’t cute. That’s a statement I never expected to have to make.

I activated a common theme called Hestia and filled the homepage with big photos of owls from my favourite stock photography website – Unsplash.

I then installed a bunch of common plugins to bring the server load up to what would be reasonable for a normal website. Here’s the full list of plugins I had active:

• Advanced Custom Fields
• Akismet Anti-Spam
• Contact Form 7
• GDPR Cookie Consent
• Google Analytics for WordPress by MonsterInsights
• Jetpack by WordPress.com
• Really Simple SSL
• Simple Lightbox
• Smash Balloon Instagram Feed
• UpdraftPlus – Backup/Restore
• WooCommerce
• Wordfence Security

If you’re interested – here’s my list of best WordPress plugins for 2020.

Upon activating those plugins, I set up a Google Analytics profile to make sure MonsterInsights was loading all the code it should on the front-end, and I added a 8 image Instagram feed to the homepage using Smash Balloon Instagram Feed. I also activated Wordfence’s firewall.

How I tested site speed

I used Pingdom and Google’s PageSpeed Insights to test the performance of my new little website. Pingdom allows you to select where in the world a site is tested from, which makes quite a difference as you’ll see later. I ran ten tests to get a steady average, running them from London where I had a choice.

While PageSpeed Insights runs a stopwatch on several aspects of a web page’s loading process, the big thing it gives is two scores out of 100 for mobile and desktop respectively. This takes into consideration a raft of metrics, like time to first contentful paint, the amount the design jumped around as it loaded, how complex the code is and many more. So with Pingdom’s scores, lower is better, but for the score I’ve recorded for PageSpeed, higher is better.

Unoptimised website on Bluehost:

Speedup #1 – change hosts

Bluehost’s shared hosting runs website hosting software called Apache, but an alternative called LiteSpeed has a significant speed advantage without any drop in functionality. So after finishing my tests in Bluehost the first thing I did was to clone the website to a host called Krystal. Krystal’s servers run LiteSpeed and what’s more, they’re based in London, so this gives an advantage to UK visitors over websites hosted with Bluehost, which is based in the USA. If the electrons don’t have to travel so far across the globe they’ll get there sooner. Yes, we’re factoring in the speed of electricity (or light, if the network uses a significant amount of fibre optics).

This change of host represented a cost saving too – Bluehost’s basic shared hosting plan is currently £7.15/month (inc VAT), compared to Krystal’s £4.99/month (inc VAT).

So according to Pingdom, moving hosts alone has shaved off 3.4 seconds, two thirds of our original page load time. What’s surprising though is that this speed increase hasn’t translated into much of an improvement in the desktop PageSpeed score. This is probably because although the final asset finishes loading sooner, Google’s interested in user experience, so they’re concerned by how soon the user starts to see useful information – what they call a contentful paint.

Conclusion: a better host running better software closer to your user will get everything to the end user sooner, but without further optimisation of how your website’s resources are delivered this may not translate into much benefit for your users. At least not for visitors using broadband.

Speedup #2 – optimise hosting and website

The first thing I did was remove the heavy plugins that the site wasn’t using. When a website has been around for a bit it can collect various plugins that may have overlapping functionality, or people may install a huge plugin for just one tiny feature, bringing with it lots of code bloat. Jetpack is a case in point – it bundles 100 features into one plugin and many websites would be better off replacing it with specific plugins for each task, unless they really want to make use of everything Jetpack offers. So I removed Jetpack.

Even though WooCommerce is a heavy plugin I kept it because I assume if a website has it they need it to sell something. However I installed a plugin called Asset CleanUp which allows you to stop certain scripts loading on pages and posts where they’re not needed. This allowed me to unload WooCommerce’s ‘add to cart’ script and Contact Form 7 scripts from the homepage.

I kept the content the same, except I reduced the number of Instagram images from 8 to 4.

The most important plugin I added was a LiteSpeed Cache, a free WordPress plugin from the makers of LiteSpeed that works perfectly with hosting software. This plugin has a mightily helpful range of features, from minification, script localisation, script and compression, domain preloading and more. Crucially, this plugin created compressed versions of each image in the smaller WebP format and served them to browsers that are able to display them.

I also updated the website’s PHP version from PHP 7 to PHP 7.4.

Optimised website on Krystal:

That’s more like it. Compared to our original setup we’ve managed to shave off 4.63 seconds. That’s a 93% reduction in page load time!

But how much can we improve Bluehost?

To make sure I was being fair to Bluehost I went back to the old website and implemented all the same optimisations I’d made on the Krystal clone.

Optimised website on Bluehost:

Results

Here’s a summary of all the changes I made.

And the speed improvements were as follows:

So, to conclude, the aim isn’t really to climb up an imaginary scoreboard of technical brilliance but to provide users with a valuable experience. This case study has shown it’s totally possible to make a massive impact on user experience with a few changes to your website and hosting setup.