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 & 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.
Try Canvas Builder →