Lazy Loading
A technique that defers loading of off-screen images, iframes, or other resources until the user is about to scroll them into view.
Definition
Lazy loading is a performance technique that delays loading non-critical resources — typically images and iframes below the fold — until they're about to enter the viewport.
Browsers support native lazy loading via the `loading="lazy"` attribute on `<img>` and `<iframe>` elements, removing the need for a JavaScript library in most cases. web.dev's guidance is that lazy loading reduces initial page weight and can improve metrics like Largest Contentful Paint, but the LCP image itself should not be lazy-loaded — deferring it slows down rendering and hurts the metric it's meant to help.
Examples
Long-form article with many images
A news article with 30 inline images marks every image below the first viewport with `loading="lazy"`. The browser only requests them as the reader scrolls, cutting initial page weight by roughly 70% and improving LCP.
Sources
Related terms
Where QueryCatch uses this
Last updated: 10/05/2026