Lazy loading images: when it helps and when it slows the page
Lazy loading delays images below the fold until the shopper scrolls. Use it for lower images and keep it off the main product photo. See how to check.
2 min read
Area
Store discovery
Severity
Low
Fix effort
Small
Stores failing
0%
Of 35 stores we scanned where this check applies, 0% fail it and 63% pass. See all benchmarks.
Lazy loading tells the browser to load an image only when the shopper is about to see it. It saves data for pictures far down the page. It should be used for images below the first screen and never for the main hero or product photo, which should load first.
Why it matters
Product and collection pages can hold dozens of images. Loading all of them at once makes the first view slower. Lazy loading spreads the cost out. Used on the wrong image it does the opposite, because the browser waits to fetch the picture the shopper came to see.
What the audit looks at
The audit checks that images lower on the page load only when needed.
What usually causes it
- A theme that never sets loading="lazy" on gallery and collection images
- A lazy-loading plugin that also delays the first image
- Images added through a page builder that strips the attribute
- Third-party sliders that load every slide immediately
How to fix it
Load images below the first screen only when the shopper scrolls to them. The effort is small, usually a setting or a paste and under 30 minutes.
- Add loading="lazy" to images that are not in the first screen.
- Keep the main product or hero image eager so it appears at once.
On Shopify
- In the theme code, add loading="lazy" to image tags in sections below the fold (many themes do this for you; check yours is up to date).
On WooCommerce
- WordPress adds loading="lazy" itself on current versions. If images still load up front, a theme or plugin is turning it off: check your image optimisation or performance plugin settings.
How to check it yourself
- View the page source and search for loading="lazy" on images below the first screen.
- Open DevTools Network, reload, and check how many images load before you scroll.
- Confirm the first product image does not carry the lazy attribute.
Frequently asked questions
Does lazy loading hurt SEO?
Native lazy loading is supported by search engines. Problems come from older script-based methods that hide images from crawlers.
Should every image be lazy loaded?
No. Leave the first screen images alone so they load as early as possible.
Related checks
- robots.txt for ecommerce stores: what to allow, block and link
- XML sitemaps for online stores: how to check and submit yours
- www vs non-www: how to make your store open at one address
Further reading
Check your own store
See whether your store passes this check
Paste your store URL. The audit loads your pages in a real browser and shows the result for this check with the evidence behind it.