E-commerce industry growth is skyrocketing at the moment. However, at the same time, the underperformance of online stores is huge, which gives companies an excellent chance to capture the market they are in and win the competition. In this post, I would like to present you a Shopify Image Optimisation Guide to boost Page Load Time and Conversions.
Shopify has landed as a top of the class e-commerce platform which makes it a perfect candidate for performance analysis and improvement.
Statistics show that 39% of people stop engaging with a website if it takes too long to load and 81% of shoppers research their product online before purchasing. Moreover, 85% of customers start a purchase on one device and finish it on another
Which means there is a good chance to win the competition, improve conversions, achieve sales online and offline, help customers love your website UX and help them buy from you easily and happily attracting a broader audience.
I absolutely love working with images in ecom because their volume is usually huge and it is quite obvious how much value I bring to the business.
Dmitry Pokidov, Pixboost.
According to our statistics image data takes up to 86% of an average online store page weight losing hundreds of thousands of dollars in sales.
Primarily this is important for:
- Product pages
- Search result pages
- Landing pages
- Hero banners and screen-large photos
In this post, I will walk you through significant performance improvements that smash page load time by 30% and make images smaller by 50% on desktop and 3 times smaller on mobile; for that, I use Pixboost — Image Processing Platform that improves conversions.
What will be covered:
- Sandbox and sources
- Performance reports
- What is included in Shopify by default in terms of image optimisation
- How to improve your image performance using Pixboost
- Go through impressive stats that is possible to achieve today on your online store
- Dive deeply into implementation.
Shopify store sandbox and sources
When I first looked at Shopify I was amazed how easy it was to build an online store, it took me only a few clicks. I thought why not make it even better through image performance optimisation. Pixboost is a powerful tool that improves SEO, UX, and conversion rate all at the same time for e-commerce websites. It is a cloud solution, therefore, it is pretty easy to setup and use.
Let’s take a look at a demo Shopify store that I use as an example in this article. You can find it here — https://wroomwroom.myshopify.com. As usual, all code is open sourced and published on GitHub — https://github.com/Pixboost/shopify-wroom-wroom-debut.
Measuring the performance
It is essential to measure the ROI of your effort when using a new tool. I love “before” and “after” snapshots. It is even better when working with other teams. It feels so good to see the visible improvement and of course to be recognized for it.
Yep, talking about measuring the performance of images.
For this tutorial I decided to use a default theme “Debut” and then measure its performance “before” and “after” Pixboost integration.
I choose 6 metrics to measure performance:
- On Content Load — time to load an initial HTML document. At this stage, the user can see the main layout of the page but usually can’t do much with that content
- On Load — time to load the full page. User can see the full page with all the content and can interact with the page
- Number of requests — a number of HTTP requests that the browser made. Usually, each image on the website translated into one HTTP request
- Total time with queueing — time that browser spent on loading all images including the time when a request was waiting in a queue to execute
- Requests time — time that browser spent on downloading all images. That metric shows how much faster images became
- Images Size — the size of downloaded images in Bytes.
I optimised the demo website, and measured the performance of the two most important pages:
Please, note, currently, the shop uses the optimised theme, but you can preview the demo shop with the original theme using this link: https://wroomwroom.myshopify.com/?fts=0&preview_theme_id=33132314679
The shops are exactly the same, and you can find which one you are on by the title. The optimised version has [OPTIMISED] prefix:
Why not just default Shopify?
So, you might ask, why do I need something extra, Shopify has to have something to help us with images? Yes, that’s true it has. It is essential for a good ECom platform to have some image management and optimization functionality by default.
Indeed Shopify has a few features that could be used for serving and managing images.
I am talking about:
- Dynamic sizing. Shopify has built-in support for image resizing. You can use it by leveraging “img_url” filter. You can find more information about it here.
- Content Delivery Network. Shopify already has CDN. Once you upload your image, then it will be served from cdn.shopify.com. For more info on CDN read my college’s article “CDN explained”
So, as you can see, Shopify has a bare minimum of features that can help with image performance, and, therefore, there is a room for improvement. Features like WebP, Responsiveness and Lazy loading can improve site performance for up to 30%.
Let’s take a look at what Pixboost can add to Shopify:
- WebP. That is truly a secret weapon. WebP is a new generation format that widely supported by browsers. In general, it can provide 30% lighter images without quality loss. I’ve already written a post on it here.
- Responsive images. Pixboost implemented a simple way of using different images and sizes for different devices. It is especially useful because you keep one image and Pixboost serves the optimised bundle of images of various sizes for different devices.
- Lazy loading. Pixboost uses the latest technology to provide the best user experience without performance impact. Read more about lazy loading in Pixboost here
- CDN. Pixboost is end-to-end service with out-of-the-box CDN. It partners with Google to use their CDN for images delivery. Performance comparison of CDNs here — https://www.cdnperf.com. Surprise-surprise Google CDN is number one :)
- SEO. Images are a big part of any eCommerce website. When Google crawls your site, it stores links to your images, and people can find them on Google Images Search. Shopify is serving images from cdn.shopify.com which is not your domain. Pixboost provides an easy way to setup subdomain for your images. Read more on how to do that here.
Impressive stats that could be yours
I put together a small infographic with graphs, so it’s easier to see the difference. You’ll find actual numbers below in the table.
Google recommends to keep overall images size on the page below 1 MegaByte.
So, as you can see it was possible to speed up the homepage by 34%. Which is quite incredible given that “Debut” theme is already doing some performance optimisation.
Now, let’s deep dive into the technical implementation and see what to change in your Shopify theme to achieve similar results.
Pixboost is a powerful real-time image optimisation tool that can be integrated pretty quickly. Let me show you how to do it.
All changes that I’ve made to vanilla “Debut” theme to integrate it with Pixboost can be found here.
Overview of the service
Pixboost provides a simple image manipulation API. So, what we need to do is to change URLs of the images, so that they will be served by Pixboost using the right sizes and next generation formats through CDN. For instance, if the original image is:
If we want to resize it to 194 pixels width, then URL for the optimised image would be:
What we’ve done here is we used Pixboost API to resize the image.
Let’s go through some of the parts of the final URL:
- https://pixboost.com/api/2/img — this is the root path to the API. As I’ve mentioned above, you can setup your domain as well (it would look like https://img.yourstore.com/api/2/img). We follow it up with the original URL of the image.
- /resize?size=194 — this is the operation that we want to perform on the image. In this example, we want to resize the image to 194 pixels wide with preserving aspect ratio. You can find a complete list of operations and documentation [here](https://help.pixboost.com/api/).
- auth=MjMwNDUyNzk5MQ__ — this is your API key that the service generates for you once you signed up. The API key is used for security reasons. Read more on API Keys here. https://help.pixboost.com/setup/manage-api-keys.html. This API key is public, and you don’t need to worry about hiding it.
Pixboost allows automating URL changes through its Pixboost.js library for DOM JS integration https://github.com/Pixboost/pixboost-js and Pixboost-react library for apps that are using ReactJS https://github.com/Pixboost/pixboost-react.
For Shopify integration, we use both API and Pixboost.js.
To start using Pixboost on your Shopify store, you need to create Pixboost account using this link. You will be on a free plan that includes 2GB of traffic monthly for an unlimited time. There is an option to pre-setup your account for Shopify.
If you haven’t checked it then add cdn.shopify.com to your images domain list:
Once you finished registration you’ll have API key and you are good to go now.
Shopify did a great job by supplying documentation for developers. I used Shopify Theme Kit to enhance “Debut” theme with image optimisation.
In the article, I go through two different types of images: content (collections or featured articles) and product. They’ve implemented a bit differently, so we have to use different techniques to optimise them.
Let’s optimise a hero banner:
You can find the source code for the hero banner in the sections/hero.liquid file. Below is the original code that “Debut” theme uses for rendering the image:
What makes a hero banner different is that it uses background CSS image instead of using a normal <img> tag. Also, Debut uses “bgset” snippet to render the background image:
Bgset snippet already doing resize of the image and what we want to do is to optimise that image using Pixboost API:
I added our snippet called “pixboost” to modify the URL of the image. The snippet allows us to reuse it in other parts of our code which is handy:
If we compare the hero banner before and after then, we’ll see that: Size of the banner went down from 182Kb to 75Kb.
By using Pixboost, we’ve just made our hero banner smaller by 59%. How good is that!
Let’s see how can we improve the product images.
For product images we are using Pixboost.js library, so we had to set it up first. First of all, we need to add pixboost.js code to the store. To do that add below script to the <head> section of layout/theme.liquid file and put your API key:
Worth to mention that pixboost.js library also has a lazy loading feature.
Product template is located in sections/product-template.liquid. That’s how the original image is getting rendered:
This code is important because it selects the layout. <img> though uses its own sizes defined by data-width attribute.
The updated code with optimisation:
Here, in code, we introduce a new variable “product_image_width_pixels” for the width of a product image that we are calculating based on the device. We use that variable in <img> tag to specify the final width of the optimised image. We use a similar pattern for optimising collections and featured images. The results for the product image: 146Kb -> 95Kb. This gives us a 35% improvement over the original image.
I am quite happy with the achieved results. Hope my Shopify Image Optimisation Guide would be helpful and will boost Page Load Time and Conversions for your online store.
If you need a hand or have any question, please, do not hesitate to ask in comments or send me an email at firstname.lastname@example.org. Happy Selling!
If you have a Shopify theme in mind that needs performance enhancement, I would appreciate if you can comment on this post or drop me an email at email@example.com with the name of a theme and URL to your Shopify store.