What is Lazy Loading?
Lazy loading is a web performance technique that delays loading non-critical resources, such as below-the-fold images, videos, and iframes, until the visitor needs them (for example, when they scroll near them). It speeds up the initial page load and saves bandwidth. The name comes from a broader programming pattern that defers initializing an object until first use.
More About Lazy Loading
On the web, lazy loading usually means deferring images, videos, iframes, and other media items that sit below the fold, the part of the page you'd have to scroll to see. Instead of fetching everything up front, the browser loads those resources only when the visitor scrolls near them. That cuts bandwidth use, shortens page load time, and helps your Core Web Vitals scores.
Images are where most of the savings come from. According to HTTP Archive data cited by Google's web.dev, images are the most-requested asset type on most websites and take up more bandwidth than any other resource. Deferring the offscreen ones cuts how much of that the browser fetches before the page renders.
The name comes from a broader programming pattern: defer creating or initializing an object until the code first uses it. In PHP, for example, an autoloader loads a class definition the first time the class is used, such as when an instance is created.
How to add lazy loading to your site
Most sites only need the native HTML loading attribute. Add loading="lazy" to an image or iframe tag, and the browser defers the download until the visitor scrolls within range. No JavaScript library is required:
<img src="photo.jpg" alt="A hiking trail at sunset" loading="lazy" width="800" height="600">
If you run WordPress, you probably already have this. Since WordPress 5.5 (2020), WordPress has added loading="lazy" automatically to images that include both width and height attributes, and WordPress 5.7 (2021) extended that to iframes with both dimensions set. The rules have been refined since then: WordPress 5.9 (2022) stopped lazy-loading the first content image or iframe, which usually sits above the fold (testing across 50 popular themes showed that change made pages up to 30% faster), and since WordPress 6.3 (2023) the default is to skip the first 3 content media elements. So not every dimensioned image gets the attribute; don't assume yours did.
For content the attribute doesn't cover, developers use the Intersection Observer API, a browser feature that reports when an element enters the viewport, or code splitting, which breaks a JavaScript app into chunks that load on demand. To see what your pages actually serve, view the rendered page source and search for loading="lazy". For the rest of the speed checklist, see our guide to speeding up WordPress.
Lazy loading vs. eager loading
Eager loading is the browser's default: every resource is fetched as the page loads, wherever it sits. Writing loading="eager" does the same thing as adding no attribute at all. Neither approach is better. Each fits a different part of the page:
- Eager-load critical, above-the-fold content: your logo, the hero image, and anything else visible before scrolling.
- Lazy-load offscreen content: images further down the page, video embeds, and other below-the-fold sections.
When lazy loading backfires
The most common mistake is lazy-loading the big image at the top of the page. That delays your Largest Contentful Paint (LCP), because the browser waits on the one image it needs first. In A/B tests published on web.dev, disabling lazy loading improved LCP by 13% to 15% on sample WordPress archive pages. Google's guidance: load above-the-fold images eagerly and lazy-load only what's below the fold.
The second mistake is dropping width and height attributes. Without them, the browser can't reserve space before an image arrives, so the page jumps around as images load. That's exactly why WordPress skips loading="lazy" on images missing either attribute. Keep both on every image.
In the programming pattern, the trade-off is different: work you skip up front happens later instead, so the first use of a lazily initialized object is slower.
Examples of lazy loading in practice
You've almost certainly used lazy loading today:
- Images in a long article that appear as you scroll toward them.
- Infinite-scroll feeds, which fetch the next batch of posts only when you near the bottom.
- Video embeds that show a thumbnail and load the full player only when you click play.
- Code splitting in JavaScript frameworks like React, which downloads a route's code only when a visitor navigates to it.
Frequently Asked Questions
- Not when it's implemented correctly. Major crawlers can process native lazy loading, but important content must appear in the rendered HTML and load on viewport proximity, not after a click or scroll. And never lazy-load your above-the-fold image: that slows Largest Contentful Paint, a Core Web Vitals metric.
- Lazy loading is also called on-demand loading, deferred loading, or asynchronous loading. The opposite approach, fetching everything up front as the page loads, is called eager loading.
- It makes the initial load faster: the browser fetches fewer bytes before rendering the visible part of the page. Total downloads can end up the same if a visitor scrolls through everything, so the win is a faster first render plus the bytes saved on content nobody views.
- With the native loading attribute, images still load: browsers defer them only while JavaScript is enabled, so with scripts off everything loads up front. Library-based lazy loading is riskier: if the script never runs, the images it manages may never appear.
Custom Website Design
Get a one-of-a-kind, mobile-friendly website that makes your brand truly shine. Share your vision with us and we'll take it from there.
Custom Web Design