Lazy loading and decoding

loading="lazy"

Add loading="lazy" to an <img> and the browser defers fetching it until it nears the viewport — no IntersectionObserver code, no library. Offscreen images simply don't compete for bandwidth on initial load. The default is loading="eager", which fetches immediately; keep that (or just omit the attribute) for anything above the fold. Pair lazy with explicit width/height so the browser reserves space and deferred images don't shift the layout when they arrive.

decoding="async"

Fetching an image is one cost; decoding the compressed bytes into pixels is another, and by default that decode can happen synchronously and block the main thread. decoding="async" hints that the browser may decode the image off the main thread and present it once ready, keeping scrolling and interaction smooth. It pairs naturally with loading="lazy". The companion value decoding="sync" forces the decode to complete before the image is presented; decoding="auto" (the default) leaves the choice to the browser.

fetchpriority

loading and decoding defer or smooth work; fetchpriority does the opposite — it raises (or lowers) a resource's place in the fetch queue. Set fetchpriority="high" on your Largest Contentful Paint image — the hero — so the browser starts it ahead of less important downloads, and fetchpriority="low" on decorative or below-the-fold media. A hero image should be fetchpriority="high" and loading="eager" (never lazy), because lazy-loading the LCP element delays the very paint you are trying to speed up.

Lazy iframes

loading="lazy" is not just for images — it works on <iframe> too. Embedded maps, videos, and third-party widgets are heavy: each one can pull in its own scripts and subresources. Marking an offscreen <iframe> as loading="lazy" defers that entire embed until the user scrolls near it, which can dramatically cut the initial page weight of a content page full of embeds.