loading='lazy' on images and iframes

Defer offscreen content

<img src="/below-fold.jpg" alt="…" width="800" height="400" loading="lazy" />
<iframe src="https://youtube.com/embed/…" loading="lazy"></iframe>

loading="lazy" tells the browser: "don't download this image until it's near the viewport." Browser picks a reasonable threshold (~600px below fold). Big savings on long pages with many images.

When NOT to lazy-load

• Above the fold (LCP candidate). Lazy-loading the hero image delays LCP. Use fetchpriority="high" instead.
• Images that load via JS (`<img src>` set after page load). The browser doesn't apply lazy semantics to JS-injected images automatically.

decoding="async"

Pair with decoding="async" to let the browser decode the image off the main thread:

<img src="/photo.jpg" alt="…" width="800" height="600" loading="lazy" decoding="async" />

Decoding a 4MB JPEG can block the main thread for 100ms+. decoding="async" keeps the page interactive while the image renders.

iframes too

<iframe loading="lazy"> works the same way. Huge win for pages embedding YouTube/Vimeo/Twitter widgets — they often load 2-3MB of third-party JS per embed.