Images far down the page load straight away
Images the shopper may never scroll to load with the page, competing with the ones they see first.
Checked on: every page the audit scans · Zolvio’s check: “Images load without lazy loading”
Why it costs you sales
Without lazy loading, the browser downloads every image on the page as soon as it opens, including ones far below the first screen that the shopper may never reach. That slows the first screen and uses up mobile data.
How Zolvio detects it
While the page loads on its own in a real browser at desktop size (1,440 by 900 pixels), Zolvio notes where each image sits and whether its file downloaded before the page finished loading. An image counts when it sits at least 2 screens below the top, is shown at 50 by 50 pixels or larger, isn’t set to loading="lazy" and downloaded with the page, is an image file of 10 KB or more (not a vector image or a small placeholder), and the same file isn’t also shown higher up. 3 or more of them flag the page, and the finding lists them (up to ten) with how far down each sits and its file size.
The audit’s browser doesn’t load other companies’ files, so a carousel built by a script from another site can stay unbuilt in it and push the images below it further down than shoppers see them. That’s why this finding goes through AI review before it’s reported.
This finding is reported after AI review: on paid plans with AI turned on, the AI agent checks it against the audit’s evidence before it reaches your issue list. Audits without AI report only the 22 measured checks.
How to fix it
- Find the section that shows the images the finding lists (Online Store → Themes → Edit code).
- Add loading="lazy" to those images. In Liquid, image_tag takes a loading parameter: image | image_url: width: 800 | image_tag: loading: 'lazy'.
- Keep images in the first screen loading straight away, then check the page still shows its main image quickly.
In Zolvio: on paid plans with AI turned on, the guided fix writes these steps for your own store and theme: where to click in Shopify admin or the theme editor, or which file to open, the line to find and the code to add. Each file opens in Shopify’s code editor. Zolvio never edits your theme: you make the change, then Verify fix checks your published theme for code changes (or you mark it fixed), and later audits confirm the problem is gone.
Common questions
Why does “Images far down the page load straight away” cost a Shopify store sales?
Without lazy loading, the browser downloads every image on the page as soon as it opens, including ones far below the first screen that the shopper may never reach. That slows the first screen and uses up mobile data.
How does Zolvio detect “Images far down the page load straight away”?
While the page loads on its own in a real browser at desktop size (1,440 by 900 pixels), Zolvio notes where each image sits and whether its file downloaded before the page finished loading. An image counts when it sits at least 2 screens below the top, is shown at 50 by 50 pixels or larger, isn’t set to loading="lazy" and downloaded with the page, is an image file of 10 KB or more (not a vector image or a small placeholder), and the same file isn’t also shown higher up. 3 or more of them flag the page, and the finding lists them (up to ten) with how far down each sits and its file size. The audit’s browser doesn’t load other companies’ files, so a carousel built by a script from another site can stay unbuilt in it and push the images below it further down than shoppers see them. That’s why this finding goes through AI review before it’s reported.
How do I fix “Images far down the page load straight away” on Shopify?
Find the section that shows the images the finding lists (Online Store → Themes → Edit code). Add loading="lazy" to those images. In Liquid, image_tag takes a loading parameter: image | image_url: width: 800 | image_tag: loading: 'lazy'. Keep images in the first screen loading straight away, then check the page still shows its main image quickly.
Related
- HighSpeedImages much larger than they’re shown
- CriticalSpeedSlow page load
- HighSpeedScripts that block the page from rendering
- HighSpeedToo many requests to third-party services
Documentation
- How audits work — What an audit scans and how findings become issues.
- Guided fixes — Step-by-step fixes written for your theme, with links into the code editor.
- Workflows — Go from an issue to its heatmap and recordings before you change anything.