freecourses.digital
Lesson progress: 0 of 3 activities done
All lessons in Technical SEO Auditing Lesson 8.6 of 84

Lazy Loading and Crawl Accessibility

Inside this lesson

  • Which lazy loading methods Google supports
  • Why scroll and click events can hide content
  • How to make infinite scroll crawlable
  • How to test lazy-loaded content

Short answer

Lazy loading is safe when it uses native loading="lazy" or loads content as it enters the viewport, since Googlebot renders with a tall viewport. It fails when content waits for scroll events, clicks, or load more buttons. Make infinite scroll crawlable with paginated URLs and real links, and test with URL Inspection's rendered HTML.

A Davao furniture shop’s category pages showed 12 products, then loaded more as you scrolled. There were no page 2 or page 3 URLs. Googlebot saw the first 12 products in each category. The other 400 were reachable only through the sitemap, with almost no internal links.

What works

  • Native lazy loading: <img src="sofa.webp" loading="lazy">
  • Viewport-based loading with IntersectionObserver
  • Real src in rendered HTML, not only data-src waiting for a script
  • Paginated URLs behind infinite scroll

What fails

  • Content loading only on scroll events
  • Content behind “Load more” or “Show all” buttons with no URL
  • Images that keep a placeholder src until user interaction
  • Lazy-loading the LCP image (performance problem, Lesson 7.4)

Making infinite scroll crawlable

  1. Give each chunk a real URL: /sofas/?page=2.
  2. Link to those pages with <a href> (visible pagination or in the HTML).
  3. Update the URL with the History API as users scroll.
  4. Make each paginated URL load directly with its items.

How to test

  • URL Inspection rendered HTML: are all images’ src real? Are lower items present?
  • Rendered crawl: compare product links found per category with the real count.
  • Image tab: look for placeholder images repeated across many pages.

Practice: crawler friendly or not?

Sort each item into the right group.

  • <img loading="lazy" src="chair.webp">

  • Products load only on scroll events, no page URLs

  • Load more button backed by /sofas/?page=2 links

  • Images with data-src and a blank placeholder src until scrolled

  • IntersectionObserver loading content in view

Common mistakes

  • Infinite scroll without paginated URLs.
  • Old lazy-load plugins relying on scroll events.
  • Checking only how it looks in your browser.
1. Does Googlebot scroll like a user?
2. How do you make infinite scroll crawlable?
3. Which lazy loading method is safest?

Your action

Next, you will put it all together to diagnose JavaScript SEO problems.

Key terms

Native lazy loading
The loading="lazy" attribute on images and iframes, handled by the browser.
IntersectionObserver
A browser API that loads content when it enters the viewport. Works with Google's tall viewport.
Scroll event loading
Loading content only when a scroll event fires. Googlebot does not scroll, so this can fail.
Infinite scroll
A list that keeps loading items as the user scrolls, often without unique URLs.

Questions beginners ask

Does Googlebot scroll?

Not like a user. It renders with a very tall viewport, so content that loads when in view usually appears.

Are lazy-loaded images indexed?

Yes, with native lazy loading or viewport-based loading and a real src in the rendered HTML.

Is a 'Load more' button bad?

Only if it is the only way to reach items. Add paginated URLs with real links behind it.

Should I put noscript fallbacks?

They can help non-rendering crawlers, but real src attributes and paginated URLs are better solutions.

Related lessons

Want someone to handle SEO for your business while you learn? The team at Remar Digital can help.