Lazy loading is a technique where images and other heavy content load only once the user scrolls near them, rather than immediately. It is enabled with a single attribute in the code and on image-heavy pages can cut initial loading by 70 percent or more.
When loading a page, a browser normally requests every image at once, including those far below the fold that the user may never see.
With deferred loading the browser skips those images and requests them only as the user approaches. The result is less data transferred and a faster first render.
It is now supported directly in the browser through a single attribute, with no extra script. Older solutions that used JavaScript for this are no longer necessary.
On image-heavy pages - a portfolio, a gallery, a product catalogue, a references page. That is where the difference is largest and measured in megabytes.
On mobile traffic, where the connection is slower and every unnecessary request costs time.
On long pages where most visitors never reach the bottom anyway. Content nobody sees does not need downloading.
On the hero image and anything immediately visible. Deferring those directly worsens the largest contentful paint score, because the browser waits instead of starting straight away.
The rule is simple: everything above the fold loads immediately, everything below is deferred. For the hero image it is also worth explicitly marking a high priority.
It also hurts when applied to everything without thought. Automatic plugins that defer every single image can break exactly what they were meant to fix.
Explicit dimensions on every image. Without them the browser does not know how much space to reserve, so content jumps as the image arrives - a separate problem affecting the stability score.
Compression and a modern format. A deferred 4 MB image still gets downloaded eventually. Converting to WebP usually removes 70 to 80 percent of the weight.
The same logic applies to video and embedded maps. An embedded map on a contact page can weigh more than all the images combined.
The technique alone solves only part of the problem. For the result to show in measurement, three more things go with it.
First, dimensions. Every image should carry declared width and height values, otherwise the browser cannot reserve space and content shifts when the image appears - which damages CLS, the stability score.
Second, priority for the hero image. The element seen first is measured through LCP, so that image must not be deferred but instead marked as a priority load.
Third, the weight of the file itself. A deferred image of several megabytes still has to be downloaded once, so compression and a modern format remain mandatory.
The same applies to video content and embedded maps, which can outweigh every image on the page. For those, a still image is often used as a stand-in and the real content loads only on click - the single largest gain when measuring speed.
A practical check takes a minute: open the page on a phone and watch how much data is transferred before you reach the bottom. If that number is large on a page most visitors never scroll through, your speed is suffering for no benefit at all.
One caution on automation. Plugins that promise to defer everything usually do exactly that, including the hero image, and then the score gets worse rather than better. It is safer to set the attribute deliberately than to hand the decision to a tool that cannot tell which image sits above the fold.
Last updated: 17 August 2026
Send the address and we will tell you where you stand - no obligation.
Send an enquiry
