What is Lazy loading?
Instead of loading every image at once when a page opens, the browser fetches only those in the visible area; the rest follow as they approach the screen. Browsers can do this themselves via the `loading="lazy"` attribute on the `img` element, which all major browsers support. Alongside that there are home-made solutions that first park the image address in a different attribute such as `data-src` and insert it with JavaScript.
For search, Google asks for lazy-loaded content to load as soon as it is visible in the viewport, without relying on user actions such as scrolling or clicking, because Google Search does not interact with the page. The built-in method meets this, since the address stays in the source code. With custom solutions it depends on what the script is waiting for. You can check it with URL Inspection in Search Console: if the image address appears in the rendered HTML in the `src` of the `img` element, the setup is fine.
Lazy loading does not belong on the first visible image. Google advises against lazy-loading content that is visible straight away when the page opens, and in performance measurement it pushes back the Largest Contentful Paint, the moment the largest visible element appears. Further down the page it saves data and time; right at the top it slows down exactly what visitors are waiting for.
Why does Lazy loading matter?
Lazy loading makes pages faster as long as it sits in the right place. According to the HTTP Archive Web Almanac 2025, 16 to 17 per cent of pages nevertheless defer their largest, first visible image; on mobile, 10.4 per cent do so with the built-in attribute and 5.9 per cent with custom script solutions, where Google only sees the image if the script loads it without scrolling.
Lazy loading in practice
- 01A blog article with twelve images loads only the header image on opening; the eleven images below follow as the reader scrolls. The header image carries no `loading="lazy"`, the others do.
- 02An image carousel only shows the second picture after a click on the arrow and only then inserts its address by script. For Google Search that image stays empty, because it does not click.
- 03A shop checks a product page with URL Inspection in Search Console and finds only a placeholder image in the `src` of the gallery images in the rendered HTML. The real addresses are in `data-src`.
