What is Lazy Loading?
Lazy loading is a performance optimization technique that defers the loading of non-critical resources until they are actually needed. For web pages, this typically means images and other media below the fold are not loaded until the user scrolls them into view.
How Does Lazy Loading Work?
Without lazy loading, a browser loads all images and resources on a page immediately, even those far below the visible area. This wastes bandwidth and slows down the initial page load. With lazy loading, only the content visible in the viewport is loaded initially, and additional content is loaded on demand as the user scrolls down the page.
Modern browsers support native lazy loading through the loading="lazy" attribute on img and iframe elements, making implementation straightforward without JavaScript libraries. Lazy loading is particularly impactful for image-heavy pages, long articles, and infinite-scroll feeds. It improves initial page load time, reduces bandwidth consumption, and can positively impact Core Web Vitals metrics, especially Largest Contentful Paint (LCP) when properly configured.