3 Jun 26 
Lazy loading defers offscreen images and content until they are needed, cutting initial load time. Done carelessly it causes layout shifts and blank spaces. Here is how to lazy load the right things the right way.
WEB PERFORMANCE
A web page often loads a lot of things the visitor may never see: images far down the page, content below several scrolls, embeds in sections most people never reach. Lazy loading is the technique of deferring those resources until they are actually needed, usually as they approach the viewport, so the browser can spend its early effort on what the person sees first. Done well, it makes pages load faster and feel lighter, especially on long pages and slower connections. Done carelessly, it introduces its own problems, blank spaces, content that pops in late, and layout that jumps around. The difference is entirely in what you lazy load and how.
What to lazy load, and what not to
The core rule is simple: lazy load what is offscreen, never what is onscreen at the start. Anything visible in the initial view, especially your main hero image, should load immediately and even be prioritised, because deferring it delays the very first impression and hurts your Largest Contentful Paint. This is the opposite of lazy loading and closer to the logic behind preloading a critical hero image. Everything below the fold, though, images, heavy embeds, offscreen sections, is a good candidate for deferral, because loading it early costs bandwidth and time for content the person has not reached and may never reach. The mistake that undoes the benefit is lazy loading things that are actually visible immediately, which delays what matters most in a misguided attempt to save load.
Avoiding the layout shift trap
The most common damage from careless lazy loading is layout shift. When an image or block loads late and no space was reserved for it, everything around it jumps as it appears, which is jarring and hurts your Cumulative Layout Shift score, the problem covered in fixing the jumps of layout shift. The fix is to always reserve the space a lazy-loaded element will occupy, by giving images explicit dimensions so the browser can hold their place before they arrive. Space reserved in advance means the content fills in smoothly instead of shoving the page around. Lazy loading and layout stability are not in conflict; you just have to reserve the room.
Getting the timing right
The other subtlety is when the deferred content actually loads. If it only starts loading the instant it enters the viewport, the person may scroll to a blank space and wait, which feels broken. Good lazy loading starts fetching a little before the element reaches the screen, so it is ready by the time the person gets there, invisible rather than noticeable. Most modern approaches handle this with a sensible margin by default, but the principle to hold is that lazy loading should be invisible: the person should never see a blank hole waiting to fill. If they do, you are loading too late, and the margin needs to be more generous. This is the same balance-and-measure discipline behind all performance work, best judged on real field data rather than lab guesses.
The takeaway
Lazy loading speeds up pages by deferring what is offscreen until it is needed, which is a real win on long or image-heavy pages. Load anything visible at the start immediately, defer only what is below the fold, always reserve space so nothing jumps as it fills in, and start fetching slightly before content scrolls into view so it is never a blank hole. Applied with that care, lazy loading makes pages faster and lighter with no jank; applied carelessly, it trades one problem for another.
If you want help making your pages load faster without the layout jumps, we would love to help.