Group Information

Quick Tricks That Will Make Your Website Images Load Faster


17th March 2017

What do page load time and Ron Burgundy have in common? They are both kind of a big deal.
Ron Burgundy Meme
You probably don’t need me to tell you this, but a slow loading website can be hugely detrimental to the profitability of an online business. It will impact traffic acquisition through SEO, and PPC campaign performance will drop (it say so right here in Google’s AdWords Help pages), but ultimately the biggest problem it causes is with conversion rate. This will directly impact the bottom line of your business.

Studies have found that improving page load time by 1 second roughly translates to a 7% increase in conversion rate. That isn’t something to be sniffed at, especially when you consider that shaving seconds off your page load time doesn’t always have to be a resource-draining task, yet can result in a significant increase in revenue.

With that said, you’d think improving site speed would be a high priority for many online retailers. Unfortunately, this doesn’t always seem to be the case as time and time again, the sites we review are being significantly slowed in ways that could be resolved relatively quickly.

While there are many factors that can cause a site to load slowly, this post will focus on one of the biggest culprits – and often one of the simplest to fix – the humble image.


Think your site is loading slowly? Get in touch and we can help you fix it!


How can I tell if my images aren’t optimised?

Luckily, there are a plethora of tools that will do this very job for you. Some of our favourites include:

Google PageSpeed Insights

Google PageSpeed Optimiser

Being the page speed tool from Google, this is simple to use and incredibly useful. Put in a URL and you’ll be given a score from 0 to 100 – the higher the score, the quicker the webpage. You will get a separate score for the desktop and mobile versions of your webpages, which is also very useful.

The ‘Suggestions Summary’ section you’ll see after you’ve tested a URL is packed with useful information on how you can improve your speed score. This includes the Google guide to image optimisation, which you can find right here.

GTmetrix

GTmetrix

GTmetrix is so useful because it combines scores from the Google PageSpeed tool and YSlow to generate a score for the URL you are analysing. This is probably more useful if you want to get slightly more technical about how your webpages are loading, and what might be slowing them down.

For example, you will get access to a Waterfall chart, which displays the loading behaviour of your page (in what order the requests are made to load a page), and a timings breakdown which clearly shows the significant milestones in how your pages loads.

B&Q Page Speed

B&Q Page Speed Timings

Top Tip – when you use GTmetrix, sign up for an account and this will open up some really useful features. You can change the server location where the test is hosted, monitor a number of pages to run a daily test on and set alerts based on performance.

Pingdom

Pingdom Speed Tool

While Pingdom looks similar to the other tools we’ve mentioned already, there are two very useful features we recommend you use when analysing page speed. These are mainly contained in the Waterfall section, which is labelled as ‘File Requests’.

This can be filtered by load order, file size, file type, URL and load time. It just makes it very easy to see which images and other files are responsible for slowing your site down.

B&Q Site Speed Waterfall Chart

What can I do to optimise the speed of my images?

Believe it or not, there are some very simple things you can do as best practice to ensure that the images you upload to your website are optimised for speed. Here are just a couple that we recommend:

Use ‘Save for Web’ in Photoshop

If you create banners or other graphical calls to action for your website, there’s a good chance you’ll be using a tool like Photoshop to do your image editing.

If you’re doing this, always remember to use the ‘Save for Web’ option when saving your images. In simple terms, this compresses the images and removes unnecessary data (camera type, exposure time, focal length etc.) that isn’t required when the image is being served up on a website.

It’s really is quite simple as well:

Save For Web Photoshop

If, like me, you simply don’t have time to hover your mouse over multiple menu navigation options, there is even a handy keyboard shortcut:

WindowControl+Alt+Shift+S
MacCommand+Option+Shift+S

Doing this makes your image file size smaller, and smaller images load faster – therefore so do your webpages.

Use an online resizing tool

There are a multitude of online resizing tools that you can use, but our preferred option is Kraken. It’s fast, reliable and lets you optimise and resize images in bulk.

It’s good to use their ‘Lossy’ setting within the web interface, which will often reduce the size of the image file you upload by 60% (though expect to see reductions of between 80%-90% in some cases).

Kraken Resizing Tool

We recommend running all the images you are uploading to your site through a tool called Kraken – the extra time involved in this process is easily offset by the speed improvements you’ll see on your site.

Retest the speed of your website

When you’ve spent some time trying some of these image optimisation techniques, rerun your website through one of the tools referenced above.

We’ve got examples where we have improved page load time by 40% simply by optimising the images in the ways that we’ve specified above.

Remember that when you start going through this process, you might need to spend some time finding that sweet spot between saving your images in a way that is optimised for the web but also maintains the quality to a point where it won’t detract from user experience.

If you’re still concerned that images are slowing your site down, creating a bad user experience and costing you money, get in touch today and we will help put things right.