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
srcin rendered HTML, not onlydata-srcwaiting 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
srcuntil user interaction - Lazy-loading the LCP image (performance problem, Lesson 7.4)
Making infinite scroll crawlable
- Give each chunk a real URL:
/sofas/?page=2. - Link to those pages with
<a href>(visible pagination or in the HTML). - Update the URL with the History API as users scroll.
- Make each paginated URL load directly with its items.
How to test
- URL Inspection rendered HTML: are all images’
srcreal? 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">
Answer: Crawler friendly.
-
Products load only on scroll events, no page URLs
Answer: Not crawler friendly.
-
Load more button backed by /sofas/?page=2 links
Answer: Crawler friendly.
-
Images with data-src and a blank placeholder src until scrolled
Answer: Not crawler friendly.
-
IntersectionObserver loading content in view
Answer: Crawler friendly.
Common mistakes
- Infinite scroll without paginated URLs.
- Old lazy-load plugins relying on scroll events.
- Checking only how it looks in your browser.
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.