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.