Lazy Loading
Deferring the loading of off-screen images, components or routes until the user actually needs them, reducing initial page weight and improving performance.
· Reviewed by senior engineers
Lazy loading defers the loading of a resource — an image, a video, a JavaScript bundle, a whole route — until the user actually needs it. For images, the loading="lazy" attribute and the IntersectionObserver API let the browser skip everything below the fold until it enters the viewport. For code, dynamic import() splits bundles so a feature only downloads when the user opens it.
The payoff is measurable. A product listing page with thirty images and three carousels can cut megabytes off its initial load by deferring everything off-screen. A web app can defer admin-only code so consumers never download it. Both shorten Time to Interactive and improve INP.
The pitfalls are layout shift and unnecessary network round-trips. Lazy-loaded images without explicit width and height cause CLS — a Core Web Vital regression. Lazy-loaded JavaScript on a slow connection delays interaction at the worst possible moment. The mitigations are setting dimensions, using priority hints, prefetching likely-next chunks and never lazy-loading content that's actually above the fold.
Devinsta treats lazy loading as the default for images and route-level code splits, then audits each case for the right trade-off between initial weight and interaction latency.