---
title: "Load far-down images later · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/performance/lazy-loading
updated: 2026-10-20
licence: "All rights reserved"
---

# Load far-down images later

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Performance](https://agentwranglers.se/playbook/website/performance)
- Rule: Lazy-load images and iframes below the fold (load them only when someone scrolls near), and never the main image at the top.
- How: 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`.
- 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.

Example:

```html
<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>
```

**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`.

- Previous: [Send small, modern images](https://agentwranglers.se/playbook/website/performance/image-optimization)
- Next: [Hint only what speeds up the first paint](https://agentwranglers.se/playbook/website/performance/preload-prefetch-preconnect)
- [Performance](https://agentwranglers.se/playbook/website/performance)