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:

seconds load time

PageSpeed score on mobile

PageSpeed score on desktop

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).

If you’d like to try out Krystal you can get £5 free credit if you use the promo code ‘LUCIDRHINO’ at checkout. Krystal didn’t pay me for this article.

Everything about this new hosting and website setup was identical to Bluehost’s, except the physical location, LiteSpeed and the fact that Krystal guarantee 1GB RAM and 1 processor will be dedicated to each hosting account, whereas Bluehost just say “it depends”.

 

Unoptimised website on Krystal:

seconds load time

PageSpeed score on mobile

PageSpeed score on desktop

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:

seconds load time

PageSpeed score on mobile

PageSpeed score on desktop

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:

seconds load time

PageSpeed score on mobile

PageSpeed score on desktop

Results

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

Bluehost defaultBluehost optimisedKrystal defaultKrystal optimised
ApacheApacheLiteSpeedLiteSpeed
PHP 7PHP 7.4PHP 7PHP 7.4
WordPress 5.5.1WordPress 5.5.1WordPress 5.5.1WordPress 5.5.1
No specific RAM/ CPU allocationNo specific RAM/ CPU allocation1GB RAM, 1 processor1GB RAM, 1 processor
Based in the USABased in the USABased in the UKBased in the UK
Removed unnecessary pluginsRemoved unnecessary plugins
Added speed improving pluginsAdded speed improving plugins
Served WebP images

 

And the speed improvements were as follows:

Graph of Page speed load times
Graph of PageSpeed Insights Scores

So, to conclude, the aim isn’t really to climb uwp 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.

Author: Aidan Ashby

Aidan is a web and branding designer living in Northampton, UK. He’s a cautious optimist and is loathe to discuss himself in the third person. He loves pancakes and has a perpetual desire to just be sat in the woods with his feet up in front of a bonfire.

Connect with Aidan on LinkedIn.

You may also like…

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Sign up to receive helpful free design tips in your inbox

Sign up to receive helpful free design tips in your inbox

Join our mailing list to receive the latest blog posts and updates from our team.

Includes a free download of our Good Nook font.

Thanks, you've been subscribed.