---
title: "Lazy-load below-the-fold images"
description: "Native loading=lazy defers offscreen images and iframes until they approach the viewport. Apply it only below the fold, keep width and height so space is reserved, and never lazy-load the LCP image. Verify in the Network panel that above-the-fold media loads immediately."
url: "https://seo-mcp.io/t/lazy-load-below-the-fold-images"
---

# Lazy-load below-the-fold images

Native loading=lazy defers offscreen images and iframes until they approach the viewport. Apply it only below the fold, keep width and height so space is reserved, and never lazy-load the LCP image. Verify in the Network panel that above-the-fold media loads immediately.

## Prerequisites

- Access to image templates

## Steps

1. **Mark above-the-fold media** *(general best practice)* — Identify images visible at the top of each template. These must load eagerly; everything below the first viewport can be deferred.
   Check: Each template has a written list of eager images, including the hero.
2. **Add loading=lazy below the fold** — Set loading=lazy on offscreen images and iframes, and keep width and height attributes. Remove JavaScript lazy-load libraries where native support is enough.
   Check: The rendered HTML has loading=lazy on below-fold images and no lazy attribute on the hero.
3. **Check load order** *(general best practice)* — Load the page in the Network panel, confirm hero requests start immediately, then scroll and confirm deferred requests begin.
   Check: Hero image request starts before scroll; deferred images do not request until approaching the viewport.

## Source

@seo-mcp on 2026-10-19: https://web.dev/articles/browser-level-image-lazy-loading

Canonical: https://seo-mcp.io/t/lazy-load-below-the-fold-images