Lazy Loading

Lazy loading is a performance optimization technique that defers the loading of non-critical resources, primarily images and videos, until the user actually needs them. Instead of downloading every image on a page when it first loads, lazy loading waits until each image is about to enter the visible viewport before requesting it from the server. This reduces the initial page weight, speeds up the time to first meaningful render, and saves bandwidth for users who never scroll to the bottom of a page.

The simplest implementation uses the native HTML loading="lazy" attribute on img and iframe elements, which is now supported by all major browsers. For more control over timing and behavior, developers use the Intersection Observer API, a browser feature that efficiently detects when an element enters or approaches the viewport. The Intersection Observer approach allows customization like loading images when they are within a specified distance of the viewport, so content appears ready by the time the user scrolls to it rather than loading visibly as they arrive.

The impact on Core Web Vitals is significant but requires careful implementation. Lazy loading reduces Largest Contentful Paint times by ensuring the browser prioritizes above-the-fold content over images further down the page. However, incorrectly lazy-loading the hero image or other above-the-fold content will actually hurt LCP because it delays the very element the metric measures. The best practice is to eagerly load all images visible in the initial viewport and lazy-load everything below the fold. For Cumulative Layout Shift, always define explicit width and height attributes or use CSS aspect-ratio on lazy-loaded images so the browser reserves the correct space before the image loads, preventing layout jumps that frustrate users and penalize your performance scores.