Lazy loading

Il lazy loading è una tecnica web che rinvia il caricamento delle risorse fuori schermo finché non stanno per entrare nel viewport. Si usa per immagini, iframe, video e intere sezioni di pagina.

I browser lo supportano in modo nativo tramite l'attributo loading degli elementi img e iframe, impostato su lazy, definito nello HTML Living Standard. I siti lo implementano anche in JavaScript, di solito con l'API IntersectionObserver, che segnala quando un elemento si avvicina all'area visibile.

Finché una risorsa non è caricata, la pagina mostra un segnaposto: un riquadro vuoto, un colore pieno, un'anteprima sfocata o uno spinner. Il lazy loading riduce il peso iniziale della pagina e accelera la prima visualizzazione.

Come funziona il lazy loading

1. La pagina si carica con segnaposti per le immagini fuori schermo.
2. Il browser o uno script osserva la posizione di ogni segnaposto.
3. Quando l'utente scorre vicino a un segnaposto, viene richiesto il file reale.
4. L'immagine sostituisce il segnaposto quando arriva.

Lo scorrimento infinito usa la stessa idea per i contenuti: nuovi elementi vengono caricati quando l'utente raggiunge la fine della lista.

Lazy loading e screenshot

Una cattura a pagina intera che renderizza subito tutta la pagina non scorre, quindi i contenuti lazy sotto la piega potrebbero non essere mai richiesti. Il risultato mostra riquadri vuoti o anteprime sfocate. Una cattura del viewport è meno influenzata, perché mostra solo ciò che è visibile.

Come rilevare i contenuti caricati in modo differito

• Cerca riquadri vuoti o grigi nella parte bassa di una cattura a pagina intera.
• Scorri la pagina a mano e osserva le immagini che compaiono gradualmente.
• Ispeziona gli elementi immagine in DevTools del browser per l'attributo loading o le sorgenti dei segnaposto.
• Confronta una cattura rapida con una eseguita dopo un ritardo.

In Temposhot Website Capture, scegli Network idle come impostazione di Wait oppure aggiungi un ritardo da 0 a 60 secondi. La estensione Temposhot Full Page Screenshot scorre la pagina attiva durante la cattura, il che attiva il caricamento basato sullo scorrimento.

Errori comuni

• Catturare all'evento load e supporre che la pagina sia completa.
• Impostare un ritardo lungo senza scorrere, il che non aiuta le immagini attivate dallo scorrimento.
• Catturare come "pagina intera" le pagine con scorrimento infinito, che non finiscono mai in modo pulito.
• Ignorare le immagini segnaposto sfocate, che a dimensioni piccole sembrano caricate.

Ripeti gli stessi screenshot più volte?

Imposta la condizione di attesa una volta e riutilizzala per ogni URL in automazione degli screenshot di siti web.

Domande frequenti

Un ritardo più lungo risolve le immagini lazy?

Aiuta quando i contenuti si caricano con un timer o dopo un'attività di rete. I contenuti attivati dallo scorrimento richiedono lo scorrimento.

Devo evitare il lazy loading sul mio sito?

No. Migliora la velocità. Tieni caricate subito le immagini sopra la piega, così compaiono immediatamente.

Fonti

• Lazy loading (Wikipedia)
• HTML Living Standard: URLs and fetching

Risorse correlate

• Opzioni di Website Capture: impostazioni di attesa e ritardo.
• Screenshot a pagina intera: cattura dell'intera altezza della pagina.