If your Shopify store loads slowly, you’re not just losing speed—you’re losing customers. One of the easiest ways to improve both site performance and user experience is by adding lazy loading.
Lazy loading ensures that images and other media only load when they’re about to appear on the screen. This reduces initial load time and makes your store feel faster—especially on mobile.
In this simple guide, we’ll show you exactly how to add lazy loading to your Shopify theme, step-by-step. We’ll show you multiple implementations including doing it manually by editing theme code as well as using an app so you can use the best method for your Shopify store.
Understanding Lazy Loading
What is Lazy Loading?
Lazy loading images and other media like videos, means that they won’t get loaded by the browser until the user needs to see them. You’ve probably noticed this on websites you’ve visited where images fade in as you scroll through the page.
The alternative to lazy loading is eager loading which is generally used by default where images and media are loaded as soon as the website loads.
Benefits of Lazy Loading for Shopify
There are numerous benefits of lazy loading including improved store performance and user experience. Lazy loading improves performance as it reduces the initial loading time by delaying when images and media gets loaded by the browser.
It also improves the user experience of your store as switching pages will feel faster for users and more snappy. No frustration or excessive delays negatively impacting your users.
How Lazy Load Images in Shopify
To actually implement lazy loading in Shopify, you have two main methods. One is manually editing your theme’s code and the other is using an app from the Shopify app store.
Choosing Images to Lazy Load
Firstly, let’s discuss which images should lazy load as it’s not all of them.
All images and other media below the fold, meaning not visible right away, should be lazy loaded. On the other hand, images and media above the fold should be loaded right away as the user wants to see this content fast.
For example, you shouldn’t lazy load:
- Images in the hero section
- Your logo in the navigation bar
- Other images above the fold
Whereas, you should lazy load:
- Images in sub menus of your navigation
- Images below the fold
- Videos and other media below the fold
Now that we’ve covered which content should be lazy loaded, let’s move on to the manual implementation.
Manual Implementation through Theme Code
To manually implement lazy loading, follow these steps:
- Open your Shopify admin dashboard
- Navigate to themes
- Create a duplicate of your currently live theme. This is done so you can review your changes without affecting your live store and customers.
- Click on the three dots and click edit code
- You’re then going to go through the theme’s files, and add the loading=”lazy” attribute to all the <img /> tags for images that show off screen. This will ensure they get lazy loaded.
- For videos, you can add the preload=“none” attribute to all <video> tags for videos that show offscreen.
And that’s it, make sure to preview your updated theme before publishing to make sure it’s working as expected and nothing was accidently broken while editing the theme’s code.
For a less technical solution, let’s talk about using a Shopify app for lazy loading.
Using Shopify Apps
Our recommendation for a shopify app to implement lazy loading is Lazify.
Simply install the app, then navigate through your pages and choose which media you want to lazy load. Make sure to only choose images and media below the fold and not directly visible to the user.
This solution is simpler than the manual implementation, however you do have to pay a recurring fee while using the app whereas adjusting your theme’s code is free.
Troubleshooting Lazy Loading Issues
Common Problems and Solutions
The most common problem we see is accidentally lazy loading images above the fold such as in the hero section. This hurts your store’s speed since content that is expected to load away is now delayed from loading.
In addition to decreased performance, it also harms user experience as your store will feel slower and potentially frustrate users. The solution to these issues is to simply eagerly load images that are above the fold.
If you’re not sure whether an image is being lazy loaded, you can also use the developer tools of your browser to check. To do so, simply right click on an image and click ‘Inspect’. This will bring up the dev tools and show you the image tag where you can check if the loading=”lazy” attribute is present.
Testing Lazy Load Effectiveness
To test the effectiveness of lazy loading for your store, you can run a speed report prior to implementing lazy loading and then again afterwards. You can then compare the performance between the reports and there should be improvements.
If you notice that your FCP or LCP have dropped significantly after implementing lazy loading, you’re likely lazy loading content that shouldn’t be lazy loaded. This will be revealed in the diagnostics part of a pagespeed report.
Conclusion
Adding lazy loading to your Shopify store is one of the simplest yet most effective ways to improve site speed and deliver a smoother user experience. With shoppers expecting fast, seamless browsing, especially on mobile, this small tweak can make a big difference in engagement, bounce rates, and even conversions.
Whether you’re optimizing a custom theme or editing a prebuilt one, lazy loading ensures that only the images your visitors need right now are loaded which cuts down on unnecessary load times without affecting the look and feel of your store.
Summary of Best Practices
Here’s a quick recap of the best practices when implementing lazy loading on Shopify:
- Use native lazy loading (loading=“lazy”) for images where possible
- Only apply to off screen images that are not shown right away
- Avoid lazy loading above-the-fold images — this can hurt perceived speed
- Combine lazy loading with image optimisation for maximum performance gains
Final Thoughts on Shopify Lazy Loading
Lazy loading is a smart, low-effort optimisation that gives your store a noticeable speed and UX boost, without needing apps or complex changes. When implemented correctly, from our experience, it improves your store’s performance and user experience.
As Shopify evolves and web standards continue to favor speed and performance, lazy loading will become a must-have, not a nice-to-have.
Take the time to implement it now and your users (and conversion rates) will thank you.
