Hey everyone, this is Patrick from code that converts and today's post is the first post I'm doing in a series about how you can optimize a Shopify store to improve site speed.
In my experience, every Shopify store eventually deals with issues with page speed and in order to make sure your customers get the best shopping experience in your Shopify store possible, optimizing page speed needs to be top of mind.
This first post is about the importance of optimizing images in order to improve your page speed and how you can get started with doing that.
If you prefer to watch rather than read, you can just check out this video below.
Why it's so important to optimize the images on your Shopify Store
In e-commerce, images are very important because they allow you to show off your products to customers and are used to help your customers figure out if your product is right for them.
Most e-commerce stores use images on various pages such as the:
- home page
- product page
- collections page
- various other pages of the store
Images are a vital part of a customer's user journey and having great-looking images is one of the things that can elevate you as a brand and boost your conversion rate.
Obviously, making sure you have nice-looking images is a given, but did you know that the size and quality of an image used on a page has a direct impact on how fast that page loads?
Furthermore, 70% of consumers admit that page load speed has a direct impact on their willingness to buy from online retailers.
Hopefully, it's perfectly clear to you now that page load speed is one of the things that can make or break you as a brand in the eyes of consumers.
To start us off, let's use a real example on Shopify to illustrate the importance of optimizing images to improve page load speed.
For this example, I will show you a speed test run on 2 different Shopify sites using Google Lighthouse which is a free tool you can use to get a sense of how fast your store is.
An Example of a Slow Shopify store
Okay, the first example we're gonna be using is from a website called Lagos. Lagos is a Shopify store that sells designer jewelry.
If you take a second and click the link above, you can check out Lagos and you'll see that it is a beautifully designed Shopify store.
But they got some speed issues according to Google Lighthouse.
Let's take a look at the results of the speed test.
The test above was taken with Google Lighthouse right in the browser using the Google Chrome dev console and as you can see from the lighthouse score, Lagos has a lot of room for improvement.
Since I'm on a new MacBook pro with a good internet connection, the page load speed is actually pretty quick for me but imagine if I had an old smartphone with just a 3g internet connection.
That's the kind of phone that is used when running the mobile version of these speed tests on Google Lighthouse.
Now I know it might seem silly to test it this way as most people you know that might be interested in your products probably have a good phone (probably an iPhone) and a decent internet connection.
But there are people out there that have old phones and might not have access to the best internet. Â And if you are looking to improve the overall shopping experience of your store for all of your potential customers, this is something you should be thinking about.
Now the cool thing about Google Lighthouse is that in the report given to you, you can see which aspects of a page are contributing to a bad score and it gives you more information about how to fix it.
The report for Lagos showed that a few of the issues with their site had to do with unoptimized and oversized images.
The issues were:
- Not deferring offscreen images
- Using images that were not properly sized
- Not using next-gen image formats
An Example of a Fast Shopify Store
Before we can talk about how to fix the image-related issues in Lagos, let's take a look at an example of a "fast Shopify store".
This example was taken from a Shopify store that I had built when I was working on building a wishlist feature into a Shopify theme without using an app.
The store was built using the Shopify Refresh theme which is a free Shopify 2.0 theme that any merchant can use for their store if they want.
The Shopify store that I used with this theme had properly sized images and the theme itself is built to make use of image best practices such as lazy loading images, using compressed images, and serving properly sized images to the browser.
You can see how all this can affect the Google Lighthouse score in the image below.
Now that we see how image optimization can play a vital role in improving Shopify store site speed, let's take a look at how we can fix the image issues mentioned in the Lagos lighthouse test.
How to get started with fixing image optimization issues
As I mentioned earlier, the report generated by Google Lighthouse will actually show you the areas on a page that triggered a specific issue and give you more information on how you can go about fixing it.
Deferring Offscreen Images
The very first image-related issue was deferring offscreen images. Whenever the deferring offscreen images issue pops up in Google Lighthouse, it is usually caused by not making use of a technique called lazy loading on your Shopify store.
At this point, if you're scratching your head thinking, "yeah but what's lazy loading", I have the official definition below.
This is pretty much a fancy way of saying instead of loading every image on a page during the initial page load, the browser will load the images in pieces.
Just to further illustrate the point, if a Shopify store had a big image at the top of the page and that's the only image you can see in the current view of your device, all the images that require you to scroll in order to see them will be loaded in after the initial page load.
So the browser will load the images as they appear on the screen instead of loading them all at once.
This is one of those techniques that make your page load speed a lot faster and it's definitely something you should be doing.
So if we apply this to Lagos, the fact that this issue pops up means that the Shopify theme they are using for their Shopify store is not making proper use of lazy loading.
As a merchant if you face this issue on your site here are a few things you can do:
- Use a paid Shopify theme or one of the free Shopify 2.0 themes like the Refresh or the Dawn theme. Paid themes or themes built by the Shopify team make use of lazy loading and other speed optimization best practices.
- Reach out to a Shopify Developer like me and have them add lazyloading to your site
- Try using a Shopify app to add lazy loading to all of your images.
Please note that if you try to use a Shopify app to optimize images or lazy load them at scale make sure that the app has good reviews and a great customer service team.
Dealing with improperly sized images
Now we can move on to the issue of having improperly sized images. Here's the explanation for this one:
Naturally, a lot of those assets are going to be images and when the images have loaded, the browser sends a request to a server to download the images and once downloaded the browser will scale the image down to the size needed to display it on the customer's screen.
This sounds incredible right?
But the issue with this whole process is when you are using really big images.
For example, think of the homepage for Amazon. Like most big brand e-commerce sites, there are many images on the home page. Imagine that every image on the Amazon home page was 2000 pixels wide and 2000 pixels tall and the person that was trying to access the home page was using an old iPhone with a bad internet connection.
When the browser loads all those images it will take a little while to download all the images and scale them down to the size required for the customer's device.
This is the perfect storm to decrease your conversion rate and it's not a situation you want to find yourself in.
Thankfully Shopify allows developers to make use of their server and serve images in a way that optimizes everything already for you out of the box. But this is the kind of thing that has to already be included in your theme and if it's not, you're going to have to manually resize the images yourself.
You can use a service like Befunky to help you out with this. It's an incredible free tool that will help you resize and edit images. I highly recommend you check it out.
Once you resize the images to your liking, you can then re-upload them and solve that issue.
Serve Images in Next-Gen Formats
The last issue from the Google Lighthouse report for Lagos was not using next-gen image formats.
If we take a look at the description for this in the Google Lighthouse report, it says:
Using next-gen image formats allows the browser to download and resize images faster which makes for a faster page load speed.
You can use a service like Convertio to convert your images over to next-gen formats. Doing this should help you deal with this issue.
And if you want to further optimize the image after converting it, you can use Tiny PNG to compress the image and make it load even faster.
Now if you happen to have a really big store with hundreds of products and product variants it probably isn't a good move to go through each product one by one and optimize each image. So instead you might want to hire a Shopify developer to help you out or make use of an app that can convert or optimize your images for you.
If you choose to go this route make sure you read the app reviews has lots of positive feedback from other Shopify merchants, and has a good customer service team.
If you choose to use an app to do this make sure you do the following:
- read the app reviews to see if the app has positive feedback from past customers
- reach out to customer support for the app via email if it is included in the app listing on the Shopify app store
Wrapping Up
Remember if you are making use of a good theme it's possible that it will handle a lot of these image issues out of the box for you but if not you can use the tips above to help you figure out how you can make optimizations yourself.
And even if you have a great theme that can deal with a lot of these image issues, it's always a good idea to run a lighthouse test on various pages of your store to see where there are opportunities to make improvements to boost your page speed.
The key pages to focus on are:
- The homepage
- The Product Page
- The Collections Page
Once you make optimizations to those pages, you can branch out to other pages on your site and improve them. I hope today's post was very useful for you and you can use some of these tips to make improvements to your store's page load speed.
If you enjoyed this post please subscribe to our email list so you can get notified whenever we put out new content.
