Lazy loading means deferring resources that are not needed yet, such as off-screen images, below-the-fold iframes and non-critical scripts, until the moment they start to matter, usually as the visitor scrolls toward them. The browser spends its scarce early bandwidth on the first screen instead of racing to download a footer image and three embeds nobody has seen.
How it works
For images and iframes the browser has a built-in signal, the loading="lazy" attribute, and
it holds the request until the element nears the viewport. For backgrounds, embeds and
scripts, an IntersectionObserver watches for an element approaching the screen and swaps in
the real source (data-src → src) or runs the code only then. Either way the initial load
carries less weight.
What it buys
- The first screen loads faster. Fewer bytes and requests compete with the content that is actually visible, so Speed Index and the overall load improve.
- Third-party embeds stop dominating. A single YouTube iframe can pull in hundreds of kilobytes of its own scripts; deferring it until scroll keeps that weight off the critical path.
How much there is to gain varies enormously by platform. Eagerly loaded background images turned up on 41 of 49 Duda sites in our snapshot (2026-07-23) and on 13 of 30 Bitrix sites; embeds loading with the page turned up on 10 of 30 Wix sites.
The trap: never lazy-load the hero
The one element you must not defer is the one already on screen, especially your LCP
image. Marking the hero loading="lazy" delays the exact paint the metric measures, so the
score gets worse for a change that looks like an optimisation.
This is not a hypothetical. Our own hero detector treats an image that already carries
loading="lazy" as ineligible, which is part of why, across
261 audited sites, we found no
prioritisable hero at all on 96 of them. A deferred hero and an absent hero look identical
from the outside: in both cases the browser’s preload scanner has nothing to fetch early.
It pairs with reserved space, or it causes shift
An image whose box is not reserved will shift the layout when it finally arrives, and lazy
loading guarantees it arrives late. Lazy loading and a declared width/height (or CSS
aspect-ratio) are one technique, not two. On the sites we parsed for our
layout-shift study, 1,010 individual images
carried neither.
How WebSpeed decides what to defer
WebSpeed lazy-loads below-the-fold images, backgrounds and iframes automatically while detecting the LCP candidate and excluding it, so the hero stays eager, preloaded and high priority. It also writes real aspect-ratios onto unsized images first, so deferring their load does not reintroduce the shift it was meant to avoid.