Lazy loading is a web performance technique that defers the loading of offscreen resources, such as images, videos, or scripts, until the moment they are actually needed, typically when a user scrolls them into the visible area of the browser window.
By default, a browser will attempt to download every resource referenced on a page as soon as it parses the HTML. On a page with many images or heavy media, this means a large volume of data is transferred upfront, much of it for content the user may never see. Lazy loading reverses this behavior: resources below the fold are held back and fetched only as the user approaches them during scrolling.
How Lazy Loading Works
The most straightforward way to implement lazy loading for images and iframes is through the native HTML loading attribute. Setting loading="lazy" on an <img> or <iframe> element instructs the browser to delay fetching that resource until it is close to entering the viewport. This approach requires no JavaScript and is supported by all modern browsers. For more complex use cases, such as lazy loading background images or entire components, developers rely on the Intersection Observer API, which fires a callback when a target element enters or exits the viewport.
Impact on Core Web Vitals
Lazy loading has a direct and sometimes double-edged relationship with Core Web Vitals. On the positive side, deferring offscreen images reduces the total amount of data the browser must process at page load, which can lower bandwidth consumption and improve overall load times. However, applying loading="lazy" to the wrong images can significantly harm Largest Contentful Paint (LCP). If the element that constitutes the LCP candidate, often a hero image or large banner, is lazily loaded, the browser will delay fetching it, causing the LCP score to worsen. For this reason, images that are visible on initial page load should always load eagerly, while the lazy attribute should be reserved for images that appear further down the page.
Lazy loading also intersects with Cumulative Layout Shift (CLS). When an image loads without predefined dimensions, it causes surrounding content to shift as the browser makes room for it. This problem is amplified with lazy loading because the shift occurs later in the browsing session, during scroll. Pairing lazy loading with explicit width and height attributes, or using the CSS aspect-ratio property, is essential to preserving layout stability. This practice is closely tied to the principles of responsive images and image SEO.
When to Use Lazy Loading
Lazy loading is most effective on pages with long scroll depth and a high volume of media, such as blog archives, product listing pages, or editorial articles. It should be applied selectively, with careful attention to which resources are visible above the fold, to avoid inadvertently degrading the metrics it is intended to improve.