Lazy loading means that non-critical resources such as images, iframes or scripts load only when they are needed, for example when they are about to scroll into view. MDN describes it as a strategy to identify non-critical resources and load them only when needed, which shortens the critical rendering path and the initial load time.
How is lazy loading implemented?
- The
loadingattribute. MDN says it applies to<img>,<iframe>,<video>and<audio>. The default value iseager, which loads at once. Withlazy, loading is deferred until the element is near the viewport. - Intersection Observer API. A script detects when an element enters the viewport and then loads it.
- Code splitting. JavaScript loads on demand.
Lazy loading and SEO
Google writes that a lazy-loading implementation must load all relevant content whenever it is visible in the viewport. Google names three suitable approaches, browser-native lazy loading for images and iframes, the Intersection Observer API, and JavaScript libraries that load content when it enters the viewport. These must not rely on user actions such as scrolling or clicking, because Google Search does not interact with pages that way.
For infinite scroll, Google advises giving each content chunk its own persistent URL with an absolute page number such as ?page=12, linking the chunks in sequence, and updating the address with the History API. The URL Inspection tool in Search Console shows whether image or video URLs appear in the src attributes of the rendered HTML.
Common mistakes
The image at the top of the page is marked loading="lazy". web.dev puts it clearly: never lazy-load your LCP image, because it always causes unnecessary resource load delay and hurts LCP. web.dev adds that images visible on first load should use the default eager loading. A width and height on every lazy image reserve space and prevent layout shifts (CLS).
Example
<img src="/gallery-3.jpg" width="800" height="600"
loading="lazy" alt="Side view of the product">
FAQ
Is lazy loading good for SEO? It speeds up pages when used for offscreen content. Content that loads only after a scroll or click event may never be rendered for Google.
What is eager loading? The browser’s default. The resource loads immediately.
Sources
- Lazy loading – MDN Web Docsdeveloper.mozilla.org
- Fix lazy-loaded content – Google Search Centraldevelopers.google.com
- Browser-level image lazy loading – web.devweb.dev
- Optimize Largest Contentful Paint – web.devweb.dev
Last updated: