How to speed up your Shopify store

Last updated: 18/03/2023

‍

‍

We took a site from 46 to 92/100 speed score on desktop in 48 hours.

How?

Image optimisation!

In this article we will cover:

• Why image optimisation is important?
• 8 actionable steps to improve image optimisation
• 6 tips around image optimisation (we have some bonuses for you)

‍

Why image optimisation is important

Images/Media are one of the biggest culprits when it comes to poor performance on website loading speed across the board. In fact most blogs we’ve read have pointed at images in their top 5 things that slow down a website.

In eCommerce time in money. If your website takes more than 4 seconds to load, studies show 63% of shoppers won’t bother anymore. In fact for each extra 0.1 second improvement in mobile page speed, retail conversions increase by 8.4%!

In a world where attention spans are close to 2 seconds, it’s important your eCommerce store is loading as quick as it can in order to reduce friction and improve user experience.

Images are a great place to start in terms of optimization. Because browsers can load the image asset files quicker. The main thing your website need to load are:

1. CSS & JS (to make the page look nice & function)
2. Images
3. Font files
4. Fetch/XHR (requests to do with getting/sending data)

Here’s a visual representation of that.

‍

What have you got to gain from doing this?

Quicker loading = faster page speed = less friction for customers + better experience = higher conversion rate = more revenue!

‍

Some tools we personally use, love & recommend for image optimisation:

• Google page speed: https://pagespeed.web.dev/
• GT Metrix: https://gtmetrix.com/
• Tiny PNG: https://tinypng.com/
• Cloud Convert: https://cloudconvert.com/image-converter

‍

8 actionable steps to improve image optimisation

‍

1. Turn off “show 2nd image on hover”

• Infinite slideshows
• Infinite carousel
• 2nd image on hover

All these sections usually involve loading up a ton of different images. This is just adding extra work to your customers browsers.

Yes these sections do look cool but if you’re reading this article we're assuming performance should be more important to you right now.

‍

2. Compress all your images

You can’t have an image optimisation blog without telling people to compress their images! It’s so important. Use sites like tinypng.com to compress image file sizes for all images you put on your store. You’ll be surprised that the exact same image file can lose usually between 40-70% of it’s file size.

‍

3. Lazy load your images

What actually is lazy loading?

It’s a method used to not load certain parts of a webpage until they are needed. So instead of loading the whole page at once (default), it only loads images when they are needed (e.g. right before you scroll down to view them).

To use our waterfall example, what lazy loading is doing to removing some on those images from the initial waterfall as they aren’t needed. This is great because it improves our load speed and means things only get loaded when needed - much more efficient.

Simply add a loading=”lazy” attribute to images on your website. You can check whether this is being done by right clicking on any images on your browser. If you see an loading=”lazy” attribute inside on the <img> tag then you know that image is being lazy loaded.

‍

4. Resize all big images to a max width of 2500px

There’s no studies available but we can safely say there are a very small % of people with a screen bigger than 2000px and an even smaller % of people with a screen bigger than 2500px.

With this is mind, it begs the question why do you have these huge 4096 x 3800px image files? They may looks great…for a tiny minority of people with a screen that big. For the other huge majority a image file that big won’t make a difference.

‍

5. Use next gen formats

Using WEBP and AVIF files for images are well kept secrets when it comes to better image loading performance. They reduce an images file size noticeably without any noticeable drop in quality. When you run a page speed test on Google and it says “Serve images in next gen formats” - that’s what it’s referring to. They have around for almost a decade and are supported on almost 93% of browsers.

‍

6. Optimise your product images too

When we say to optimise images on the store we mean the product images too. And the collection images. These are often overlooked.

People forget to run speed tests on product pages as well as homepages too. In fact there’s a strong case that as an eCommerce store the product pages should be more important!

Take the time and compress all of your product images if you want buyers to have a smooth buying experience.

‍

7. Sacrifice image quality‍

Sites like ASOS don’t have super HD images for a reason…performance. If your brand is a top of the range luxury brand then having these super heavy HD images makes sense but if not then there isn’t any reason to have them.

We’re not saying to have pixelated images - no. They just don’t need to be super super clear and high quality. For examples a 540p image instead of 1080 HD one.

‍

8. Make images responsive

Get a developer to use SRCSET & sizes attributes on all your images tags. This serves different sized images depending on the user's screen size. Also known as responsive images.

‍

‍

‍

6 tips around image optimisation

Most of these tips won’t affect your front end site speed but they will be useful for internal management, improving accessibility & SEO.

‍

1. Implement a new image system

From now on, before any image is added to your website make sure it is:

• has been compressed
• isn’t great than 2500px
• It’s in a next gen format

Implementing a system like this makes sure you keep on top of image optimisation and don’t take your eye of the ball as you make changes to your website over time.

‍

2. Set explicit width and height attributes to your images

This reduces Cumulative Layout Shift which improves user experience and your overall speed score.

What is Cumulative Layout Shift (CLS)?

To give an example: sometimes you click on a website or app, then you want to click on a button. But before you click it, the page jump/stutters so it pushes the button down and you end up clicking onto empty space & getting a little frustrated?

That’s caused by an image or a part of the website not being loaded yet (taking no space), and then when it is loaded, it grows to the size it needs (takes up more space) to and moves the whole page with it.

‍

3. Add alt tags to images

This won’t actually sped up your store but it will make search engines love your website because of SEO and accessibility benefits :)

‍

4. Set loading to “eager” for images above the fold

Not every image on your website should be lazy loaded. You don’t want the images at the top of your page (the “Fold”) to be lazy loaded because they should be visible as soon as possible - since it’s the first thing people see.

It is actually detrimental to your store experience & performance to lazy load images which are above the fold. This includes images on your header and hero.

‍

5. Declutter Files

Again the frontend of your website won’t see any difference but this is great for internal organisation of your images & files. Simply delete all the old images you don’t use anymore.

This also helps because it means you can remove all the old images which weren’t optimised so they never clog your site speed again.

‍

6. Re-use the same image where possible

There are only a few rare instances where this would be applicable. But there’s no need to have 3 different uploaded instances of the same picture/logo. This is forcing your browser to load those 3 different images instead of just 1.

‍

‍

‍

Once you've done all this your images will be loading as quickly as Usain Bolt

Thanks for reading!

‍

—

We are Step Labs - a Webflow & Shopify web design & development agency! If you would like to build a beautiful and high-performing website, contact us at victor@steplabs.xyz.

‍

Written By: Victor @ Step Labs