Updated: February 16, 2022
What is Lazy Loading?
Lazy Loading is a performance optimization technique that loads images as the user scrolls down the page, instead of during the initial page load.
Also known as “defer offscreen images“.
We often see a 10% – 30% reduction in page weight by implementing lazy loading.
On the browser side, the page loads faster because it’s not loading all the images right away.
On the tech side, it works by replacing the html image src
attribute with a data-src
placeholder – this prevents the image from loading in the standard html sequence. Then javascript is used to grab that placeholder url and update the element’s src
attribute, loading the image when it comes into view.
The Google effect: Lazy loaded images don’t contribute to the initial page load, so your site is lighter and gets the benefits that come with a faster load time (improved rankings and traffic).
Why is Lazy Loading Awesome?
- The page loads faster!
- Faster pages = better SEO rankings
- Faster pages = better conversion rates
Consider this:
Now let’s take a look at this example of a customer’s home page before and after implementing lazy loading:
BEFORE
Pretty heavy page with a slow load time at this point, buuuuuut…
AFTER
Check the highlights after this one optimization:
- Mobile load time improved by over 2.5 seconds
- 20 fewer server requests
- Page weight decreased by 1MB
- Nice!
Those stats are using webpagetest.org with mobile LTE 12Mbs download speed.
The site is still heavy at about 10MB (we can usually get sites down to 1MB – 2MB with a full optimization… but even with just the lazy loading you can see the significant load time reduction.
How to Add Lazy Loading to Your Shopify Theme
- Add the lazysizes.js library to your theme assets folder and include it in theme.liquid
- Locate the image tags in your theme files
- Update those image tags by swapping src with data-source and adding the “lazyload” class
- Optionally add some CSS styling for animation effects
Option A) If you want our optimization experts to handle this for you, you can order our Shopify lazy loading service.
We can usually lazy load videos as well (if they’re not at the top of the page).
Option B) If enjoy working with code and want to take a crack at it, start with the lazysizes library to implement on your site.
Read How to Safely Edit a Shopify Theme before editing your theme code. Summary: duplicate your theme before editing.
The detailed instructions to implement using lazysizes are on that page if you scroll down.
Sometimes you can run into problems, depending how the theme code is setup, but that’s part of the fun in learning 🤓
The exact files to edit in your Shopify site will vary based on your theme, but generally you want to look for the template code that loads images, and swap in the lazy loading syntax explained by lazysizes (or whatever library you end up choosing).
For example, if you’re using the lazysizes library I recommended, once you have that installed in your theme.liquid file, you want to swap out your standard img tags:
<img src="IMAGE_URL">
With the new lazy loading syntax:
<img data-src="IMAGE_URL" class="lazyload">
To install the library, download the latest file from that lazysizes page, upload to your Shopify theme Assets folder and name it lazysizes.min.js, then include it in your theme.liquid <head>
section like this:
<!--Lazy Loading -->
{{ "lazysizes.min.js" | asset_url | script_tag }}
<style>.lazyload,.lazyloading{opacity:0}.lazyloaded{opacity:1;transition:opacity.3s}</style>
*The <style>
part is used to create a subtle CSS animated fade in effect.
Once you have the code setup, you’ll see your images fade into view as you scroll down your site, rather than all at the initial page load (you can also refresh this page and scroll down really fast to try and catch the affect here).
Lazy loading can usually speed up most of your site – Home, Collections, Product pages, and Blog posts all benefit.
When we implement lazy loading, most of your store is good for the future and will automatically lazy load images. In some cases there may require manual intervention for future elements, but we’ll explain if that’s the situation in your theme.
How to check if lazy loading is set up on your website
To see if you have lazy loading on your site, you can run it through the Shopify Analyzer.
A second way to check is by inspecting the browser code by right clicking on your page, then selecting “View source”. Search for “lazy” on that page – if there aren’t any elements with “lazy” then you probably don’t have it.
If you view source and see some “lazy” elements, it’s still worth running through an analyzer tool to make sure they’re all loaded with “true lazy loading” (and not just “placeholder lazy loading”).
What images should you lazy load?
You’ll get the most gains by lazy loading:
- collection page images
- home page images
- related products
- blog images
Sometimes you might see a warning in analysis tools for icons or small graphics – I would’t worry about these.
The key benefits from lazy loading come from deferring large graphics and product images.
True lazy loading vs placeholder lazy loading
You might have lazy loading already set up, but still getting warnings in analysis tools.
This is likely because you have “placeholder lazy loading” instead of “true lazy loading”.
True Lazy Loading: Images don’t have a src
attribute, so they don’t load on page load, only when the user scrolls into view.
Placeholder Lazy Loading: Images have a small placeholder thumbnail that loads on initial page load, then as the user scrolls the larger regular image replaces the thumbnail.
Sometimes having placeholders is a design preference, and that’s ok. But if you want to maximize performance we recommend converting to “true lazy loading”.
Lazy loading and SEO
When you lazy load images, your html image elements load normally. The only thing that changes from the html side is using the attribute data-src
instead of src
, which prevents the image from showing to the viewer until it triggers to load.
From an SEO standpoint, the important alt
attribute is still present for page crawlers, and the page loads faster with lazy loading, so we recommend it for both performance and SEO.
For more information on dialing in image SEO, this post will get you set up: Image SEO for Shopify – How to Optimize for Search Engines.
What’s Next?
If you want us to implement this for you, head over to our Optimization Services page and select Lazy Loading.
If you landed here looking to optimize your Shopify site, here are more tips for speed gains:
- Automatically compress your images with Crush Pics
- Make sure you’re using JPG image format instead of PNG for photographic images (PNG’s are often 2x – 10x larger for the same resolution
- Run your site through the Shopify Analyzer to see what optimization opportunities you have, and how to approach them
- You can also lazy load apps, see our Shopify app optimization guide for this + other tactics
- If you’re feeling ambitious, check out our full performance optimization guide: How to Optimize a Shopify Site.
Hi – I know I’m late to the party… but can you explain one thing – I have looked everywhere without much help. When we create the srcset with multiple imge size – what piece of software actually creates the various version of the image? When we first upload the image in shopify it may have dsay a 300×300 size – optimized by tinyjpg or tinypng. but when the code runs – it lazyloads different sizes (per the data-witdth list). web inspector shows it is coming from the shopify cdn – with the right size. so when are these crated and stored on the CDN? I know it works, but I can’t figure out why. :-)
Hi Normand ya, so when you upload images to Shopify they store the master image. Then you can use Liquid code to format the size(s) of images that are loaded from the server.
With srcset, the browser will render the image according to the screensize. So you use the Shopify liquid variables to populate the various sizes.
With lazy loading, it’s JavaScript on the page that makes a request (to the server) to download the image that you set in the code, when the user scrolls it into view.
Any images you upload to your store are stored in the Shopify CDN, and they have the ability to give an image at any size you choose based on the url structure – you can grab images manually, without liquid, by adding the width like this: _250x. So for example to get a 250 pixel width image, you would do something like this: image-link_250x.jpg.
Can you update this article to take Cumulative Layout Shift into consideration? As lazy loading can have an impact on this
Lazy loading shouldn’t affect the layout, all it’s doing is basically hiding images until the user scrolls them into view. I recommend not lazy loading images above the fold, only images below the fold should be lazy loaded.
You helped me with my lazy load on my site but it appears that it is not working for the blog pages as they are coming back through the speed analyzer as F for lazy load. Can you explain why that might occur?
If you’re getting warnings on a page, start by inspecting the code to make sure it’s correct on the image elements, and check for console errors to make sure the script is loading and there are no javascript errors.
My guess is that you either haven’t switched src to data-src on the image elements, or added the lazyload class, or the script is not loading on that page, or the images are being loaded by a 3rd party app.
Hi, I’ve followed the instructions but the lazyloading isn’t getting recognised here http://www.dedicatedfitnessxl.com
I’ve checked the js working and it is there. data-src without src being there and also the right class. I’m stuck at what I’m missing.
Hey Dino, it looks good to me. Lazy loading will only apply to images under the fold. So for images close to the fold it will depend on the device being accessed.
Another possibility is that if your home page slider / banner is slower to load (javascript based, video, etc) then images under it may be moved up during load, then pushed back down. If they get moved up then they get loaded.
As long as you don’t have the “src” attribute (and use “data-src” instead), and have the lazysizes script loading in the
, then the images will lazy load when they’re able to (in most cases, other than the exceptions I mentioned).Joe,
I believe I followed the steps correctly to make my images lazy load but I’m not confident it worked even though my site seems faster, Page speed tests say otherwise.
https://analyze.speedboostr.com/result/fhv0yxw144
Let me know what part I missed, I bet it’s something minor.
Kyle
If the images are still getting flagged in the Analyzer, they’re still loading on page load.
It looks like those images still have the src attribute attached. Now that you have the data-src attribute, the image will get loaded in when it comes into view, so you can remove the src.
Give that a try, should fix it 👍
Where do I remove it from? And is it just src or anything connected to the “SRC” as well? Also this is from lazysizes.min.js? The asset I created that is where I am removing it?
You can find the image src attribute in the code wherever your theme files are loading an image. The most common areas are the collection thumbnail, product page, and the home page.
Lazysizes is the javascript library that reads the data-src attribute, and loads the image (injects the src attribute) when the user scrolls it into view.
Having a src attribute tells the browser to load that image, so by removing it and replacing with data-src, you prevent the image from loading on initial page load, so it can be lazy loaded instead.
Hi Joe. I’m not a developer but I tried to follow the above tutorial and seem to have screwed up my website. My images are appearing only when I’m moving my cursor over them. I need to undo this. Please help!
Hey Varsha, I took a look at your site and found the problem: I see you have a call to the lazysizes.min.js file on your site, but the link is broken. This probably means that the code you have in your theme.liquid file is incorrect, or you haven’t uploaded the lazysizes library into your theme Assets folder.
Try those 2 things. If you get stuck you can contact us. Also, I recommend duplicating your live theme whenever you make code edits, this way you can test the edits before they publish live :)