Web & SEO
What is lazy loading?
Lazy loading is a technique that delays downloading an image, video, or component until the visitor is about to scroll it into view.
New to Bolt? Sign up free.
Technical definition
Browsers support lazy loading natively through the loading attribute on image and iframe elements, set to lazy. The browser then defers the request until the element approaches the viewport. More granular control is available through the Intersection Observer API, which fires a callback when an element crosses a visibility threshold.
The technique reduces initial page weight and the number of requests competing for bandwidth during load. It applies to components as well as media, where code splitting defers loading parts of an application until a route or interaction requires them.
In plain terms
Do not download the pictures at the bottom of the page until someone scrolls far enough to see them.
Most visitors never reach the bottom, so most of those downloads never need to happen.
Why it matters
On an image-heavy page, a gallery, a product listing, a long homepage, lazy loading is the single largest reduction in initial load weight available. The visitor downloads what they can see instead of everything the page contains.
The exception matters as much as the rule. Never lazy-load the image in your hero section. That image is usually what determines your Largest Contentful Paint score, and delaying it makes the number you are trying to improve worse. The correct pattern is eager loading for anything visible when the page opens and lazy loading for everything below it.
