Lazy Loading

Definition

Lazy loading is a browser-native performance technique (enabled via the `loading="lazy"` attribute on `<img>` and `<iframe>` elements) that defers the download of off-screen resources until they approach the user\'s viewport as they scroll. Instead of downloading all images on page load (including images far below the fold that the user may never see), the browser downloads only the above-the-fold images immediately and defers the rest until needed. The practical effect: the initial page load transfers significantly less image data, reducing the time to first meaningful paint and the data usage for users who don\'t scroll through the entire page. Native lazy loading was added to browsers in 2019 (Chrome 76+) and now has universal support across all modern browsers. **The critical exception: LCP images.** The Largest Contentful Paint (LCP) metric measures the time until the largest visible content element (usually the hero image) is rendered. If the hero image has `loading="lazy"`, the browser defers its download until the image enters the viewport — which for an above-the-fold hero image is immediately after the scroll event fires, slightly later than if the image had been downloaded eagerly. This delay is sufficient to harm LCP scores by 200–800ms in real-world measurements. The rule: NEVER apply `loading="lazy"` to images that are above the fold on initial load. Above-the-fold images should use `loading="eager"` (or omit the attribute, since eager is the default) with `fetchpriority="high"`. Apply `loading="lazy"` only to images below the fold — product listing thumbnails, article cards in a sidebar, gallery images the user must scroll to, etc.

Why it matters for SEO

Lazy loading is a high-leverage performance optimisation for pages with many images below the fold (e-commerce category pages, image galleries, long-form content with many inline images). The initial page load improvement can be substantial — a category page with 50 product thumbnails reduces initial image payload by 80%+ when all off-screen thumbnails are lazy-loaded. However, misapplication of lazy loading to LCP elements is one of the most common Core Web Vitals implementation errors — it\'s easy to accidentally apply `loading="lazy"` to all images globally (via a CMS setting or a JavaScript image optimisation plugin) including the hero image, directly harming the LCP score that Google uses as a page experience ranking factor. The DeepSEOAnalysis audit specifically checks for above-the-fold images with `loading="lazy"` — this is the single most actionable image performance fix for sites that have implemented global lazy loading without excluding the LCP element.

How DeepSEOAnalysis checks this

The audit identifies the LCP element on each page (the largest visible content block in the initial viewport) and checks whether it has `loading="lazy"`. Above-the-fold `<img>` elements with `loading="lazy"` are flagged as a critical performance issue — remove the lazy loading attribute and add `fetchpriority="high"` instead. The audit also checks for `<img>` elements below the fold without lazy loading (a missed optimisation opportunity) and for `<iframe>` elements (typically embedded video) without `loading="lazy"` (which delays initial page load unnecessarily). CrUX LCP field data is reported alongside these findings to show the real-world impact on Chrome user experience.

Useful tools and resources

• Free LCP audit