Shopify lazy loading can reduce unnecessary image downloads near the start of a visit. It is useful for content further down a page, but applying it to the first image a customer needs can make the store feel slower. The right question is which images should load now and which can wait.
What is lazy loading?
Lazy loading lets the browser postpone an image until it approaches the viewport. Native image lazy loading uses the loading="lazy" attribute. The browser controls how early it starts fetching the image, so the exact behavior can vary.
Images with eager loading are available to load without that deferral. Neither approach removes the need to serve appropriately sized files.
Which Shopify images should be lazy-loaded?
- Good candidates: images well below the initial viewport, additional editorial sections and supporting content a visitor has not reached.
- Review carefully: product gallery images and collection cards, because their visibility depends on layout and screen size.
- Prioritize immediately: a visible hero image or the main product image when it is the likely Largest Contentful Paint element.
Shopify’s theme performance guidance advises loading important initial content promptly and avoiding lazy loading on the LCP image.
Why lazy loading can hurt LCP
The largest visible image may be central to the customer’s first impression. If it waits for layout and lazy-loading decisions before being fetched, it can appear later than necessary. Loading priorities should follow the page’s actual design, not a blanket rule that every image must be lazy-loaded.
For the wider measurement context, see our Shopify Core Web Vitals guide.
How to review lazy loading in your theme
- Start with a duplicate theme. Keep the current storefront available while you investigate.
- Identify the first visible images. Review the home page, a collection and a product on both mobile and desktop.
- Inspect existing behavior. Check whether your theme already uses native lazy loading or a script-based system before adding another solution.
- Adjust the identified issue. Keep important initial images eager and apply lazy loading to suitable content further down the page.
- Check dimensions and responsive sizing. Loading strategy, file size and reserved layout space should work together.
A theme developer can use Shopify’s image helpers to produce responsive image markup. Avoid adding a second lazy-loading script unless a specific requirement justifies it.
Common mistakes to avoid
- Lazy-loading the hero image or first visible product image.
- Using several image-loading systems that compete with each other.
- Leaving image space unreserved, causing the layout to move as images arrive.
- Assuming a lazy-loaded oversized image no longer needs optimization.
- Testing only desktop when the mobile layout displays different content first.
For a closer look at file dimensions and image choices, read our Shopify image optimization guide. Google’s native image lazy-loading documentation explains browser behavior.
How to test the change
Compare the same page before and after using consistent test settings. Check when the main image appears, then scroll at normal and fast speeds to see whether later images arrive in time. Open the product gallery, change variants and check the cart journey.
Use our Shopify speed testing guide to record the result. A better test score should accompany a storefront that still looks and works correctly.
Want help with loading priorities?
The ChopChopify App focuses on automatic loading-priority optimization. For deeper theme, app and script work, compare our manual Shopify optimization plans.
Every manual plan includes hands-on implementation, a private project dashboard and a personalized Speed Report. Delivery is 7 working days once required store access is available.
Common questions
Should I lazy-load every image?
No. Important images visible at the start of a visit need different treatment from supporting content further down the page.
Does lazy loading compress images?
No. It changes when an image is requested. Image size and format still need separate attention.
Will lazy loading guarantee better SEO?
No. Use it to improve the loading experience where appropriate, then measure the result. Indexing and rankings depend on more than image-loading behavior.
If your theme uses a legacy lazy-loading library, see our guide to lazysizes and native loading on Shopify before removing any scripts.
