Nel realizzare un sito web è sempre buona cosa tenere ben presente il problema dei tempi di caricamento delle pagine, sia perché lunghi tempi di attesa possono causare il precoce abbandono di una pagina da parte di chi la sta visitando, sia perché Google inserisce anche il tempo di caricamento tra i parametri su cui basare l’algoritmo per determinare il posizionamento di un sito web nelle sue SERP.
Diventa quindi abbastanza intuitivo capire che il problema del tempo di caricamento delle pagine di un sito diventerà tanto più grave quanto più pesante sarà la pagina da visitare, e il “lazy load” è una tecnica che interviene proprio per gestire in maniera furba questa situazione.
Cosa determina il peso di una pagina web?
Prima vedere nel dettaglio cosa sia il “lazy load” dobbiamo capire cosa incide sul peso di una pagina web. Il peso di una pagina web è determinato dalla somma del peso di tutti gli elementi che la pagina deve scaricare per poter visualizzare correttamente il suo contenuto (molti di questi oggetti sono visibili, altri no).
In primo luogo un browser deve leggere il codice HTML della pagina, il quale sarà composto da elementi “funzionali invisibili” come CSS e JS, ma soprattutto dagli elementi visibili che costituiscono i contenuti: i testi, le immagini, i video o anche gli iFrame embeddati (un’esempio di iFrame embettato è la mappa di Google che spesso vedete nella sezione “Dove siamo” di un sito web).
A seconda del tipo di pagina realizzata il peso totale può essere determinato principalmente dai files funzionali o dai contenuti, ma siccome i files funzionali sono più o meno sempre i medesimi su tutto il sito e il loro peso rimane invariato, sarà soprattutto un numero di immagini e video elevato a poter influire pesantemente sul carico di ogni singola e specifica pagina.
I files funzionali invisibili di cui vi ho parlato prima sono fondamentali e non possono essere omessi, ma una pagina web posiziona spesso molte delle sue immagini fuori dalla parte che possiamo inizialmente visualizzare con il nostro browser. Per quale motivo quindi caricare quei contenuti prima ancora che l’utente possa visualizzarli? Per non parlare poi del fatto che se non venisse eseguito uno scroll verso la parte bassa della pagina allora quei contenuti sarebbero addirittura stati caricati invano!
Che cos’è il “lazy loading” e come sfruttarlo
Il “lazy load” (letteralmente “caricamento pigro”, ma meglio tradurlo come “caricamento differito”) è una tecnica di ottimizzazione che scarica subito i contenuti visibili di una pagina web, ritardando però lo scaricamento di tutti quei contenuti che appariranno nella parte non visibile della pagina (chiamata dei più tecnici “below the fold”).
- il browser crea il DOM della pagina web senza scaricare le immagini e precaricare i video
- viene utilizzato JavaScript per capire quali immagini scaricare e quali video precaricare in base al contenuto subito visibile al caricamento della pagina (“above the fold”)
- download e rendering di video aggiuntivi vengono posticipati fino a quando non viene eseguito uno scrolling verso il basso della pagina, gestendo solo quanto e se necessari i contenuti fuori dello schermo, con il risultato finale che immagini e video vengono scaricati solo se realmente necessari.
Come riconoscere se un sito utilizza il “lazy load”
Se state navigando un sito web pieno di immagini e/o video e mentre scrollate verso il fondo vedete la pagina caricarsi progressivamente mano a mano che la visualizzate allora quasi sicuramente quei contenuti sono gestiti con una tecnica di “lazy loading” implementato proprio per alleggerire il carico sulla connessione e aumentare la velocità di caricamento dei contenuti.
“Lazy Load” in WordPress
Il repository del CMS WordPress contiene parecchi plugin che vi permetteranno di implementare la tecnica di “lazy load” sul vostro sito web, anche se, al momento attuale i due che sicuramente surclassano gli altri in quanto a rapidità di aggiornamento e per numero di installazioni sono:
- Smush, plugin free ma che esiste anche in versione a pagamento che offre una più efficiente compressione dei file, gestione di immagini multiple, gestione di immagini di grande dimensione, conversione di file PNG, JPEG, etc.
- A3 Lazy Load, completamente free e semplicissima da configurare
Un’altra strada, decisamente più lunga da percorrere e che richiede competenze tecniche sicuramente maggiori è quella di realizzarsi da soli il proprio plugin, ma per questo c’è questo ottimo articolo (in inglese) di Alex MacArthur che ci viene in aiuto
“Lazy load” e SEO
In alcuni casi sono state sollevate accuse al “lazy load” relativamente a come Google avesse penalizzato il SEO laddove utilizzata questa tecnica, ma questo è vero solo in caso di cattiva configurazione!
Per evitare problemi sarebbe opportuno quindi verificare che il contenuto venga correttamente caricato nel viewport: per accertarsi che il “lazy load” funzioni correttamente sarà sufficiente fare un test con lo script Puppeteer e analizzare lo screenshot assicurandosi che tutti i contenuti siano visibili per essere certi che anche Google Bot li potrà raggiungere.
Sappiate che Google ama il “lazy load” quindi prendete in considerazione di applicare questa tecnica se le pagine del vostro sito web incorporano molti video e immagini ad alta risoluzione.