Cos'è il lazy loading?

Il lazy loading è una tecnica che rimanda il caricamento di risorse non critiche fino a quando non sono effettivamente necessarie. Invece di scaricare ogni immagine, iframe e video su una pagina nel momento in cui l'HTML viene analizzato, il browser aspetta che quegli elementi stiano per scorrere in vista. Questo significa che il caricamento iniziale della pagina è più veloce e leggero, perché il browser concentra la sua larghezza di banda su ciò che il visitatore vede per primo.

Come funziona il lazy loading sotto il cofano

Esistono due approcci principali per implementare il lazy loading. Il primo è l'approccio nativo del browser, che si basa sull'attributo HTML loading="lazy". Quando il browser incontra un elemento con questo attributo, rimanda il recupero della risorsa fino a quando l'elemento raggiunge una distanza calcolata dal viewport. Ogni browser determina questa soglia in modo leggermente diverso, ma l'obiettivo è lo stesso: avviare il download poco prima che l'utente scorra fino ad esso, in modo che il contenuto appaia senza problemi.

Il secondo approccio utilizza JavaScript, in genere tramite l'API Intersection Observer. Un piccolo script osserva la pagina e rileva quando gli elementi placeholder entrano nel viewport. Quando ciò accade, lo script scambia la sorgente effettiva dell'immagine o l'URL dell'iframe e attiva il download. Prima dell'esistenza dell'API Intersection Observer, gli sviluppatori si affidavano agli ascoltatori di eventi di scorrimento, che erano meno efficienti e potevano causare jank su dispositivi più lenti.

Cosa può essere caricato in modo lazy

Il lazy loading si applica a vari tipi di risorse:

• Immagini: l'uso più comune. Ogni tag <img> sotto la piega è un buon candidato per il lazy loading.
• Iframe: video YouTube incorporati, Google Maps e altri widget di terze parti possono essere pesanti. Il lazy loading degli iframe impedisce loro di bloccare il rendering iniziale della pagina.
• Video: i video auto-ospitati con il tag <video> possono utilizzare preload="none" o lazy loading basato su JavaScript per ritardare il download.
• Immagini di sfondo: le immagini di sfondo CSS caricate tramite background-image non possono utilizzare l'attributo nativo loading, quindi richiedono soluzioni JavaScript o un'attenta strutturazione CSS.

Lazy loading nativo del browser vs librerie JavaScript

Il lazy loading nativo è l'opzione più semplice. Aggiungi loading="lazy" al tuo tag <img> o <iframe> e il browser gestisce tutto. Nessun JavaScript necessario, nessuna dimensione di file aggiuntiva, nessuna configurazione. Funziona in tutti i browser moderni, inclusi Chrome, Firefox, Safari ed Edge.

<img src="foto.jpg" loading="lazy" width="800" height="600" alt="Descrizione" />
<iframe src="https://www.youtube.com/embed/xyz" loading="lazy"></iframe>

Le librerie JavaScript come lazysizes, lozad.js o vanilla-lazyload offrono più controllo. Supportano le immagini di sfondo, possono aggiungere animazioni fade-in e ti permettono di personalizzare la soglia di caricamento. Tuttavia, aggiungono JavaScript extra alla tua pagina e richiedono un'inizializzazione corretta. Per la maggior parte dei siti WordPress, il lazy loading nativo è la scelta migliore per la sua semplicità e per l'overhead di prestazioni pari a zero.

WordPress e lazy loading nativo dalla versione 5.5

WordPress aggiunge automaticamente loading="lazy" alle immagini dalla versione 5.5, rilasciata in agosto 2020. Questo si applica alle immagini nel contenuto dei post, alle immagini in evidenza e ad altre immagini emesse tramite le funzioni core. WordPress aggiunge anche loading="lazy" agli iframe incorporati nel contenuto. Dalla versione 5.9 di WordPress, la prima immagine nel contenuto (quella più probabile sopra la piega) viene automaticamente esclusa dal lazy loading per evitare di danneggiare i punteggi LCP.

