Lazy loading holds off on calling a page element until it's actually needed, and it's most commonly used to delay loading images on image-heavy pages. Without it, a page normally loads every image up front, including the ones further down that aren't yet visible. With lazy loading, those out-of-view images wait until the visitor scrolls to them, so the page has fewer elements to load right away and can display faster.
The tradeoff is timing: lazy loading is meant for content below the fold, not for what's visible the moment a page loads. Applying it to an above-the-fold hero image or the largest visible element actually slows down metrics like Largest Contentful Paint, since the browser now waits to even start fetching an image it needs immediately. Modern browsers support native lazy loading through a simple loading="lazy" attribute on an <img> tag, no external library required, which makes it a relatively cheap technique to apply correctly, as long as it's scoped to genuinely out-of-view content and left off the images a visitor sees first.
