GlossarySEO
What is lazy loading, and does it affect SEO?
Also called: loading="lazy", lazy-loaded images, deferred loading
Definition
Lazy loading delays loading images, iframes or content until they're about to scroll into view. It speeds up pages, but content must load without clicks or scrolling or Google may never see it.
Lazy loading, explained
The simplest form is built into browsers: add loading="lazy" to an <img> or <iframe>, and the browser waits until it's near the viewport. Custom setups use the IntersectionObserver API to load components as they approach the screen. Both cut the amount of data a page downloads up front.
Google's lazy-loading guide sets one rule above the rest: content must load when it becomes visible in the viewport, not in response to user actions. It points out that Google Search does not interact with your page, so anything that waits for a scroll event, a click or a swipe can stay invisible to Googlebot. Browser-native lazy loading and IntersectionObserver are the methods it recommends because they don't depend on interaction.
For infinite scroll, Google's advice is to give each chunk of content its own persistent URL, such as ?page=12, and update the address bar with the History API, so each section can be reached and indexed directly. Test the result with URL Inspection and check that lazy-loaded images have their real URLs in the src attribute in the rendered HTML.
Performance has one exception. Don't lazy-load the image that's likely to be the Largest Contentful Paint element, usually the hero image. web.dev's LCP guidance warns against it, because it makes the browser discover the most important image late. Load above-the-fold images eagerly, consider fetchpriority="high" for the hero, and lazy-load what's further down.
Why it matters for founders
Done right, lazy loading makes pages faster for free. Done wrong, it hides reviews, product lists or images from Google, or makes your LCP worse.
Example
Your landing page lazy-loads everything, including the hero screenshot. You remove loading="lazy" from the hero and add fetchpriority="high", keep lazy loading for screenshots lower down, and LCP improves.
Common mistakes
- Lazy-loading the hero or LCP image.
- Loading content only after a scroll event or click.
- Infinite scroll with no paginated URLs behind it.
- Using placeholder
srcvalues without the real image URL in the rendered HTML.
Sources
Checked
Related terms
- Largest Contentful Paint (LCP)Largest Contentful Paint (LCP) is a Core Web Vital measuring how long it takes for the largest image or text block in the viewport to render. Google's target is 2.5 seconds or less for 75% of page loads.
- PaginationPagination splits a long list, like blog posts or products, across several pages. Google treats each page as a separate URL, so each needs its own URL, crawlable links and a self-referencing canonical.
- RenderingRendering is when a search engine runs a page's JavaScript and CSS in a headless browser to see the final content, as a user would. Google renders pages before indexing what it finds.
- Image SEOImage SEO is making images discoverable and understandable in search and fast to load: HTML image elements, descriptive filenames and alt text, relevant surrounding text, modern formats and sensible sizes.