Impatto sui Core Web Vitals e considerazioni sull'LCP

Il lazy loading ha una relazione diretta con i Core Web Vitals, in particolare il Largest Contentful Paint (LCP). Eseguito correttamente, il lazy loading migliora l'LCP perché il browser può dare priorità al download dell'elemento visibile più grande senza competere per la larghezza di banda con le immagini sotto la piega. Tuttavia, se carichi accidentalmente in modo lazy l'elemento LCP stesso (spesso l'immagine hero o un grande banner sopra la piega), peggiori l'LCP. Il browser aspetta a recuperare quell'immagine fino a quando calcola la prossimità del viewport, aggiungendo un ritardo non necessario.

Per le immagini che non vengono caricate in modo lazy ma sono critiche, considera di aggiungere fetchpriority="high" per indicare al browser di dare priorità a quel download:

<img src="hero.jpg" fetchpriority="high" width="1200" height="600" alt="Banner hero" />

Quando NON fare lazy loading

Non ogni immagine dovrebbe essere caricata in modo lazy. Ci sono eccezioni chiare:

• Immagini hero: il banner principale o l'immagine in evidenza che appare immediatamente al caricamento della pagina non deve mai essere caricato in modo lazy.
• Immagini del logo e dell'identità del sito: di solito si trovano nell'header e sono visibili senza scorrere.
• Prima immagine di contenuto visibile: qualsiasi immagine che appare entro il viewport iniziale dovrebbe essere caricata con priorità.
• Candidati LCP: se un'immagine è l'elemento visibile più grande quando la pagina viene renderizzata per la prima volta, il lazy loading danneggerà direttamente il tuo punteggio LCP.

Per queste immagini, usa loading="eager" (il comportamento predefinito) o aggiungi esplicitamente fetchpriority="high" in modo che il browser le scarichi il più rapidamente possibile.

Plugin WordPress per il lazy loading

Sebbene WordPress gestisca nativamente il lazy loading di base, diversi plugin forniscono funzionalità estese:

• WP Rocket: include il lazy loading per immagini, iframe e video come parte della sua più ampia suite di ottimizzazione delle prestazioni. Può anche sostituire gli embed di video YouTube con una miniatura leggera che carica il player effettivo solo al clic.
• Autoptimize: principalmente un plugin di ottimizzazione CSS/JS, ma include il lazy loading per le immagini utilizzando l'attributo nativo o un fallback JavaScript.
• a3 Lazy Load: un plugin dedicato al lazy loading con controllo granulare su quali elementi vengono caricati in modo lazy, incluso il supporto per immagini di sfondo e selettori personalizzati.
• Perfmatters: un plugin di prestazioni leggero che include il lazy loading insieme ad altre ottimizzazioni come la gestione degli script e la pulizia del database.

Lazy loading e SEO

Il crawler di Google (Googlebot) renderizza JavaScript, quindi può vedere le immagini caricate in modo lazy purché vengano effettivamente caricate durante il rendering. Tuttavia, affidarsi al lazy loading basato su JavaScript significa che Googlebot deve eseguire i tuoi script per scoprire quelle immagini. Il lazy loading nativo con loading="lazy" è più sicuro per la SEO perché l'attributo effettivo src è presente nell'HTML fin dall'inizio. I motori di ricerca possono trovare l'URL dell'immagine senza eseguire JavaScript. Assicurati sempre che le tue immagini abbiano attributi alt appropriati, indipendentemente dal metodo di lazy loading che scegli.

Cosa controlla InspectWP

InspectWP analizza le immagini sulla tua pagina e riporta se l'attributo loading="lazy" è presente su ciascuna immagine. Questo ti aiuta a verificare che il lazy loading sia implementato correttamente sul tuo sito WordPress e a identificare eventuali immagini che mancano dell'attributo o che vengono caricate in modo lazy in modo errato quando dovrebbero essere caricate con priorità.