Performance Recommended

Load far-down images later

Lazy-load images and iframes below the fold (load them only when someone scrolls near), and never the main image at the top.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Add loading="lazy" to every image and iframe that is not visible in the first screen at 360×800 or 1280×800. Never add it to the LCP image, which gets fetchpriority="high" instead. Start heavy widgets with IntersectionObserver.

Example

<img src="/hero.avif" width="1200" height="800" fetchpriority="high" alt="Hero">
<img src="/team.avif" width="600" height="400" loading="lazy" alt="Our team">
<iframe src="https://www.example.com/map" loading="lazy" title="Map"></iframe>

How to check

Lighthouse lcp-discovery-insight passes (lcp-lazy-loaded before Lighthouse 13). A browser test that loads the page without scrolling requests no image from below the first screen.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/performance/lazy-loading.