Lazy Loading: A Complete Guide

The principle is simple: resources outside the viewport are marked as candidates for deferred loading. When the user scrolls and the resource approaches the visible area, the download begins. This can be implemented with the native HTML attribute loading="lazy", with the JavaScript Intersection Observer API or with specialised libraries.

The browser manages the logic of when to start downloading in the native case: it typically begins loading when the resource is about 1,250 px from the viewport on fast connections and closer on slow connections, automatically adapting to the user’s conditions.

Images are the primary use case for lazy loading because they account for the bulk of most web page weight. The native loading="lazy" attribute on the <img> tag is the simplest and most efficient implementation.

The Intersection Observer API is the modern way to implement lazy loading with JavaScript. It allows you to observe when an element enters or exits the viewport (or another container) efficiently, without the performance problems of the old scroll-event-based approach.

You create an IntersectionObserver with a callback that executes when observed elements cross a visibility threshold. The rootMargin allows you to define a margin around the viewport to start loading before the element is visible, preventing the user from seeing empty space.

Beyond images, lazy loading JavaScript components reduces the initial application bundle. Heavy components like WYSIWYG editors, interactive maps, charts or complex modals can be loaded on demand when the user interacts with them.

React offers React.lazy() with Suspense for dynamic component imports. Vue has defineAsyncComponent(). In Astro, the client:visible and client:idle directives apply native lazy loading to interactive components (islands architecture). Next.js supports dynamic imports with next/dynamic.

Iframes (especially from YouTube, Google Maps or social media embeds) are among the heaviest resources a page can contain. A YouTube embed loads over 1 MB of JavaScript and CSS, even if the user never plays the video.

Lazy loading improves Core Web Vitals by reducing the initial page weight, but it must be implemented correctly to avoid negatively affecting SEO. Googlebot processes JavaScript and can render Intersection Observer-based lazy loading, but deferred content may take longer to be indexed.

Images with native loading="lazy" are indexed correctly by Google. For important textual content, avoid lazy loading: main content should be available in the initial HTML to ensure immediate indexation. Use lazy loading only for resources below the fold.

Poorly implemented lazy loading can worsen the experience instead of improving it. The most frequent mistakes include applying lazy loading to the LCP image (delaying its load), not defining dimensions (causing layout shifts) and using heavy JavaScript implementations when the native attribute would suffice.

Another common mistake is overly aggressive lazy loading: if the user scrolls fast, images do not load in time and they see empty spaces. Use rootMargin in Intersection Observer or rely on the adaptive behaviour of the native attribute to mitigate this issue.