What is Lazy Loading?
Deferring the load of images, scripts, or components until they are needed, typically when scrolled near the viewport.
Definition
Lazy loading postpones fetching non-critical resources until they're about to be used, cutting initial page weight and speeding up first paint. Browsers support it natively for images and iframes via loading="lazy", while IntersectionObserver powers custom implementations for infinite scroll and deferred components. In JavaScript frameworks, dynamic import() plus React.lazy or Vue's defineAsyncComponent lazy-loads entire routes. The critical caveat: never lazy-load above-the-fold content—lazy-loading the LCP image reliably worsens Core Web Vitals. Pair with width/height attributes or aspect-ratio CSS to prevent layout shift when deferred content arrives.