Il lazy loading (letteralmente caricamento pigro o differito) è una tecnica di ottimizzazione delle prestazioni web che rinvia il caricamento delle risorse pesanti – in particolare immagini, video incorporati e iframe – fino al momento esatto in cui stanno per entrare nel campo visivo dello schermo dell’utente.
Senza questa ottimizzazione, quando apri una pagina web il browser cerca di scaricare contemporaneamente ogni singolo file multimediale presente nel codice, anche se si trova in fondo all’articolo. Con il lazy loading, il browser dà priorità assoluta ai testi e alle risorse visibili nella prima schermata (above the fold). Solo quando il visitatore scorre verso il basso, il sistema intercetta la posizione e richiede al server le immagini sottostanti pochi istanti prima che diventino visibili.
Se pubblichi su WordPress una guida approfondita o un confronto tra software che include venti screenshot ad alta risoluzione, scaricare tutti i file all’apertura iniziale consumerebbe molti dati e rallenterebbe drasticamente il caricamento, specialmente su rete mobile. Con il lazy loading nativo di WordPress, le venti immagini vengono caricate a blocchi graduali man mano che il lettore scorre il testo, garantendo una visualizzazione iniziale quasi istantanea.
L’errore più frequente è applicare il caricamento differito indistintamente a tutte le immagini, compresa la testata, il logo o l’immagine in evidenza visibile immediatamente all’apertura della pagina. Ritardare l’immagine principale danneggia gravemente la metrica LCP (Largest Contentful Paint) e fa percepire il sito come lento. Un altro sbaglio è installare vecchi plugin con script JavaScript pesanti quando i moderni browser supportano il lazy loading nativamente tramite il semplice attributo HTML loading=”lazy”.
Il lazy loading è uno strumento fondamentale per qualsiasi sito web moderno, dai blog editoriali agli e-commerce ricchi di fotografie di prodotti. Assicurati che sia attivo per tutti gli elementi multimediali situati sotto la piega, avendo cura di escludere l’immagine di copertina e gli elementi della testata per massimizzare la velocità reale e i punteggi nei test di performance.
Fonte: developer.mozilla.org