What Is Lazy Loading?
Lazy loading is a performance technique that defers the loading of non-critical resources (typically images and iframes) until they are needed, specifically, until they enter or approach the user's viewport as they scroll. Instead of loading every image when the page first loads, lazy loading only fetches images the user is about to see, reducing initial page weight and improving load time metrics like LCP and Time to Interactive.
Native lazy loading
Modern browsers support lazy loading natively via the loading attribute: <img src='image.jpg' loading='lazy' alt='...'>. The loading='lazy' attribute tells the browser to defer loading until the image is near the viewport. Use loading='eager' (or omit the attribute) for above-the-fold images, lazy loading your hero or LCP image will hurt your LCP score.
What to lazy load
Lazy load: images below the fold, embedded videos (use a poster image with click-to-load), iframes (Google Maps, social embeds), and heavy third-party scripts. Don't lazy load: above-the-fold images, your LCP element, and critical CSS. The golden rule, anything users see on first load should not be lazy loaded.
Lazy loading and SEO
Google can crawl and index lazy-loaded images, the crawler simulates scrolling. However, images that only load via JavaScript-triggered events (not the native loading attribute) may not be indexed reliably. Using native loading='lazy' is both SEO-safe and performance-optimal.
Lazy Loading and Canvas Builder
HTML pages generated by Canvas Builder include appropriate lazy loading attributes on below-the-fold images, following best practices for LCP optimisation and page speed.
Start building freeFrequently asked questions
Should I lazy load all images?
No, never lazy load above-the-fold or LCP images. Lazy load everything below the fold. A common mistake is applying loading='lazy' globally to all images, which delays your hero image and hurts LCP.
Does Bootstrap 5 support lazy loading?
Lazy loading is a browser feature, not a Bootstrap feature. You add loading='lazy' to any <img> tag in your Bootstrap HTML. Canvas Builder generated HTML includes lazy loading on appropriate images.