# Below-fold images and iframes use lazy loading

- **Pattern:** `ab-001797` (`marketing-page-speed.loading-strategy.below-fold-lazy-load`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001797
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001797)

## Why it matters

Below-fold images that lack `loading="lazy"` force the browser to initiate download requests for all images simultaneously on page load, regardless of whether the user ever scrolls to see them. This wastes bandwidth — an ISO-25010 resource-utilisation concern — and competes for network bandwidth with the above-fold images that actually determine LCP. A marketing page with a 6-panel feature grid and a testimonial carousel can easily have 12–15 images below the fold; without lazy loading, those downloads start in parallel with the hero image download, increasing LCP by crowding the network queue. On a 4G connection with 6Mbps bandwidth, 15 simultaneous image requests significantly reduce the throughput available to the critical LCP image.

## Severity rationale

Low because missing lazy-load on below-fold images wastes bandwidth and mildly increases LCP by competing with critical resources, but the impact is secondary to above-fold optimisations.

## Remediation

Add `loading="lazy"` to all images and iframes below the fold — the browser will defer their download until they're near the viewport.

```tsx
// Feature section images — lazy load (they're below the fold)
<img
  src="/feature-1.webp"
  alt="Feature 1"
  width={600}
  height={400}
  loading="lazy"
/>

// YouTube embed — lazy load
<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  loading="lazy"
  title="Product demo"
  width={800}
  height={450}
/>

// Next.js Image is lazy by default — no change needed for non-hero images
<Image src="/testimonial.webp" alt="Customer" width={80} height={80} />
```

The hero/LCP image is the only image that should NOT be lazy — verify it uses `priority` instead.

## Detection

- **ID:** `below-fold-lazy-load`
- **Severity:** `low`
- **What to look for:** Images and iframes below the fold (not visible on initial page load) should be deferred with `loading="lazy"`. This reduces the number of network requests on initial page load, allowing the browser to focus on above-fold content. Check: (1) `<img>` tags below the fold for `loading="lazy"`, (2) `<iframe>` tags (e.g., YouTube embeds, Google Maps) for `loading="lazy"`, (3) Next.js Image components — these are lazy by default unless `priority` is set. The concern is the inverse: above-fold images should NOT be lazy. Count all instances found and enumerate each.
- **Pass criteria:** Images below the fold use `loading="lazy"`. Iframes (video embeds, maps) use `loading="lazy"`. No above-fold images use `loading="lazy"`. At least 1 implementation must be confirmed.
- **Fail criteria:** Multiple below-fold images lack `loading="lazy"`, causing the browser to initiate all image downloads on page load regardless of scroll position.
- **Skip (N/A) when:** All images are above the fold (single-screen landing page with no scroll).
- **Detail on fail:** `"8 images in the Features and Testimonials sections below the fold have no loading='lazy'. Browser downloads all images on page load, adding ~600KB of unnecessary initial requests."`
- **Remediation:** Add lazy loading to all below-fold images:

  ```tsx
  // Below-fold images — lazy load
  <img src="/feature.webp" alt="Feature" width={600} height={400} loading="lazy" />

  // YouTube embed — lazy load
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    loading="lazy"
    title="Product demo"
  />

  // Next.js Image — lazy by default (no change needed)
  <Image src="/testimonial.webp" alt="Customer" width={80} height={80} />
  // (only hero/LCP element should have priority)
  ```

## External references

- iso-25010 performance-efficiency.resource-utilization

Taxons: performance

HTML version: https://auditbuffet.com/patterns/ab-001797