PERFORMANCE · SEO GLOSSARY
Image Lazy Loading
A browser technique that defers loading off-screen images until the user scrolls near them — reducing initial page load time — but misapplied to above-the-fold images it directly causes poor LCP by delaying the hero image.
Definition
Image lazy loading (`loading="lazy"` attribute on `<img>` tags) is a browser-native performance technique that defers loading images that are outside the current viewport until the user scrolls close to them. The benefit: images below the fold that would never be seen by users who leave the page early don't consume bandwidth or delay initial rendering. The critical mistake: applying `loading="lazy"` to the above-the-fold hero image or LCP element. When the browser encounters `loading="lazy"` on an image that is in the initial viewport, it delays fetching that image — which directly delays LCP, often pushing it from Good to Poor. The browser doesn't always know at parse time whether an image will be in the viewport (it depends on the device size and CSS), so `loading="lazy"` on images anywhere in the top section of the page is risky. Best practice: explicitly set `loading="eager"` or `fetchpriority="high"` on the LCP image, and `loading="lazy"` only on images that are definitively below the fold.
Why it matters for SEO
LCP is a Core Web Vitals ranking signal, and misapplied lazy loading is one of the most common causes of preventable LCP failures. The fix is a single attribute change — replacing `loading="lazy"` with `fetchpriority="high"` on the LCP image — that can move LCP from Poor (>4s) to Good (<2.5s). Frameworks handle this inconsistently: Next.js's `<Image>` component uses lazy loading by default but exposes a `priority` prop that sets `fetchpriority="high"` and removes lazy loading for the LCP image. Without explicitly passing `priority` to the first above-the-fold Next.js image, LCP will be delayed. The same pattern applies to React, Vue, and other frameworks with image optimization utilities.
How DeepSEOAnalysis checks this
The audit checks every `<img>` tag in the initial viewport for `loading="lazy"` attributes on images that appear to be the LCP candidate (large images in the top section of the page, first image encountered in the HTML). It flags these as critical LCP issues with a specific fix: add `fetchpriority="high"` and remove `loading="lazy"` (or in Next.js, add the `priority` prop to the `<Image>` component). It also checks for images without explicit `width` and `height` attributes, which can cause CLS when images load and push content down.
Useful tools and resources
GLOSSARY
Related terms
performance
Core Web Vitals
Three Google metrics — LCP, INP, and CLS — that measure real-user loading, interactivity, and visual stability.
Read definition →performance
Page Speed
The time it takes for a page to load and become usable — measured by multiple metrics including TTFB, FCP, and Core Web Vitals.
Read definition →onpage
Image SEO
Optimising images for search — including descriptive alt text, semantic file names, correct dimensions, and next-gen formats — to improve rankings and Core Web Vitals.
Read definition →See how your site scores on Image Lazy Loading.
The free DeepSEOAnalysis audit checks image lazy loading and 100+ other signals. Full report, no signup.
Run a free audit →