How we increased the speed of a website by 395% with one hour’s work

When we take on a new customer, for SEO or website work, we always test the speed of the website. Improvements here can often be made by tweaking various elements, such as image size and compression, caching, etc. but recently we were engaged by a company for a full-stack approach to their marketing, and the speed test threw up a shocking stat.

Despite being relatively new, it plummeted to the lower end of the Google PageSpeed Score of just 24%, with an ‘F’ rating, unacceptable load time and a whopping 4mb home page.

Speeds like this are not good for SEO or user experience.

As probably one of the lowest scores I have ever seen, I pondered whether it could be remedied with on-site fixes alone. Would we need a switch to a faster server?

I decided to tackle the on-site stuff first.

Pictures are often the worst culprit of slow-loading pages, and this site has a customary hero image for its header.

There’s absolutely no point in having these any larger than they need to be as this will make a major contribution to treacle time. This one was two-and-a-half times wider than it needed to be, which means it’s also the same proportion too high. That oversight meant the image was 625% bigger than it needed to be for optimum performance, and that’s before we look at compression. Needless to say, we were able to compress this picture as well.

I measured the site speed again and already we were up to 63%, not bad for ten minutes of work, but I wanted an ‘A’ rating.

Google PageSpeed score – up to 63%
Up to 63% but still not happy

Next, I ran a script globally to reduce the size of all the pictures on the server and compress them at the same time. If the home page is affected, it’s likely all the other pages are too.

Google PageSpeed was still showing the need for what is called GZIP compression, browser caching and the need for optimisation of some internal files, typically the CSS stylesheet and Javascript files, which are often full of more white space than any code (and they need to be for legibility).

All these problems can be fixed with one process – caching – and again this is best done with a plugin.

That took us up to the 96% mark with an ‘A’ rating and I was happy.

Google PageSpeed score – 94%
Result, a leap of 72 percentage points, and and a score, and Google, will be happy with

So, the speed element was fixed less than one hour into an 8-hour shift for this customer. A four-times (395%) speed increase is not to be sniffed at.

Speed is an essential ranking factor for search engines such as Google, so it’s important to make sure the website is performing well before starting any search engine optimisation. Even now, we’re not going straight into the SEO. Next up will be page usability, because without that, SEO will be fruitless.

How hard is resizing a picture?

It’s not rocket science, but it’s one of those hidden things isn’t it, put two pictures side-by-side, and you can’t tell how many pixels each has or what the compression ratio is. The human mind doesn’t care about stuff like that. It’s only when you look at numbers like the above, that it strikes home.

That is one of the fundamental problems of home builds. Without the tools of the trade, what looks good, is good enough.

Training is a fundamental part of our process of handing over a website, and after showing hundreds of people how to use their website, I can say for sure that one of the most confusing points to get across is picture sizing. Largely because, whatever computer/software combination people are using, the process will be different. Macintosh, Windows, different versions of Windows, Office installed, file associations, etc. These all make the resizing process different for nearly every user.

Rules is rules

It’s safe to say that when a website is passed from us to the customer , there are certain rules that should be adopted, and picture size is one of them.

My ground rules for website pictures are: 1000 pixels along the longest edge. There’s just no need for a picture ever to be bigger than this, unless of course it is a hero image and that is an exception.

Our websites typically come with a plugin that will resize and compress images when they’re uploaded, but again, there’s no point in wasting your valuable time uploading if it’s going to be resized by the software at the end of your wait.

My advice is learn how to resize your pics before you upload, and you’ll save yourself time at the very least.

And although I tend to use Photoshop because that’s what I’m used to, it’s certainly not the tool I’d recommend for the casual user. If you have it, then use it. but there are free tools that do the job just as well, possibly even better. My favourite is Squoosh. This online tool allows you to upload a pic, resize it, compress it, and even get a live view of the quality at your chosen compression rate.

Squoosh
Squoosh – a user-friendly way to resize pictures that everyone can understand.