Below-fold images and iframes use lazy loading

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.

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

// 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.

• 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:

  // 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)