# A lazy-loaded main image

Source: https://www.fixreports.com/issues/lazy-loaded-lcp-image

Lazy loading is for images further down the page. On the main image at the top, it makes the browser wait before downloading the very thing people came to see.

## 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
1. Remove loading="lazy" from the main image at the top of the page and add fetchpriority="high".
2. Keep lazy loading for images further down.
3. Serve the image at the size it’s displayed, with srcset and sizes for different screens.

## On Shopify
1. 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
1. 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".

## Frequently asked questions

### Should I preload the hero image too?

fetchpriority="high" on the image is usually enough. A preload helps when the image is set in CSS and the browser would find it late.

## Sources
- web.dev: Browser-level image lazy loading: https://web.dev/articles/browser-level-image-lazy-loading
- web.dev: Optimize resource loading with the Fetch Priority API: https://web.dev/articles/fetch-priority