Il lazy loading ci permette di dire al browser che un contenuto deve essere caricato “in modo pigro”, cioè che può venire scaricato successivamente perché è di secondaria importanza.
Qui dovremmo parlare in dettaglio di come funziona la coda di rendering di un documento web, ma per questo argomento rimando all’utile guida di MDN: Populating the page: how browsers work che spiega più in dettaglio ciò che riguarda DNS, Handshake, Parsing, Rendering e via dicendo.
Ciò che ci serve sapere nella pratica, che migliora di molto i tempi di caricamento di una pagina ed è relativamente semplice da realizzare, è che tutte le immagini che vengono visualizzate solo scrollandobelow the fold, cioè sotto alla prima parte visibile della pagina, possono essere caricate in modo lazy. In realtà, se anche applicassimo questa strategia alle prime immagini visibili, non ci sarebbero particolari svantaggi, ma è davvero utile soprattutto per le immagini successive.
Per fare questo possiamo aggiungere l’attributo loading=”lazy” alle nostre immagini e agli iframe:
Definire loading lazy significa che l’immagine può essere caricata dopo il resto del contenuto, questo aumenta la velocità di caricamento
Indicare esplicitamente gli attributi width e height è molto utile perché così il browser sa già quanto spazio usare per renderizzare l’immagine nella pagina, e anche questo aumenta la velocità di caricamento
Il decoding async indica che l’immagine può essere decodificata dopo aver renderizzato il resto del contenuto, rendendo quindi il caricamento immediato più veloce
È quindi raccomandato inserirli tutti quando possibile.
WordPress e immagini lazy
Se usiamo WordPress, possiamo caricare una immagine tramite le funzioni PHP del CMS nel nostro tema in questo modo, secondo la documentazione di wp_get_attachment_image:
Come migliorare il caricamento di Javascript, CSS e Font
Per quanto riguarda invece il caricamento di Javascript, CSS e Font, siano essi in locale o in remoto, è consigliato usare preconnect, dns-prefetch, prefetch e preload, a seconda delle necessità. Ecco un esempio di caso d’uso reale:
Per semplificare molto, queste indicazioni che forniamo al browser sono utili perché aiutano a definire quali risorse vengono caricate nella pagina e in che modo. Il browser potrà così decidere quali risorse caricare prima perché sono più importanti, riducendo così il tempo di caricamento.
