Lazy loading nativo delle immagini per WordPress

Un'innovazione spinta prima dal team Chromium (browser Chrome) e di recente sbarcata anche sulla versione 75 di Firefox, il lazy loading nativo per le immagini sul web sta per arrivare anche su WordPress.

Che cos'è il lazy loading?

Tradizionalmente le immagini sul web non hanno mai avuto un meccanismo nativo per dilazionare il caricamento delle risorse:

<img src="https://somedomain.com/img/cat.png" alt="An image of a cat">

L'impossibilità di avere un caricamento "pigro", ovvero rimandare il load delle risorse preclude un'efficace ottimizzazione, costringendo il browser a caricare tutte le immagini di una pagina, anche quelle non essenziali per il famoso "above the fold".

Questo problema è particolarmente evidente nei casi di pagine web con un elevato numero d'immagini. Il lazy loading nativo introduce un nuovo attributo loading per gli elementi img, che ora possono specificare come la risorsa deve essere caricata:

<img loading="lazy" src="https://somedomain.com/img/cat.png" alt="An image of a cat">

Nel caso in cui l'attributo loading viene valorizzato con lazy, il caricamento dell'immagine viene ritardato fino a quando l'utente non raggiunge la posizione in cui è specificata l'immagine nella pagina. L'altro possibile valore per loading è eager, che corrisponde al comportamento opposto.

Con il lazy loading è possibile quindi ritardare il caricamento delle immagini con evidenti vantaggi sulle performance dell'intera pagina.

Lazy loading nativo delle immagini per WordPress

Fino a ora il lazy loading su WordPress veniva ottenuto con l'installazione di plugin dedicati che consentivano di attivare il caricamento pigro, sfruttando JavaScript.

La novità più interessante per sviluppatori e utilizzatori di WordPress è finalmente l'arrivo del lazy loading, già integrato nel core di WordPress, che dovrebbe sbarcare a breve in uno dei prossimi aggiornamenti.

Quando il lazy loading nativo verrà finalmente incluso in WordPress, non saranno più necessari plugin aggiuntivi per ottenere l'effetto. In attesa dell'aggiornamento è suggerito comunque l'utilizzo di un plugin.

Quali browser supportano il lazy loading nativo?

Come per tutti gli aggiornamenti alla piattaforma web, variegata e piena di incompatibilità anche tra un browser e l'altro, anche il lazy loading nativo è soggetto a una regola: solo i browser più moderni supportano il nuovo attributo loading per il tag <img>.

C'è da dire che il market share per Internet Explorer ed Edge è fortunatamente in netta diminuzione, ed il fatto che Chrome e Firefox abbiano recepito il lazy loading nativo lascia pochi dubbi: usare il lazy loading, sempre.