HTML Lazy Loading.

Lazy loading is a performance technique that delays the loading of images and iframes until the user scrolls near them, saving bandwidth and speeding up page load.

The Essentials

The 'loading' attribute is used on <img> and <iframe> tags.

loading='lazy' is the magic value that enables this feature.

loading='eager' (default) loads the element immediately.

It reduces the initial 'page weight' and improves Core Web Vitals.

Browsers handle the calculation of when to start loading automatically.

No JavaScript libraries are needed for this native feature.

Professional Insights

Performance Impact

On pages with many images (like a gallery), lazy loading can reduce the initial data usage by 90% or more, especially for users on mobile data plans.

Cumulative Layout Shift (CLS)

When using lazy loading, ALWAYS specify width and height. Without them, the page will 'jump' when the image finally loads, annoying the user.

Above the Fold Rule

Never lazy load 'above-the-fold' content (the first images the user sees). It can actually slow down the perceived speed of the site.

Browser Support

Native lazy loading is supported by all modern browsers. Older browsers will simply ignore the attribute and load the image immediately.

Critical Pitfalls

Lazy loading the main logo or hero image at the top of the page.

Forgetting width and height attributes, leading to layout shifts.

Using old jQuery plugins for lazy loading when the native attribute is faster.

Thinking lazy loading is for all elements—it's only for <img> and <iframe>.

Interactive Lab

Sprint Tasks

Add lazy loading to the image

Ensure the browser reserves space with width and height attributes

Loading editor...

Production Preview