What Lazy Loading Actually Does
Lazy loading defers anything off-screen until the visitor actually scrolls near it. A page with forty images doesn't need to download all forty before the first one is visible - only the handful near the top.
It's an easy win, which makes it tempting to apply everywhere by default - a habit that causes as many problems as it solves.
The Trap: Lazy-Loading the LCP Element
The single most common mistake is lazy-loading the hero image or whatever else counts as the Largest Contentful Paint element. Delaying the load of the exact thing Lighthouse is timing makes the score worse, not better - the browser waits to even start fetching it until the visitor scrolls, which by definition hasn't happened yet.
Anything above the fold should load eagerly. Lazy loading earns its keep starting just below it, where a visitor genuinely hasn't reached yet.
Doing It Right for Images and Video
For images, every lazy-loaded element still needs its width and height set explicitly, so the browser reserves the right amount of space before the image arrives. Skip that, and the page jumps as each image pops in - the exact thing Cumulative Layout Shift measures and penalizes.
Video needs its own version of the same idea: a poster image so there's something to see before playback starts, and preload set to none or metadata rather than auto so a video nobody's watching yet doesn't quietly consume bandwidth in the background.
The Default, Not a Manual Setting
None of this is something a team should have to remember to configure on every new page. It's the kind of default that either lives in how a project is built or gets silently missed. We cover the rest of what a strong performance score requires in Optimizing a Webflow Website to Reach 95+ Lighthouse Performance.
If a site's media is dragging the score down or causing visible jumps while it loads, get in touch and we'll sort out the loading strategy.