Lazy loading

Il lazy loading, o caricamento differito, rimanda il download di immagini, video o sezioni di contenuto finché non stanno per diventare visibili nell'area di visualizzazione, migliorando le prestazioni iniziali della pagina.

Related workflow terms: Screenshot di una pagina intera.

Come funziona il lazy loading

Senza lazy loading, il browser scarica ogni immagine, video e risorsa non appena analizza l'HTML, anche quando si trovano molto più in basso nella pagina e potrebbero non essere mai visti. In una pagina lunga con decine di immagini, questo spreca banda e ritarda il momento in cui la pagina diventa interattiva.

Il lazy loading modifica questo comportamento e rimanda il download finché l'elemento non si avvicina all'area visibile. Le due implementazioni più comuni sono:

Il lazy loading nativo usa l'attributo loading="lazy" sugli elementi <img> e <iframe>. Il browser gestisce internamente i tempi e avvia il download quando calcola che l'elemento si sta avvicinando all'area visibile. Non serve JavaScript.

L'API Intersection Observer offre un controllo programmatico. Un observer JavaScript sorveglia gli elementi e richiama una funzione quando entrano o si avvicinano all'area visibile. La funzione assegna quindi il vero attributo src, sostituendo un segnaposto o un attributo data, e avvia il download. Questo approccio permette di definire soglie personalizzate, attivare animazioni e controllare con maggiore precisione l'avvio del caricamento.

Entrambi gli approcci perseguono lo stesso obiettivo: la pagina si carica più rapidamente perché recupera subito soltanto il contenuto visibile senza scorrere, mentre le altre risorse vengono scaricate su richiesta durante lo scorrimento.

Lazy loading e screenshot

Il lazy loading crea un problema specifico nell'acquisizione degli screenshot. Quando uno strumento richiede un'immagine a pagina intera, in genere esegue il rendering con l'area visibile posizionata in alto e acquisisce in un solo passaggio l'intera altezza del documento. Gli elementi differiti più in basso nella pagina non sono ancora stati attivati e compaiono come contenitori vuoti, segnaposto o miniature a bassa risoluzione.

La soluzione è scorrere la pagina via codice prima dell'acquisizione. Uno script per browser headless può procedere dall'alto verso il basso a intervalli, fermandosi a ogni passaggio per consentire l'esecuzione delle callback di Intersection Observer e il download delle immagini. Raggiunto il fondo, torna all'inizio e acquisisce la pagina ormai caricata per intero.

Alcuni strumenti gestiscono il processo automaticamente: rilevano gli elementi differiti e scorrono la pagina durante la procedura di acquisizione. Il risultato è uno screenshot a pagina intera pulito, senza interventi manuali.

Come rilevare i contenuti caricati in modo differito

Capire se una pagina usa il lazy loading aiuta a scegliere la procedura di acquisizione. Cerca questi indizi:

• Attributi loading="lazy" nei tag <img> e <iframe> — è l'implementazione nativa del browser.
• Attributi data-src o data-lazy — uno schema comune nel quale l'URL reale dell'immagine viene conservato in un attributo data e trasferito in src da JavaScript quando l'elemento entra nell'area visibile.
• Immagini segnaposto — immagini piccole, sfocate o a tinta unita che vengono sostituite con la versione completa durante lo scorrimento.
• Uso di Intersection Observer — controlla il JavaScript della pagina per individuare istanze di IntersectionObserver che osservano immagini o altri contenuti.
• Componenti specifici dei framework — lazy() di React, il componente Image di Next.js e strumenti analoghi implementano il caricamento differito per impostazione predefinita.

Errori comuni

• Non scorrere prima dell'acquisizione. È il problema più frequente negli screenshot delle pagine con lazy loading. Se lo strumento non percorre prima l'intera pagina, dal risultato mancheranno le immagini più in basso.
• Impostare una soglia troppo alta. Se il caricamento si attiva solo quando l'elemento è già visibile, l'utente vede per un istante uno spazio vuoto. Fai partire il download poco prima che l'elemento entri nell'area visibile.
• Applicare il lazy loading ai contenuti visibili senza scorrere. Le immagini e i contenuti mostrati al primo caricamento non devono essere differiti: altrimenti ritardi ciò che l'utente vede per primo e peggiori il Largest Contentful Paint. Rimanda soltanto le risorse più in basso nella pagina.
• Dimenticare un'alternativa per gli ambienti senza JavaScript. Se il lazy loading dipende interamente da JavaScript, utenti e crawler che lo disattivano non vedranno alcuna immagine. Usa un fallback <noscript> o l'attributo nativo loading="lazy" come base.