Commerce Vision Blog


LATEST ARTICLE CASE STUDY

There’s been plenty of talk about eCommerce and the increase in online everything during COVID-19,...

Commerce Vision Blog


LATEST ARTICLE CASE STUDY

Recently I had the opportunity to attend the Online Retail Global Digital Day and loved it!  

...

Commerce Vision Blog


LATEST ARTICLE CASE STUDY

Working from home through this health crisis (between juggling an 8-month-old and sanitising my...

Commerce Vision Blog


LATEST ARTICLE CASE STUDY

With all the global uncertainly at the moment, it’s highly likely you’ve got staff working from...

Commerce Vision Blog


LATEST ARTICLE CASE STUDY

Everyone knows what B2C is. Even people who have never heard the term before have still experienced...

Commerce Vision Blog


LATEST ARTICLE CASE STUDY

If you’re looking for a way to expand your online business, online marketplaces could be just the...

Commerce Vision Blog


LATEST ARTICLE CASE STUDY

Commerce Vision are excited to announce our new partnership with ChannelAdvisor.

Like Commerce...

Commerce Vision Blog


LATEST ARTICLE CASE STUDY

In the last five years, the cost of acquiring new customers has increased by over 50%. SEO, SEM and...

I have a shameful secret to admit to you all.

 

You know how I harp on about image optimisation being one of the first things you should look at for a quick win on site speed? Well… it turns out we hadn’t been doing it ourselves.

 

… I’m this guy right now…

 

Closeup portrait of young business man opening shirt to vent, it's hot, unpleasant, awkward situation, embarrassment. Isolated white background. Negative human emotions, facial expression, feelings-1.jpeg

 

The bright side to our bungle is that I can now show you how to go about tackling a problem like this.

 

Let’s break it down.

 

First, we identified 7 images that were all much larger than they needed to be. No really… they were WAY too big.

 

If you’re not sure where to start on this one yourself, I’ve got a great trick for you:

 

  1. Bring up your website and then hit F12 (or right click + Inspect) to launch your browser’s inspector tool.

 

speed1.png

 

  1. Put both windows side-by-side, like so:

 

speed2.jpg 

 

  1. Then, refresh your site. Now (and this is important), make sure you do a full refresh. This means you’re asking your computer to fetch the site again rather than pull it from memory. That’s CTRL + Refresh button in the browser if you’re not sure (or CTRL + SHIFT + R if you prefer a keyboard shortcut).

You know you’ve done it right when under the inspector’s size column you have KB values rather than “(from memory cache)”.

  1. Now, just sort that size column and cherry pick the large images that top your list.

 

After we worked out which images were a problem, we went through and optimised them.

 

We did this in two ways:

 

  1. Making sure that the maximum pixel size of the image was the max size it would be online
    • Eg. No more 1600 x 1200 images in an 800 x 600 space!
  2. Checking the file type used, and verifying it was the best fit for the image’s purpose and requirements

 

In total, we went from 7 files weighing in at a hefty 1.68MB to those same images at under 1MB.

 

Let’s put it in perspective with a little comparison chart (complete with shame face over that “original size” column):

 

Awkward situation. Portrait embarrassed woman anxiously thinking how to get out of this, isolated green background. Human face expressions, emotions, feelings, reaction, life perception.jpeg

 

Image

Original Size

New size

Size decrease*

1

150kb

77kb

62%

2

430kb

217kb

50%

3

339kb

202kb

40%

4

220kb

136kb

39%

5

124kb

77kb

38%

6

242kb

158kb

35%

7

174kb

113kb

35%

*rounded to the nearest %

 

Now, our website is really “image lite” when compared to an ecommerce site. So let’s say we multiply our 7 by 100. If you think about it, 700 products with one image each isn’t unrealistic (in fact for a lot of you, that’s probably low balling it a LOT). So you can start to see the kind of impact image size can have…

 

Remember, it’s not just product images you should be looking at. Those eye-catching banner images can creep up in size really quickly, as can your call-to-action tiles and brand logos.

 

For those who are numbers people I've done a little before and after comparison of our home page (which had two of the largest images). By making the above changes we were able to drop our average load time from 4.532 seconds, to 4.403. I know it probably doesn't sound like much, but remember that was only 2 images. How many images are on each of your pages? 

 

Well, that’s my confessional done for the day.

 

I hope you can take away some useful learnings from our little bungle. I’d love to hear how much digital “weight” you’ve been able to shed from your sites, so feel free to get in touch!

 

Contact Commerce Vision


Related Articles