Lazy loading is a technique that defers the loading of images, videos, and other media until they are needed — typically when they scroll into the user's viewport. Instead of loading all page media when the page first loads, lazy loading prioritises above-the-fold content and loads below-fold content on demand. This reduces initial page load time, decreases bandwidth consumption, and improves Core Web Vitals (particularly LCP) by avoiding the loading of off-screen resources that users may never see.
Lazy loading has become a standard performance technique for image-heavy pages — particularly ecommerce category pages, galleries, and long-form articles. The native HTML loading='lazy' attribute, supported by all modern browsers, makes basic lazy loading implementation straightforward without JavaScript. However, lazy loading requires careful implementation to avoid SEO problems — if Googlebot cannot discover all images because they are lazily loaded, those images will not be indexed.
Lazy loading implementation and SEO considerations
- Use native HTML lazy loading — the loading='lazy' attribute on img and iframe elements is the simplest, most SEO-safe approach
- Do not lazy load above-fold images — the largest visible image should load immediately to improve LCP
- Preload hero images — use <link rel='preload'> for the most important above-fold image
- Avoid JavaScript lazy loading for SEO-critical images — Googlebot may not execute all JavaScript; native lazy loading is more reliable
- Use descriptive alt text on all lazily loaded images — alt text is the primary SEO signal for images whether lazily loaded or not
- Test with Google's URL Inspection tool — verify that lazy-loaded images are rendered in the fetched HTML
Incorrectly applied lazy loading can worsen LCP. The most common mistake is applying lazy loading to the above-fold hero image — which delays the loading of the page's largest visible element, directly harming LCP scores. The golden rule: never apply lazy loading to images visible in the viewport on initial load. Apply lazy loading only to images that appear below the fold, where the user must scroll to see them.
Yes — video lazy loading is more complex than image lazy loading because videos have additional considerations (preloading poster images, preventing autoplay until in view). For embedded YouTube and Vimeo videos, using a lightweight thumbnail placeholder that loads the actual player iframe only on user interaction (called 'facade loading') is the most performance-efficient approach. This can dramatically reduce initial page weight for pages with multiple video embeds, often saving several megabytes of JavaScript that would otherwise load immediately.