Lazy Loading
Also known as: Deferred loading, On-demand loading
Lazy loading defers the loading of non-critical resources, usually images and iframes, until they are about to enter the viewport. This reduces initial page weight and speeds up first paint.
Key Takeaways
- Lazy loading defers non-critical resources like images and iframes until they are about to enter the viewport.
- It reduces the initial page weight, so the top of the page paints faster and uses less bandwidth.
- Modern browsers support native lazy loading through the loading equals lazy attribute on images and iframes.
- Lazy loading the hero or above-the-fold content backfires by delaying Largest Contentful Paint.
- It is most valuable on long, image-heavy pages where much of the media sits below the fold.
How It Works
A normal page tells the browser to fetch every image and iframe up front, even the ones far down the page. Lazy loading changes that by holding off on off-screen assets until the user scrolls near them. This trims the bytes needed for the first paint and speeds up initial load.
Browsers now support this natively with the loading equals lazy attribute, and scripts can do the same for more complex cases. Because fewer resources compete for bandwidth early, the visible part of the page renders sooner, which helps Core Web Vitals on media-rich layouts.
The key discipline is what you never lazy load. Anything Above the Fold, especially the hero image, should load eagerly, because deferring it delays Largest Contentful Paint and makes the page feel slower. Lazy loading also complements fixing Render-Blocking Resources: one defers heavy media, the other clears scripts and styles out of the critical path.
Why It Matters
It cuts the bytes needed to render the top of the page, improving load time and Core Web Vitals on image-heavy pages. Faster initial load lowers bounce and protects ad Quality Score.
Example
An ecommerce store has a category page with sixty product thumbnails. Loading all of them at once makes the page heavy and slow on a phone. By adding native lazy loading to every image below the first row, the store only fetches what the shopper can see, then loads the rest as they scroll, cutting the initial page weight sharply.
Common Mistake
Lazy-loading the hero image or above-the-fold content. Deferring what the user sees first delays Largest Contentful Paint and makes the page feel slower, the opposite of the intent.
Frequently Asked Questions
How do I enable lazy loading?
For most images and iframes, add the loading equals lazy attribute in the HTML. Many content platforms and frameworks apply it automatically. For custom needs, an intersection observer script can trigger loading as elements approach the viewport.
Should I lazy load all images?
No. Lazy load only off-screen images. Images above the fold, especially the hero, should load eagerly so they do not delay Largest Contentful Paint. Deferring visible content makes the page feel slower, not faster.
Does lazy loading help SEO?
It can, by improving load speed and Core Web Vitals. But it must be implemented so search engines can still discover and render the content. Poorly built lazy loading that hides images from crawlers can hurt indexing.