Lazy Loading
Lazy loading delays the loading of a resource until it is likely to be needed.
It is commonly used for images, iframes, videos, and other content located below the initial viewport.
What It Means in Practice
A long page may contain twenty images, but a visitor initially sees only the first few.
Loading all twenty immediately can consume bandwidth and processing time before those resources provide any value.
Lazy loading allows lower-priority content to wait until the visitor approaches it.
How It Works
Modern browsers support native lazy loading for images and iframes.
For example:
loading="lazy"
can tell the browser that the resource does not need to be requested immediately.
JavaScript can also be used for more advanced deferred-loading behaviour.
Why It Matters
Deferring non-critical resources reduces competition for the assets needed to render the initial page.
This can reduce page weight during startup and leave more network capacity for important content.
Lazy loading can be especially useful for long, image-heavy pages and embedded third-party content.
Common Problems
Lazy loading becomes harmful when it is applied too aggressively.
Common problems include:
- Lazy-loading the main hero image
- Lazy-loading the Largest Contentful Paint resource
- Delaying images that are already visible when the page opens
- Loading deferred content too late and causing noticeable pop-in
- Using heavy JavaScript for behaviour the browser can handle natively
- Lazy-loaded content causing layout movement
How to Improve
Lazy-load resources that begin outside the initial viewport.
Allow important above-the-fold content to load normally and reserve layout space before deferred images arrive.
Test the actual loading sequence rather than assuming that more lazy loading always means better performance.