Lazy loading

Lazy loading is a technique that defers loading images, videos or other content until a visitor scrolls near enough for them to actually become visible, rather than loading everything on a page the moment it opens.

Why lazy loading genuinely helps

A long page with many images — a portfolio, a product catalogue — can carry substantial total weight if every image loads immediately. A visitor only ever sees a handful of them before deciding whether to keep scrolling. Lazy loading defers the images further down the page until they are actually needed. That reduces the amount of data downloaded before the page becomes usable, and can meaningfully improve how quickly the page feels ready to use.

Where it can quietly hurt instead

Lazy loading the hero image delays the first thing a visitor sees

Applying lazy loading to content visible in the initial view — most importantly a hero section’s own image — works against its own purpose. The very first thing a visitor sees is delayed rather than sped up, because the technique is designed for content below the fold, not content already on screen.

Applying it to every image, including the first, is a common mistake

Modern browsers support a standard loading="lazy" attribute that handles this correctly when applied selectively. Applying it indiscriminately to every image on a page, including the first one, is a common and easily corrected implementation mistake.

The actual HTML attribute, and where else it applies

The loading attribute and its two values

The standard mechanism, documented on MDN, is the loading attribute on an <img> or <iframe> element. It takes one of two values. loading="lazy" defers a non-critical image or iframe until it is near the visible viewport. loading="eager" — the default if the attribute is left off — loads it immediately along with the rest of the page. The src attribute pointing at the actual image file (a .jpg, .png or similar) works exactly the same way either way. Only loading changes when the browser fetches it.

Iframes carry the same trade-off as images

Iframes — an embedded map, a video player, a booking widget — carry exactly the same trade-off as images. A non-critical iframe far down the page is a good candidate for loading="lazy". One embedded near the top of the page should stay on the default eager loading, so it does not delay what a visitor sees first.

Lazy loading and layout shift

Why an image still needs its width and height set

A lazily loaded image that has no width and height attribute set can cause the surrounding content to jump when it finally loads, because the browser has no space reserved for it until the file arrives. Setting explicit dimensions, or an aspect-ratio in CSS, reserves that space in advance regardless of whether the image is lazy or eager. This matters for lazy-loaded images specifically, because they load later, after a visitor has often already started reading the content around them.

Browser support for the native attribute

The native loading="lazy" attribute is supported by all current major browsers, which is why it has mostly replaced the older JavaScript-based lazy-loading libraries many older sites still carry. A site still running one of those older scripts, rather than the built-in browser attribute, is carrying extra script weight for a job the browser can now do natively.

What to do next

Checking that a site’s hero image loads immediately while images further down the page are genuinely deferred is a specific, checkable detail. It is worth confirming directly, rather than assuming a platform has configured it correctly by default. For where this kind of performance configuration sits in a project, web development services covers the scope.