Lazy Loading
Also known as: lazy load images, loading lazy, lazy loading images
Lazy loading defers loading of off-screen images, iframes, and other resources until the user scrolls near them. It cuts initial page weight and speeds up first render, and is built into browsers via the loading="lazy" attribute.
- Native lazy loading uses the loading="lazy" attribute on img and iframe elements.
- It defers off-screen resources until they near the viewport, cutting initial page weight.
- Never lazy-load the hero / LCP image — doing so slows the Largest Contentful Paint.
How lazy loading works
Instead of downloading every image when a page loads, lazy loading delays off-screen resources until they are about to enter the viewport. The browser uses the scroll position (or the IntersectionObserver API under the hood) to decide when to fetch each one.
Native lazy loading is built into modern browsers with the loading="lazy" attribute on <img> and <iframe> elements — no JavaScript library required. For finer control, developers still use IntersectionObserver to trigger custom loading logic.
Performance benefits and pitfalls
Lazy loading reduces the number of bytes fetched up front, lowering initial page weight, saving bandwidth, and speeding up first render. It is especially valuable on long, image-heavy pages where most media is below the fold.
The key pitfall: never lazy-load the Largest Contentful Paint element. Lazy-loading your hero image delays it and hurts LCP. Best practice is to load above-the-fold images eagerly and apply loading="lazy" only to content the user must scroll to see.