Lazy loading
Lazy loading is a technique that delays loading a resource until it is needed. Instead of downloading every element immediately, the browser can defer resources located outside the visible area of a web page.
Lazy loading is commonly used for images, videos, maps, iframe elements, third-party widgets, and other resources that are not required for the page’s initial view.
How does lazy loading work?
A lazy-loaded resource is not downloaded immediately when the page opens. Loading usually begins when the user approaches the part of the page where the resource will become visible.
Images can use the native HTML loading attribute:
<img src="/image.webp"
alt="Image description"
width="800"
height="600"
loading="lazy">The loading="lazy" attribute tells the browser that loading the resource can be deferred. The loading="eager" value indicates that it should load without this delay. The native mechanism can also be used with <iframe> elements.
Benefits of lazy loading
Properly implemented lazy loading can:
- reduce the initial page load time;
- lower data usage;
- reduce browser workload;
- prioritize important page content;
- avoid downloading resources the user never sees.
Lazy loading does not replace image compression, correct sizing, or efficient formats such as WebP.
When should lazy loading be avoided?
Images and other elements visible when the page first opens should not normally be lazy-loaded. This is particularly important for hero images and elements that affect Largest Contentful Paint. Applying loading="lazy" to them may delay rendering and reduce page performance.
Images should also include width and height attributes. These dimensions allow the browser to reserve space before the image loads and help prevent unexpected layout shifts.
JavaScript lazy loading
More complex elements can be lazy-loaded with JavaScript, often through the IntersectionObserver API. It detects when an element approaches the visible area and can then load a resource or activate a selected feature.