Lazy loading images on Shopify is practically crucial. Every store has numerous product pages, which are usually very heavy on images. If not lazy-loaded, they will slow down the Shopify store pages, and rankings, conversion rates, as well as general performance will inevitably suffer.
In this guide, we will explain the lazy loading technique, how lazy loading affects SEO, how to add lazy loading to Shopify store pages and give actionable tips for proper lazy loading implementation.
Lazy loading is not the only way to speed up a Shopify store. Ensure the best possible website performance by optimizing your images with TinyIMG.
Install TinyIMG now!What is lazy loading?
Lazy loading is a technique used to optimize your website’s performance. It mainly refers to delaying the loading of visuals that the website visitor does not yet see.
Lazy loading helps improve website speed and perceived performance, meaning the user's impression about how fast the website loads.
How does lazy loading work?
Images are one of the main culprits for terrible website speed. Visuals that get loaded simultaneously, even if they are optimized, can slow down a web page to the point that visitors will leave without even seeing the content.
Lazy loading helps by delaying the complete loading of images that website visitors do not immediately see.
Lazy loading is implemented from the technical side of things by swapping out the HTML src attribute into data-src as a placeholder. Then, when a person reaches the image, and its loading is triggered, JavaScript grabs data-src URL and updates it with the src attribute.
You have various design options for your data-src placeholder attribute that we will cover later on.
How lazy loading benefits Shopify stores
Every Shopify store’s product pages are packed with images. And that’s how it should be, people visiting your store should be able to see the product they like from every angle.
Lazy loading can help a lot with better store performance, this is how:
- Better rankings - lazy loading massively speeds up websites. Google likes fast Shopify stores and it will reward you with better rankings on the SERPs.
- Lower bounce rates - if your Shopify store visitors can start browsing your store pages immediately after clicking on them, your bounce rates will undoubtedly be lower than if they were staring at a white screen for three seconds.
- Higher conversion rates - lazy loading contributes to perceived performance, meaning how fast your website seems to your shoppers. A fast website equals a smooth shopping experience, and that equals more sales.
Remember that you will benefit from lazy loading images not only on your product pages, but also on your blog, homepage, and collection pages. That, paired with other Shopify image optimization techniques, will bring your store’s performance to the next level.
Does lazy loading affect SEO?
The short answer is definitely yes, lazy loading affects SEO in a good way.
First of all, let’s address a couple of concerns. Despite the fact that the src attribute is swapped out into its alternative, the image file is seen by crawlers. Another thing that gets brought up is alt texts. They are also fully available for crawlers, regardless of when the image loads.
Now onto the benefits. If implemented correctly, lazy loading will help improve one of the three Core Web Vital metrics, Largest Contentful Paint (LCP). LPC is a metric that shows how much time it takes for the longest piece of content to show up on the screen.
Core Web Vitals have been a ranking factor for a while now, and an important one, so boosting LPC score will lead to an increase in rankings.
In general, lazy loading is a great way to improve Shopify store speed, which is key for good online store performance on search engines.
You can do more than lazy loading to be in charge of your store’s SEO performance. Install TinyIMG and get access to numerous SEO features you can optimize and automate!
Get TinyIMG nowHow to implement lazy loading on Shopify?
At this point, you should be convinced that lazy loading Shopify images will only benefit your store. If you’re ready to implement lazy loading, let’s take a look at a few different ways you can get that done on Shopify.
Use Shopify theme that supports lazy loading (recommended)
One of the most simple ways to get your Shopify lazy loading on point is to choose a Shopify theme with integrated lazy loading.
For instance, many of the best Shopify themes offer the lazy loading feature.
Of course, you want to make sure that it’s not your only criteria and evaluate the rest of the theme’s functionalities critically.
Add lazy loading manually
If you’re not a stranger to coding, you can try implementing lazy loading to your Shopify store manually.
If you go down this route, we recommend implementing lazysizes.js, a fast and SEO-optimized image lazyloader.
The way the process will work depends on the Shopify theme you’re using, but overall you will need to add lazysizes.js library to your Shopify theme assets and then modify theme.liquid to reflect that.
If you want more detailed instructions and troubleshooting help, refer to this page with a pretty extensive breakdown.
Alternatively, you can implement store-wide lazy loading with a specific script. You will also need to go to Actions ->Edit Code in your Themes section and edit themes.liquid.
You can find more detailed instructions and code snippets you can use for reference here.
Also, don’t forget that you can always ask a developer to give you a hand with manual lazy loading implementation if all of this seems intimidating.
Tip: Don’t forget to create a backup of your theme before making changes to the code. Go to Online store -> Themes -> Export and you will have a backup at hand in case things go wrong.
Lazy load individual images
If you’re only worried about the speed of specific pages, you can implement lazy loading on individual images only. This method works by applying a “lazyload” class to your image file.
Shopify lazy loading tips
Before we talk about testing lazy loading for Shopify stores, there are a few other things to bear in mind if you want the best possible results:
- Do not lazy load images above the fold. This can damage your LCP score pretty drastically. If you want more technical background on this, here is a Stack Overflow thread.
- Use CSS to specify image container width and height. If you don’t, it will create sudden layout shifts that can be disruptive for user experience.
Lazy load design type
When thinking about your website design, you have to choose appropriate placeholders for true lazy loading. After all, your store visitors do get a glimpse of them so you want a placeholder design that matches your brand and the overall feel of your store.
There are two main options to consider:
- Dominant color. Pick a color that dominates your image and load a plain color before your real image shows up. Stores that sell digital artwork or photography should consider a dominant color placeholder as the images should not be associated with low quality under any circumstances.
- Low-resolution images. An equivalent of the real image just in very low resolution could be a great option for retail stores since they give an indication of the object in the image.
In rare cases, you can choose to load thumbnails instead of your regular images until the person gets to them.
How to check if your Shopify lazy loading works?
There are two easy ways to check if your Shopify images are being lazy-loaded:
- Use Shopify Analyzer tool. Among any lazy loading-related issues, it will also give you actionable recommendations for general Shopify store optimization.
- Use your browser “Inspect” tool, take a look at “View Source” and look for “lazy”. If you can’t find any elements like that, there is probably an issue with your lazy loading implementation.
Curious to read more? Check out these articles:
Frequently asked questions
Yes, lazy loading is one of the best image optimization techniques to improve Shopify SEO. It speeds up your website and improves LCP metrics, both of which lead to better search engine rankings.
Definitely, that’s the main benefit of lazy loading. Since lazy loading defers image loading until the point they are actually seen by the website visitor, the initial paid load time is significantly reduced.
It’s a good practice to lazy load all Shopify images that are under the fold. This includes product photos, images in your blog posts, homepage and collection pages.
