Correct loading and decoding hints on above- and below-fold images
Lazy-load images below the fold, but never the hero, so non-JavaScript crawlers see your content.
What this signal tests
We classify images by position (above-the-fold means roughly the first two content images or anything inside <header>) and check their loading attribute. Below-fold images should carry loading="lazy" plus decoding="async". Above-fold images, especially hero and LCP images, should not carry loading="lazy" because that delays first paint and can hide them from crawlers that do not scroll.
Why it matters for your visibility in AI
Some AI ingestion pipelines do not run a full headless browser. They fetch the HTML, parse it, and follow image references. If your hero image carries loading="lazy", a non-scrolling crawler may never trigger the load and may treat the image as absent. Your above-the-fold visual content disappears from the AI's understanding of the page. At the other end, failing to lazy-load below-fold images bloats your page weight and slows down crawlers, sometimes pushing you past their fetch timeouts. The right pattern is selective: eager-load the hero, lazy-load everything below. This balances crawlability with performance and keeps your visuals discoverable across the full range of AI ingestion behaviours.
Pass criteria at a glance
| Criterion | Passes when |
|---|---|
| No above-fold images carry loading=lazy; >=70% of below-fold content images carry it. |
How we test it
We identify likely above-the-fold images as the first two content images in document order or any image inside <header>, <nav>, or the first 500 pixels of the page. We flag any of those with loading="lazy". Separately, we scan content images that appear below the fold and check what percentage carry loading="lazy" (targeting 70 percent or more).
Show technical detection method
Above-the-fold (first 2 images or inside <header>): flag if loading=lazy. Below-the-fold large images: flag absence of loading=lazy.
If your site fails: how to fix it
- Audit your hero, banner, and LCP (Largest Contentful Paint) images. Remove loading="lazy" from each. Optionally add fetchpriority="high" to signal urgency to browsers.
- Add loading="lazy" and decoding="async" to below-fold content images: product grids beyond the first row, article body images past the first screen, footer logos.
- If your CMS or framework applies lazy-loading universally (WordPress core does this by default since 5.5), override the behaviour for hero images. Most platforms expose an attribute or filter for this.
- For Next.js, use the priority prop on the hero <Image>. For Astro, set loading="eager". For raw HTML, just omit the loading attribute entirely on above-fold images.
- Test by disabling JavaScript and viewing the page. If your hero image fails to load with JS off, your lazy-loading is too aggressive for non-rendering crawlers.
Quick facts
| Maturity | ESTABLISHED |
|---|---|
| Weight | low |
| Category | Multimodal |
Primary sources
Related signals
No related signals listed.
Frequently asked questions
Should I lazy-load everything to be safe on performance?
No. Lazy-loading the hero image is a known anti-pattern. It delays first paint, hurts Largest Contentful Paint scores, and can hide above-fold content from crawlers that do not run a full browser. Be selective: eager for above-fold, lazy for below-fold.
What is decoding=async and do I need it?
decoding="async" tells the browser it can decode the image off the main thread, which prevents image decoding from blocking JavaScript or rendering. It is a free performance win for below-fold images. For above-fold images use decoding="sync" or omit the attribute.
How does fetchpriority interact with loading?
fetchpriority sets the network priority; loading sets when the fetch starts. For the hero LCP image, use fetchpriority="high" (and no loading="lazy") to load it as soon and as fast as possible. For below-fold images, omit fetchpriority and use loading="lazy".
Run your own scan
Run a free scan and see how your site grades across all 155 AI-readiness signals.