What is lazy loading?

Lazy loading is a performance technique where non-critical content such as images, iframes or scripts is loaded only when it is likely to be needed. This can make the initial page load faster because the browser has less data to download and process upfront.

MDN describes lazy loading as a strategy for loading non-critical resources only when needed: MDN on lazy loading.

Where is lazy loading used?

Lazy loading is most commonly used for images and embedded content. Modern browsers support the HTML attribute loading="lazy" for images and iframes. JavaScript modules, components or videos can also be loaded later if they are not required for the first visible area.

Common use cases include:

• images below the fold
• embedded videos or maps
• third-party iframes
• long articles with many media assets
• product lists and galleries
• on-demand components in web applications

When can lazy loading hurt?

Lazy loading is not automatically good. The most important visible image, for example a hero image, usually should not be delayed. Otherwise, Largest Contentful Paint can get worse.

Important conversion elements, forms or above-the-fold content also need caution. The technique must match the page structure. In performance optimization, the key question is which resources are critical and which can safely load later.

Lazy loading and image optimization

Lazy loading does not replace image optimization. Images still need appropriate dimensions, modern formats such as WebP or AVIF and meaningful alt text. Lazy loading changes when a resource is downloaded, not necessarily how large it is.

Used well, lazy loading can improve load time, bandwidth usage and user experience. Used poorly, it can delay visible content or cause layout shifts.