Lazy Loading
How Lazy Loading Defers Offscreen Content
Lazy loading is a technique that delays downloading an image or iframe until it is close to appearing on screen. Content far below the visible area is not requested when the page first opens. This reduces the work done at the start and saves data for visitors who never scroll that far.
Modern browsers support native lazy loading through the loading="lazy" attribute on img and iframe elements. The browser decides how far ahead of the viewport to start loading, so the file is usually ready by the time it scrolls into view. Older approaches used JavaScript and the IntersectionObserver API to achieve the same effect. They remain useful for content that the native attribute does not cover, such as some background images.
Where Lazy Loading Helps and Where It Hurts
Lazy loading suits long pages with many images, such as product grids, photo galleries, blog archives and articles with embedded videos. Each image that never appears on screen is a request the page does not need to make. It is one part of broader image optimization.
It hurts when it is applied to the image that matters most at first view. The largest image above the fold is often the Largest Contentful Paint element. If it is lazy loaded, the browser delays it until layout is known, which slows the metric. Images near the top should load eagerly, and the most important one can be given a higher priority hint, such as fetchpriority="high".
A Recipe Blog and Its Long Page
A recipe blog places a hero photo at the top of each article, followed by twenty step photos and a video embed near the bottom. Marking the step photos and the video as lazy loaded means a reader who stops after the ingredients never downloads them. The hero photo stays eager, so the page's main visual appears without delay.
Lazy loading also needs room. If the browser does not know an image's size, the layout shifts when the image arrives. Setting width and height keeps the space stable, and responsive images keep the files themselves appropriately sized.
Frequently asked questions
Should Every Image on My Page Use Lazy Loading?
No. Lazy loading is best for images below the first screen. Images at the top, including the logo and the hero image, should load immediately. Applying it everywhere can make a page feel slower, because visible content waits for a request that could have started earlier.
Does Lazy Loading Save Bandwidth for Every Visitor?
It saves data for visitors who leave before reaching the lower part of a page, and it reduces requests at page start. Visitors who scroll through the whole page download the same images, only later. The saving therefore depends on how far people read.