Lazy Loading

What Is Lazy Loading?

Lazy loading is a design pattern that delays the loading of resources until they are actually needed by the user. Instead of downloading every image, video, and iframe when a page first loads, lazy loading waits until those elements are about to enter the browser's viewport before fetching them. This means a page with 50 images below the fold only loads the images visible on screen initially, fetching the rest as the user scrolls down.

The simplest way to implement lazy loading is with the native HTML loading="lazy" attribute, which is supported by all modern browsers. Adding <img src="photo.jpg" loading="lazy"> tells the browser to defer loading that image until the user scrolls near it. For more advanced control, developers can use the Intersection Observer API, a JavaScript interface that detects when elements enter or leave the viewport and triggers loading at precisely the right moment.

Lazy loading applies to more than just images. Videos, iframes (such as embedded YouTube players or maps), and even heavy JavaScript components can all benefit from deferred loading. Some frameworks implement route-based lazy loading, where entire sections of a single-page application are loaded on demand rather than bundled into the initial payload.

Why Lazy Loading Matters for SEO

The most direct SEO benefit of lazy loading is improved page speed. By reducing the amount of data that needs to be downloaded on initial page load, lazy loading significantly decreases Time to Interactive and Largest Contentful Paint scores. These are key components of Core Web Vitals, which Google uses as ranking signals for both mobile and desktop search results.

For pages with heavy media content, lazy loading can reduce initial page weight by 50% or more. This is particularly impactful on mobile connections where bandwidth is limited and every kilobyte matters. Faster initial loads reduce bounce rates, improve engagement metrics, and ensure that users can start reading content immediately rather than waiting for dozens of off-screen images to download.

However, lazy loading requires careful implementation to avoid SEO pitfalls. If lazy-loaded content relies on JavaScript that Googlebot cannot execute during JavaScript rendering, those images may not be indexed or may not contribute to image SEO. Always ensure that lazy-loaded resources have proper src attributes (not just data-src) and test your implementation with Google's URL Inspection tool to verify that the content is visible to crawlers.

How to Implement Lazy Loading Correctly

For images and iframes, start with the native loading="lazy" attribute as your baseline implementation. This requires zero JavaScript and is supported by Chrome, Firefox, Edge, and Safari. Never lazy-load above-the-fold images, particularly your hero image or LCP element, as this will actually hurt performance by delaying the most important visual content. Only apply lazy loading to images that are below the initial viewport.

When using JavaScript-based lazy loading libraries, ensure they use the Intersection Observer API rather than scroll event listeners, which can cause performance issues. Libraries like lazysizes and vanilla-lazyload are well-tested options. Set a reasonable rootMargin (e.g., 200px) so images start loading slightly before they enter the viewport, preventing visible loading delays as users scroll.

Always include explicit width and height attributes on lazy-loaded images to prevent layout shifts when the images load in. Without dimensions, the browser cannot reserve space for the image, causing content to jump around and worsening your Cumulative Layout Shift score. Use placeholder elements (low-quality image placeholders or solid color backgrounds) to provide a smooth visual experience during the loading transition.