What is lazy loading?
Definition Lazy loading is a technique that delays downloading resources until they are needed, typically images and iframes below the visible part of the page, which load only as the user scrolls near them. Browsers do it natively with the loading="lazy" attribute on <img> and <iframe>, supported in all current major browsers. It saves data and speeds up the first load, but must never be used on the main image at the top of the page.
Related guide: Largest Contentful Paint: How to Improve LCP on Mobile
How does native lazy loading work?
With loading="lazy", the browser doesn't request the image when it parses the HTML. Instead it waits until the element is within a certain distance of the viewport, so the image is usually ready by the time it scrolls into view. Each browser chooses that distance itself; Chromium uses a larger margin on slow connections. The default, loading="eager", loads immediately.
Before native support, sites used JavaScript libraries that swapped a data-src attribute into src with the Intersection Observer API. That still works, but the native attribute needs no script and keeps the real URL in the HTML, where browsers and search engines can find it.
Example
<!-- Above the fold: load now, with high priority -->
<img src="hero.jpg" width="1200" height="675" fetchpriority="high" alt="…">
<!-- Further down: load when the visitor gets close -->
<img src="gallery-1.jpg" width="800" height="600" loading="lazy" alt="…">
<iframe src="https://www.youtube.com/embed/…" width="560" height="315"
loading="lazy" title="Product video"></iframe>Always give lazy images width and height: without reserved space, the page jumps when they arrive, which counts towards Cumulative Layout Shift.
When not to lazy-load
- The LCP image. Lazy-loading the hero image delays Largest Contentful Paint, because the browser waits for layout before it even starts the download; web.dev advises never lazy-loading the LCP image.
- Images in the first screen. On a phone, "above the fold" is only about 600–850 CSS px tall, but the first one or two images often are in it.
- Tiny images such as icons, where the saving is negligible.
Content that the page must show immediately should be in the HTML, not loaded on scroll by JavaScript, so that crawlers that don't scroll can still see it.
How it affects MobileCheck results
MobileCheck has no lazy-loading check, but lazy images affect two of its measurements: images below the fold that aren't fetched during the load don't count towards the page weight (flagged over 3 MB), and a lazy-loaded hero image usually shows up as a slow LCP (flagged over 2.5 s).
Related terms
Guides and tools
- Largest Contentful Paint: How to Improve LCP on Mobile
- Page Weight: How to Reduce Page Size for Mobile