Lazy Loading

Lazy loading means not downloading what nobody is looking at. Images, embeds, and video below the fold wait until the visitor scrolls near them; the initial load carries only the assets the first screen needs. On image-heavy pages the savings are dramatic, often the majority of the page’s total weight.

The modern version is nearly free: browsers support it natively through a single loading="lazy" attribute, no JavaScript library required. The craft is in the exceptions. The hero image, the one that becomes Largest Contentful Paint, must never be lazy-loaded, or you have deferred the most important pixels on the page. And every deferred image still needs explicit dimensions, so the layout does not shift when it arrives, which is what Cumulative Layout Shift measures.

Applied with those two rules intact, lazy loading is one of the highest-value, lowest-risk performance moves available. Misapplied, it is a reliable way to fail Core Web Vitals with a technique meant to pass them, which is why it shows up in nearly every audit we run, in both directions.