Does Lazy Loading Affect SEO? How to Do It the Right Way

This guide answers whether lazy loading helps or hurts your search performance and shows you how to set it up so Google still sees every image and block of content. The short answer to does lazy loading affect SEO is that it helps when done right and hurts in two specific cases: lazy loading the main above the fold image, and content that only loads after a scroll or click.

Can Google crawl lazy loaded images?

Yes, Google can crawl and index lazy loaded images as long as they load when they become visible in the viewport and their real URL ends up in the src attribute. Google’s guide to fixing lazy-loaded content says your implementation should load all relevant content whenever it is visible in the viewport.

The key detail is that Google Search does not interact with your page. It will not scroll, click a “load more” button or hover over a gallery. So lazy loading that waits for a scroll event can leave images and text invisible to Google, while lazy loading based on the viewport works.

Google lists three methods that work: the browser’s built in loading attribute for images and iframes, the IntersectionObserver API, and a JavaScript library that loads content when it enters the viewport. Old scripts that listen for scroll events, or that keep the real image URL in a data-src attribute that is never swapped in for crawlers, are where problems start.

Should you lazy load above the fold images?

No, you should not lazy load images that are visible when the page first loads, especially the hero or featured image that is usually the Largest Contentful Paint element. Lazy loading tells the browser to wait, and for the most important image on the page, waiting is the opposite of what you want.

web.dev measured this in its study on the performance effects of too much lazy loading. Across HTTP Archive data, the median 75th percentile LCP was 2,922 ms for pages without lazy loading and 3,546 ms for pages with it. On WordPress archive pages, skipping lazy loading for above the fold images improved LCP by 13% on desktop and 15% on mobile in their test, while keeping most of the data savings.

In practice: leave loading=”lazy” off the logo, the hero, the first featured image and the first one or two product images in a grid. Everything further down can be lazy.

Remember that the fold moves. An image that sits below the first screen on a desktop may be the first thing a phone shows, and the reverse is also true. Check your key templates on a phone sized screen before deciding which images to exclude, and when in doubt, load the first image in the main content normally.

Is native lazy loading better than JavaScript lazy loading?

For most sites, native lazy loading with the loading=”lazy” attribute is the better choice because it needs no script, the browser decides when to fetch based on distance from the viewport, and Google can see the real image URL in the HTML straight away. JavaScript lazy loading still has a place for background images and complex components.

According to web.dev’s guide to browser-level image lazy loading, the loading attribute is supported for images in Chrome 77, Edge 79, Firefox 75 and Safari 15.4, and for iframes in all of them too. Chrome starts fetching lazy images 1,250 pixels before they reach the viewport on fast connections and 2,500 pixels on 3G or slower, so most visitors never see a blank space.

WordPress has added loading=”lazy” to images by default for years and now skips it for images it expects near the top of the page. Many themes and performance plugins add their own JavaScript lazy loading on top, which can double up. Pick one system, and prefer native.

How should you handle infinite scroll and load more buttons?

For infinite scroll and load more buttons, give every chunk of content its own URL that Google can reach through normal links, because Googlebot will not scroll or press buttons to see more. Google recommends persistent URLs such as ?page=2 with the same content on every load, linked in sequence, and updating the browser URL with the History API as each new chunk becomes the main content.

This matters most on blog archives and ecommerce categories. If page 2 of a category only exists as a JavaScript load, products listed there may only be found through other paths, like your sitemap. For more on how images and other media get found and shown in search, see my guide to content and media SEO.

What does a lazy loading audit look like on a real page?

How do you test that Google sees lazy loaded content?

You test it with the URL Inspection tool in Search Console: run a live test, view the rendered HTML and confirm your images’ real URLs appear in their src attributes and that all text content is present. Do this for one page of each template.

1. Run a live test in URL Inspection and open the rendered HTML.
2. Search for a few image file names from lower down the page.
3. Check the screenshot for blank areas where content should be.
4. Confirm the hero image has no loading=”lazy” in the HTML source.
5. Recheck after any theme or plugin update, since lazy loading settings change often.

Lazy loading checks are part of my free SEO audit checklist. If you want a full review of how your templates load images and content, my technical SEO service covers rendering, lazy loading and Core Web Vitals together.

Frequently asked questions