What Is Lazy Loading?

Q: How do I enable native lazy loading?

Add the `loading="lazy"` attribute to an ` ` or ` ` element. No JavaScript library is required, and it keeps working even if the client disables JavaScript. The browser then defers the fetch until the resource nears a calculated distance from the viewport.

Written byFlavio Amiel Founder, Roborank

Updated July 15, 2026

Lazy loading is the practice of deferring the download of offscreen resources — usually images and iframes — until the user scrolls close enough that they are about to be seen. Browsers support it natively through the loading="lazy" attribute, which reduces initial page weight and speeds up the first render without dropping any content.

Key Takeaways

Native lazy loading is enabled by adding loading="lazy" to an <img> or <iframe>; the default loading="eager" loads the resource immediately regardless of position.
The browser only fetches a lazy resource once it comes within a distance threshold of the viewport, so images far down the page never load if the user never scrolls to them.
In Chrome’s measurements, 97.5% of lazy-loaded images on 4G finished loading within 10ms of becoming visible, and 92.6% did even on slow 2G.
Never lazy-load your Largest Contentful Paint image; loading it eagerly (or with fetchpriority="high") keeps the main above-the-fold visual fast.

How Lazy Loading Works

A browser, left to its defaults, tries to fetch every image and iframe on a page as it parses the HTML, whether or not the user will ever see them. On a long article with dozens of images, that means downloading megabytes of media the visitor may never scroll to. Lazy loading flips the default: the browser holds off on an offscreen resource until the user scrolls close enough that it is about to enter view, then fetches it just in time.

Native, browser-level lazy loading is triggered by the loading attribute on <img> and <iframe> elements. Setting loading="lazy" defers the resource until it “reaches a calculated distance from the viewport,” in web.dev’s phrasing. The default value, loading="eager", loads the resource immediately regardless of where it sits on the page. A key subtlety: eager does not raise priority, it only prevents deferral — to actually prioritize a critical image you use fetchpriority="high" instead.

The distance threshold is deliberately generous so images finish loading before the user reaches them. Chrome tuned these thresholds in July 2020, tightening the fetch distance on fast connections (from 3000px to 1250px on 4G) and keeping a wider margin on slow ones (2500px on 3G and below). The payoff is that lazy loading rarely shows a visible gap. Because it is built into the browser, it also survives with JavaScript disabled — a robustness that script-based lazy loaders never had.

What to Lazy-Load and What to Load Eagerly

Lazy loading is a targeting decision, and the target is offscreen content. A useful checklist:

Lazy-load — images and iframes below the fold: gallery thumbnails further down a page, embedded videos and maps in the footer, avatars in a long comment thread, anything a visitor only reaches by scrolling.
Load eagerly — everything inside the initial viewport: the logo, the hero image, above-the-fold product shots. These should carry loading="eager" or no loading attribute at all.
Prioritize, do not just eager-load, the LCP image — the single largest above-the-fold visual deserves fetchpriority="high" so the browser fetches it first, since eager only prevents deferral without raising priority.

Native lazy loading via the loading attribute is preferred over JavaScript libraries because it needs no script, keeps working when JavaScript is disabled, and is handled by the browser’s own scheduler. Older script-based approaches using IntersectionObserver still exist for edge cases, but for images and iframes the built-in attribute covers the vast majority of needs.

Example of Lazy Loading

The strongest evidence that native lazy loading works without hurting the experience comes from Chrome’s own field data, published on web.dev. After the feature shipped, the team measured how often a lazy-loaded image was actually ready by the time it scrolled into view. On 4G connections, 97.5% of lazy-loaded images were fully loaded within 10 milliseconds of becoming visible. Even on slow 2G networks, 92.6% were fully loaded within 10ms of appearing. In practice, the image is essentially always there when the user arrives at it.

Those numbers explain why the recommendation is confident rather than hedged. Deferring offscreen images is close to free: you save the up-front bytes and almost never trade away a visible loading gap. The documented browser support backs this up — native lazy loading has shipped in Chrome 77+, Edge 79+, Firefox 75+, and Safari 15.4+, covering the overwhelming majority of traffic with a single HTML attribute and no library.

The one hard rule the same guidance stresses is the exception that proves it: do not lazy-load images inside the initial viewport, and especially not the Largest Contentful Paint image. Deferring the hero image means the browser discovers it late and fetches it at low priority, delaying the very metric that matters most. The correct pattern is to lazy-load everything below the fold and load the above-the-fold visuals eagerly, marking the LCP image with fetchpriority="high". Get that division right and lazy loading is one of the cleanest page-speed wins available.

The thing people get wrong

The most expensive mistake with lazy loading is lazy-loading the wrong image. People add loading=\"lazy\" to every <img> on the page with a global find-and-replace, and it quietly tanks their LCP — because the hero image, the single most important visual above the fold, is now deferred and fetched at low priority. Lazy loading is a tool for offscreen content. The images already in the viewport on load should be eager, and the LCP image often deserves fetchpriority=\"high\" on top of that. I always audit the fold first: eager everything a user sees without scrolling, lazy everything below it. Blanket-applying either setting is how you turn an optimization into a regression.

Frequently Asked Questions

What is lazy loading?

Lazy loading defers downloading offscreen resources, typically images and iframes, until the user scrolls near them. It cuts the bytes a page must fetch up front, so the visible content renders faster and bandwidth is not spent on media the visitor may never scroll down to see.

How do I enable native lazy loading?

Add the loading="lazy" attribute to an <img> or <iframe> element. No JavaScript library is required, and it keeps working even if the client disables JavaScript. The browser then defers the fetch until the resource nears a calculated distance from the viewport.

Does lazy loading hurt SEO?

Not when done correctly. Native lazy loading uses standard HTML that Googlebot supports, and the content still loads. The risk is lazy-loading your Largest Contentful Paint image, which slows a Core Web Vital, or hiding content behind interactions a crawler never triggers.

Should I lazy-load every image?

No. Only lazy-load images below the fold. Images visible when the page first loads, especially the Largest Contentful Paint image, should load eagerly so the initial view renders fast. Use fetchpriority="high" on the LCP image to make it faster still.

The Bottom Line

Lazy loading is a scheduling decision: fetch what the visitor can see now, and postpone what lives further down the page until they head that way. Applied to offscreen media it shrinks the initial payload and quickens the first paint for free. Applied blindly to the hero image it backfires, which is why the fold — not the whole page — is the line that divides eager from lazy.

Sources

Browser-level image lazy loading for the web — web.dev (Google)
Lazy loading (loading attribute) — MDN Web Docs

Roborank does this

Roborank’s site audit checks that below-the-fold images are deferred and that your LCP image is not accidentally lazy-loaded — a common cause of a slow Core Web Vitals score.

Audit your image loading →

Rank & Cash — the weekly SEO breakdown

One practical teardown a week on ranking in search and getting cited by AI. No fluff.