Lazy loading

Lazy loading (deferred loading) is a performance optimization technique for websites in which individual resources — images, videos, iframes and even fragments of JavaScript — are fetched only when they actually become needed. Instead of downloading the entire page at once, the browser postpones less important elements until the user reaches them.

How lazy loading works

In its most common use — lazy loading of images — the browser fetches a graphic only as it approaches the visible area of the screen (the viewport) during scrolling. In practice this is achieved in a few ways:

• natively — with the loading="lazy" attribute on the image tag, now supported by every major browser;
• via the Intersection Observer — a JavaScript API that detects when an element enters the field of view;
• at the framework level — components split code into chunks loaded on demand (code splitting).

As a result, the initial data transfer is smaller and the page becomes interactive sooner.

Practical application

Lazy loading helps most on media-heavy pages: galleries, stores with hundreds of product photos, blogs with long articles. Deferring resources below the first screen shortens load time and improves Core Web Vitals, including LCP. It is important not to apply it to elements that are visible immediately — lazy-loading the main image at the top of the page would paradoxically worsen perceived speed. The technique works best combined with image compression and a fast server that delivers resources the instant they are requested.

When implementing lazy loading, a few details are worth attention. Images should be given explicit dimensions (width and height) up front so the browser can reserve space for them and avoid layout shifts that hurt the CLS metric. It is also good practice to show a lightweight placeholder while the resource is being fetched. In most popular CMS platforms and frameworks, lazy loading is now available by default or through a simple plugin, so implementing it does not require advanced programming knowledge.