What it means
loading="lazy" tells the browser to delay an image until it’s about to scroll into view. Browsers only start lazy images after layout, so an image that is visible straight away still loads later than it would without the attribute.
We flag pages where the Largest Contentful Paint element is an image with loading="lazy".
Why it matters
web.dev advises against lazy-loading images that are in the first viewport, because it delays Largest Contentful Paint.
It is a common side effect of themes and plugins that lazy-load every image.
How to find it yourself
- PageSpeed Insights flags “Largest Contentful Paint image was lazily loaded”.
- Inspect the hero image in DevTools and look for loading="lazy".
How to fix it
On any website
- Remove loading="lazy" from the main image at the top of the page and add fetchpriority="high".
- Keep lazy loading for images further down.
- Serve the image at the size it’s displayed, with srcset and sizes for different screens.
On Shopify
- In the section that shows the hero image, output it with image_tag and loading: 'eager', fetchpriority: 'high'. Many themes lazy-load every section by default.
On WordPress and WooCommerce
- WordPress skips lazy loading for the first content image; if a plugin overrides that, exclude the hero image in its settings.
How to check the fix
- Run the speed test again and confirm the LCP element no longer has loading="lazy".
How FixReports finds it
The speed test records which element is the Largest Contentful Paint and whether it has loading="lazy".