Il lazy loading influisce sulla visibilità da parte dell'AI? Segnali contrastanti su questo tema

Spiego ogni tipo di lazy loading.

1. Lazy loading nativo per immagini (loading=“lazy”):

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

Impatto: In genere va bene per i crawler AI.

• L’URL dell’immagine è nell’HTML
• I crawler vedono il riferimento
• Non serve “renderizzare” l’immagine per sapere che esiste

2. Lazy loading via JavaScript per immagini:

<img data-src="image.jpg" class="lazy">
// JS sostituisce data-src con src allo scroll

Impatto: Potenzialmente problematico.

• Senza esecuzione JS, src è vuoto
• I crawler potrebbero non vedere l’immagine
• Usa loading=“lazy” invece

3. Intersection Observer per contenuti:

observer.observe(element);
// Carica i contenuti quando l'elemento entra in viewport

Impatto: Problematico per l’AI.

• I crawler AI non hanno una “viewport”
• Non fanno scroll né attivano intersection
• Il contenuto potrebbe non essere mai caricato

4. Scroll infinito:

Impatto: Molto problematico.

• I contenuti oltre la pagina iniziale sono invisibili
• I crawler non fanno scroll per caricare altro
• Solo la prima pagina è visibile

Regola generale:

Se il contenuto richiede interazione o presenza in viewport per essere caricato, i crawler AI probabilmente non lo vedono.

Compromessi tra performance e visibilità AI.

Perché usiamo il lazy loading:

• Caricamento pagina iniziale più veloce
• Migliori Core Web Vitals
• Minor consumo di banda per gli utenti

La tensione:

• Ciò che migliora le performance può danneggiare la visibilità AI
• Soprattutto il lazy loading che dipende da JavaScript

La soluzione:

Per le immagini: Il lazy loading nativo offre entrambi i vantaggi. Usalo.

Per i contenuti: Renderizza lato server i contenuti critici. Lazy loading solo per:

• Contenuti supplementari sotto la piega
• Raccomandazioni che non devono essere citate
• Miglioramenti UI che non riguardano i contenuti indicizzabili

La priorità:

Identifica quali contenuti vuoi vengano citati dalle AI. Questi devono essere nell’HTML iniziale. Il resto può essere ottimizzato per le performance.

Esempio pratico:

Pagina articolo:

• Testo articolo: Sempre nell’HTML (target per citazioni)
• Articoli correlati: Lazy loading possibile (non target citazione)
• Commenti: Lazy loading possibile (non target citazione)
• Pulsanti di condivisione: Lazy loading possibile (solo UI)

Cosa sappiamo sul comportamento dei crawler AI.

GPTBot:

• Richieste HTTP di base
• Esecuzione JavaScript minima
• Segue i link visibili nell’HTML

ClaudeBot:

• Simile a GPTBot
• Crawling focalizzato sull’HTML
• Gestione limitata dei contenuti dinamici

PerplexityBot:

• Più sofisticato
• Un po’ di gestione JavaScript
• Ma comunque prevalentemente focalizzato su HTML

Aspetti comuni:

• Niente scroll
• Niente simulazione interazione utente
• Elaborazione a tempo limitato
• Priorità ai contenuti HTML

L’implicazione:

I contenuti che richiedono:

• Scroll
• Clic/interazioni
• Esecuzione JavaScript prolungata
• Presenza in viewport

…sono probabilmente invisibili a questi crawler.

Strategia di verifica:

1. Visualizza il sorgente pagina (non l’ispeziona elemento)
2. Il tuo contenuto critico è presente?
3. Se no, i crawler non lo vedono

Semplice ma definitivo.

Raccomandazioni implementative.

Per nuove implementazioni:

Immagini:

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

Fatto. Il nativo è il migliore.

Sezioni di contenuto:

<div class="content">
  <!-- Tutto il contenuto nell'HTML -->
  Testo articolo completo qui
</div>

Lazy loading solo per miglioramenti visivi, non per i contenuti.

Liste/griglie:

<ul class="items">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <!-- Almeno 10-20 elementi nell'HTML -->
</ul>
<a href="?page=2">Carica altri</a>

Elementi iniziali nell’HTML, paginazione per il resto.

Per implementazioni esistenti:

Se hai lazy loading dipendente da JS:

1. Fai l’audit dei contenuti coinvolti
2. Dai priorità ai target critici per le citazioni
3. Migra quelli a renderizzazione lato server
4. Mantieni il lazy loading per i contenuti non critici

Verifica:

Dopo le modifiche:

curl -s https://iltuosito.com/page | grep "frase contenuto critico"

Se c’è, sei a posto.

Prospettiva sul monitoraggio.

Come capire se il lazy loading ti penalizza:

1. Controlla i dati Am I Cited

• Le pagine con contenuti lazy sono citate meno?
• Confronta pagine simili con implementazioni diverse

2. Test manuale

• Chiedi all’AI informazioni sulle sezioni caricate in lazy
• Conosce quelle informazioni?
• Se no, il contenuto potrebbe essere invisibile

3. Log server

• Come interagiscono i crawler AI col tuo sito?
• Ricevono risposte complete?

Cosa abbiamo osservato:

Siti con lazy loading significativo (soprattutto scroll infinito):

• 40-60% di contenuti in meno visibili alle AI
• Tasso di citazione più basso su quei contenuti
• Risolto dopo implementazione SSR/paginazione

Siti con solo lazy loading immagini:

• Nessun impatto significativo
• Il nativo loading=“lazy” funziona bene

Raccomandazione:

Fai audit, testa, monitora. Non dare per scontato che la tua implementazione vada bene. Verificala.

Piano d’azione chiaro ora.

Cosa manteniamo:

• Lazy loading nativo per immagini - nessun problema

Cosa cambiamo:

Sezioni con Intersection Observer:

• Spostiamo i contenuti critici nell’HTML iniziale
• Lazy loading solo per miglioramenti UI

Pagine con scroll infinito:

• Aggiungiamo la paginazione
• I primi 20 elementi nell’HTML
• Pulsante “Carica altri” per il resto

Approccio di test:

1. Curl delle pagine dopo le modifiche
2. Verifica che i contenuti critici siano nell’HTML
3. Monitoraggio visibilità AI con Am I Cited
4. Confronto tasso citazione prima/dopo

Il principio: Contenuti che vogliamo citati dalle AI = sempre nell’HTML Tutto il resto = può essere ottimizzato per la performance

Grazie per la chiarezza tecnica!