Optimise site speed – Image Optimisation

Site speed is important for SEO. One of my favourite tools for site is the Google Insights tool – who better to tell you what your site needs to be SEOed? So let’s take a look at our client’s site:

It’s not the worst page speed I’ve ever seen. But it’s not far off.

The worst PageSpeed score possible
The worst PageSpeed score possible

but this site does need some work. Fix the biggest problems first! A common cause of problems is image size:

 

The top four account for the lion’s share of the image size. Let’s take a look in the directory, because we’ve only looked at one page (the homepage), but the whole site needs to be optimised.

There are plenty of big images. This usually happens when a graphic designer is uploading unoptimised images. They focus on image quality, and tend not to think about performance.

Let’s take a closer look at the biggest file:

That’s a bit big. Let’s get it down to something reasonable. It’s a big homepage image slider, so it still needs to be big enough to look good.

We scaled it down to 180kb. Let’s see the effect on the site speed tool.

Sorting out one image makes the site score a lot better. We’ve gone from a ignominious¬†12/100 to a merely embarrassing 39/100, a jump of 27 points. All we did was resize and compress that with one image with a free graphics program.

Let’s do the next biggest…

That’s not how you spell layer, but never mind…optimise!

We got the size down from 540kb to 82kb! What does Google think?

We’ve jumped 7 points on the scale, and we’re approaching half way there! Let’s do all the rest that google flagged, and see what happens. First the jpegs…we could A) optimise each one individually to check for artifacts, or we could B)¬† batch compress them to 50% compression and wait for the Graphic Designer to notice.

B is much faster. I’m not going to judge. Do what you feel.

Anyway, on with optimising.

The logo is problematic – it’s the width of a reasonable laptop from 2009! Let’s fix this and see what Google thinks…

We’re nearly half way there, but even better – images aren’t our biggest problem anymore, which is great because we were just getting bored with image manipulation.

Hope this helps, and if you want any questions about optimisation, let us know in the comments. We’ll be fixing the next problem in a later blog post – how to sort out browser caching.