Today we are going to see how we improved website speed by 33% / 2 seconds by just compressing images.

We will also show you the easy step-by-step process that you can follow to achieve same or better results for your website.

By combining two tools, we made our website 29% lighter and 33% / 2 seconds faster .

But first let’s look at how fast our website was.

Step #1 – Check your website speed on GTmetrix

We will use a tool called GTmetrix.

To check your website page load speed, simply enter your URL in the corresponding field and click Analyze

GTmetrix will give you an overall performance score, based on PageSpeed and YSlow.

It will also give you details about the areas that need improvement.

Source: GTmetrix.com

As you can see the website is a bit slow, 6 seconds. You can also see in red or orange / yellow the areas that can be improved.

Image compression is just one of the many areas of your website that you can optimise but it is an important factor for page load speed, which is how fast your web pages load.

By optimising page load speed you will improve your website SEO and user experience.

To reinforce that, Optimize images is the top recommendation by GTmetrix scoring a low F (29).

Let’s then dig a bit deeper and check what images need optimisation

Source: GTmetrix.com

According to GTmetrix by optimising these images we can save 91.1kb, which would result in a 15% reduction.

Pretty good, ah? Are we sure we cannot do better than that?

Of course we can and this is where TinyPNG comes to our rescue

Step #2 – Analyze your website image compression on TinyPNG

What’s not to love about a panda helping you with image compression?

TinyPNG is the tool we have used (and still use) for optimising many of our images.

They also have a tool, similar to GTmetrix, telling users how much they can save from optimising their images.

It’s very easy to use

Upon entering your site URL, the tool will show you the optimized image size, the total savings and the consequent, faster page load speed

 

Source: TinyPNG.com

 

TinyPNG says we can compress our images and save 1.5MB, which will result in 32% savings! Quite a big difference, ah?

Most importantly, TinyPNG estimates that just by compressing the images, we could increase the page load speed by 1s!

Seems like a good deal, so let’s try optimise one image from our page on TinyPNG (with the free version you can optimise a batch of up to 20 images)

As a test, we choose one of the food images. The original size is 1500×1000 for weight of 197.2kb – 202kb depending on the tool used.

Source: Gloversalley.ie

We then upload the image onto TinyPNG image compressor and this is what we get: -28% savings, which means our image now weights ‘only’ 114.4kb

It seems already a good improvement but what if we could do better than that?

This is where ImageResize.org comes along

Step #3 – Optimise your images on ImageResize.org

ImageResize.org is a suite of image tools you can use for free to resize / crop an image, change its ratio or compress it, which is what we are going to do.

Let’s upload the image onto their image compressor tool and see what happens

Wow did that just happen?

We went from 197.2 to 58.1kb and saved 71%. This is amazing!

In case you have some doubts on the quality of the optimised images, you can compare them below:

Compressed with ImageResizer.org (58kb)

Compressed with TinyPNG (144kb)

 

 

 

 

 

 

 

 

 

Fantastic! We saved 139kb on one image alone!

All we have to do now is bulk-upload the remaining images from the homepage (for a maximum of 20 at the time) and then replace the ones on the website.

Easy, right? But here’s the strange thing. If you upload the image that you just compressed with ImageResizer.org onto TinyPNG, if further optimises the images

Step #4 – Re-optimise your images on TinyPNG

Here’s our original image, slimmed down to 58kb. What happens if we now upload it onto TinyPNG?

Let’s see:

We saved another 5% on the previously-optimised image (although TinyPNG sees the file slightly bigger 59.5kb).

You might say that the benefits are minimal but if you have a lot of images it might still be worth re-optimising them.

Now let’s check again on GTmetrix and see how we do

Our image optimisation score went from F (29) to D (61). Most importantly, we brought the overall page load speed down to 4.3s.

Better but still not enough. GTmetrix tells us we can still save 47.5kb

Step #5 – Use GTmetrix optimised images

This time we will go with GTmetrix advice and replace the flagged images with the ones it recommends

After clicking on ‘See optimized version, the GTmtrix-optimised image will open in another tab.

We then save the image on our machine and replace the corresponding one on our website.

We repeat the process until we have covered all the images flagged.

Let’s see now how we score on GTmetrix

Boom! Our image optimisation score went from D (61) to A (99).

Additionally, our overall PageSpeed score improved to B (80%) and turned green.

Most importantly, our overall page load score is now down to 4s.

We improved our page load speed by 2 seconds and only by optimising our images!

I hope you liked this article. If so it would be great if you could leave a comment and let me know.

Also, if you are interested in these type of tutorials, don’t forget to sign up to our newsletter.

5
Comments

Leave a Reply

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