Does lazy loading affect AI visibility? Getting mixed signals on this

Let me break down each lazy loading type.

1. Native lazy loading for images (loading=“lazy”):

<img src="image.jpg" loading="lazy" alt="Description">

Impact: Generally fine for AI crawlers.

• Image URL is in HTML
• Crawlers can see the reference
• They don’t need to “render” the image to know it exists

2. JavaScript lazy loading for images:

<img data-src="image.jpg" class="lazy">
// JS swaps data-src to src on scroll

Impact: Potentially problematic.

• Without JS execution, src is empty
• Crawlers might not see the image
• Use loading=“lazy” instead

3. Intersection Observer for content:

observer.observe(element);
// Loads content when element enters viewport

Impact: Problematic for AI.

• AI crawlers don’t have a “viewport”
• Don’t scroll or trigger intersection
• Content might never load

4. Infinite scroll:

Impact: Very problematic.

• Content beyond initial page is invisible
• Crawlers won’t scroll to trigger loading
• Only first page of content visible

The general rule:

If content requires user interaction or viewport presence to load, AI crawlers likely won’t see it.

Performance vs AI visibility tradeoffs.

Why we lazy load:

• Faster initial page load
• Better Core Web Vitals
• Reduced bandwidth for users

The tension:

• What’s good for performance might hurt AI visibility
• Especially JavaScript-dependent lazy loading

The solution approach:

For images: Native lazy loading gives both benefits. Use it.

For content: Server-render critical content. Lazy load only:

• Below-fold supplementary content
• Recommendations that aren’t citation targets
• UI enhancements that don’t affect indexable content

The priority:

Identify what content you want AI to cite. That content must be in initial HTML. Everything else can be performance-optimized.

Practical example:

Article page:

• Article text: In HTML, always (cite target)
• Related articles: Can lazy load (not cite target)
• Comments: Can lazy load (not cite target)
• Share buttons: Can lazy load (UI only)

What we know about AI crawler behavior.

GPTBot:

• Basic HTTP requests
• Minimal JavaScript execution
• Follows links it can see in HTML

ClaudeBot:

• Similar to GPTBot
• HTML-focused crawling
• Limited dynamic content handling

PerplexityBot:

• More sophisticated
• Some JavaScript handling
• But still primarily HTML-focused

Common across all:

• No scrolling
• No user interaction simulation
• Time-limited processing
• HTML content prioritized

The implication:

Content that requires:

• Scrolling
• Click interactions
• Extended JavaScript execution
• Viewport presence

…is likely invisible to these crawlers.

The test strategy:

1. View page source (not inspect element)
2. Is your critical content there?
3. If not, crawlers don’t see it

Simple but definitive.

Implementation recommendations.

For new implementations:

Images:

<img src="image.jpg" loading="lazy" alt="Description">

Done. Native is best.

Content sections:

<div class="content">
  <!-- Full content in HTML -->
  Complete article text here
</div>

Lazy load only visual enhancements, not content.

Lists/grids:

<ul class="items">
  <li>Item 1</li>
  <li>Item 2</li>
  <!-- At least 10-20 items in HTML -->
</ul>
<a href="?page=2">Load more</a>

Initial items in HTML, pagination for more.

For existing implementations:

If you have JS-dependent lazy loading:

1. Audit what content is affected
2. Prioritize critical citation targets
3. Migrate those to server-rendered
4. Keep lazy loading for non-critical content

The check:

After changes:

curl -s https://yoursite.com/page | grep "critical content phrase"

If it’s there, you’re good.

Monitoring perspective.

How to know if lazy loading is hurting you:

1. Check Am I Cited data

• Are pages with lazy-loaded content cited less?
• Compare similar pages with different implementations

2. Manual testing

• Ask AI about content on lazy-loaded sections
• Does it know the information?
• If not, the content might be invisible

3. Server logs

• How are AI crawlers interacting with your site?
• Are they getting complete responses?

What we’ve seen:

Sites with significant lazy loading (especially infinite scroll):

• 40-60% less content visible to AI
• Lower citation rates for that content
• Fixed after implementing SSR/pagination

Sites with only image lazy loading:

• No significant impact
• Native loading=“lazy” works fine

The recommendation:

Audit, test, monitor. Don’t assume your implementation is fine. Verify it.

Clear action plan now.

What we’re keeping:

• Native lazy loading for images - no issues

What we’re changing:

Intersection Observer sections:

• Moving critical content to initial HTML
• Only lazy-loading UI enhancements

Infinite scroll pages:

• Adding pagination
• First 20 items in HTML
• “Load more” button for additional

Testing approach:

1. Curl pages after changes
2. Verify critical content is in HTML
3. Monitor AI visibility with Am I Cited
4. Compare citation rates before/after

The principle: Content we want AI to cite = always in HTML Everything else = can be performance optimized

Thanks for the technical clarity!