Lazy loading delays a non-critical resource until it is needed, reducing initial work when deferred content remains discoverable, usable and available to crawlers.
Lazy loading delays a non-critical resource until it is needed, reducing initial work when deferred content remains discoverable, usable and available to crawlers.
Choose what may wait
Lazy loading is appropriate for content well below the initial viewport, such as lower-gallery images, embeds or long-list thumbnails. It is a poor default for a hero image, a product image a buyer needs immediately, the largest contentful element, or a component required for keyboard navigation. Deferring an above-the-fold resource can delay the very moment the page becomes useful.
Make an inventory of the initial viewport at common mobile and desktop widths. Identify the likely LCP candidate before adding loading attributes. Use explicit width and height or an equivalent reserved aspect ratio so images do not push text after they arrive.
Use robust markup
For ordinary images, the browser’s native loading="lazy" is often sufficient. Keep a meaningful alt value for informative media, an empty alt only for decoration, and a real image source that remains available without a scroll-trigger script. For responsive images, provide the appropriate srcset and sizes so the browser does not download an oversized resource by default.
Do not put essential links, headings or product information only inside a client-side lazy component. A crawler and a user without a successful script execution should still discover the page’s core content. Intersection observers can be useful for specialised widgets, but they add failure modes that native markup avoids.
Test the viewport boundary
Use a throttled mobile test and a normal browser load. Check whether the primary image starts promptly, whether below-fold media is deferred, and whether scroll reveals each resource without blank placeholders or layout shifts. Inspect the DOM and network waterfall: an image marked lazy but fetched immediately may be close to the viewport; an image fetched too late may have been deferred too aggressively.
For an article with a diagram after the introduction, lazy loading can be reasonable if the diagram is not the LCP element and its dimensions are reserved. For a product page, the primary product image is normally a bad candidate because it is central to the first decision.
Limits and verification
A smaller initial request count does not by itself prove a faster or better page. Measure document response, LCP, layout stability and interaction separately. Recheck rendered HTML and a crawler sample after template changes so deferred media still has its intended alt text, canonical page context and internal links.