Lazy Loading
Quando si tratta di utilizzare piattaforme online come i siti web, velocità di caricamento e ottimizzazione diventano essenziali, con utenti che richiedono sempre più velocità e reattività.
Per questo motivo, il pattern di design delle pagine noto come lazy loading sta acquisendo sempre più importanza. Ma cos'è esattamente il lazy loading (caricamento differito)?
È quello che affronteremo di seguito.
Cos'è il Lazy Loading?
Nello specifico, il lazy loading è una tecnica, un pattern di design di programmazione applicato ai siti web, in cui gli elementi e le risorse non vengono caricati interamente, ma piuttosto eseguiti al volo o on-demand in base all'utilizzo dell'utente, producendo un "caricamento differito" dei contenuti.
In questo modo, le risorse vengono ottimizzate e contenuti come testo, video, immagini e altro materiale si caricano solo quando richiesti, migliorando velocità, utilizzo della memoria ed elaborazione, reattività e tempi di caricamento. Questo si contrappone al caricamento completo, in cui un sito o una pagina viene caricata completamente, anche se l'utente non utilizza ogni elemento.
Vantaggi generali del lazy loading
Poiché lo scopo principale del lazy loading è ottimizzare il caricamento degli elementi solo quando vengono utilizzati, ci sono molteplici vantaggi che possono essere riassunti come:
- Velocità nel mostrare gli elementi principali di un sito.
- Miglioramento significativo della user experience del sito (UX).
- Miglioramento delle performance sui dispositivi mobili, specialmente quando hanno risorse di connessione di rete limitate; avere il Lazy Loading attivo permetterà la navigazione su pagine che, in tali condizioni di scarsa copertura, sarebbero altrimenti impraticabili.
- Ottimizzazione complessiva e totale delle risorse come CPU, RAM e batteria sui dispositivi mobili.
- L'aumento del tempo di permanenza sulle nostre pagine, non avendo problemi di caricamento, si traduce indirettamente in miglioramenti di posizionamento.
- Diminuzione del bounce rate.
Allo stesso modo, l'approccio di programmazione lazy loading ha vantaggi e novità da un punto di vista più tecnico, come:
- Il lazy loading è completamente compatibile con framework JS come React e Angular, oltre a piattaforme CMS come WordPress. In effetti, è stato recentemente comunicato che il lazy loading per le immagini sarà incluso di default in WordPress versione 5.5.
- Grazie all'API IntersectionObserver, non nasconde le immagini ai motori di ricerca.
- Supporto per molteplici tipi di contenuto come immagini e risorse di classe responsive.
- Permette l'indicizzazione delle immagini del sito, il che è vitale per la SEO.
- È una risorsa SEO Friendly al 100%, dato che migliora direttamente e indirettamente molti punti chiave nella SEO.
Come implementare il lazy loading in WordPress?
Se abbiamo il nostro sito su WordPress, dovremmo sapere che abbiamo un grande vantaggio dato che ci sono molte soluzioni per implementare il lazy loading sulle nostre pagine in modo che si carichino molto più velocemente. Questo screenshot qui sotto mostra alcune delle possibili soluzioni che abbiamo nel repository di plugin:
Vista dei plugin WordPress più rilevanti per implementare il lazy loading.
Per effettuare questa implementazione, abbiamo diverse opzioni:
- Scegliere un plugin specifico di lazy loading come "Lazy loader", "a3 lazy load"...
- Scegliere un plugin di ottimizzazione web come "WP Rocket", che ha già questa opzione inclusa di default insieme ad altri miglioramenti.
Aspetti SEO relativi al Lazy Loading
Conosciamo già la missione principale del caricamento differito e i suoi vantaggi chiave, e come influisce sul miglioramento delle performance della nostra pagina, della nostra UX e della SEO.
Ora, deve essere fatto un uso intelligente del caricamento differito per sfruttarlo al massimo, dato che se usato impropriamente potrebbe causare l'effetto opposto.
Per esempio, il lazy loading fa uso della cache per migliorare la velocità, quindi se troppi contenuti vengono memorizzati lì, possono verificarsi rallentamenti o errori se non implementato correttamente, persino impedendo a Google di indicizzare pagine ed elementi, il che può avere un grave effetto sul ranking del sito. Alcuni consigli sono:
- Ottimizzare la cache e farne un uso intelligente.
- Usare Google Search Console per verificare il contenuto che Google scansiona sul sito.
- Aggiungere testo ALT per rendere ogni immagine indicizzabile da Google.
- Usare sempre l'API IntersectionObserver.
- Aggiungere l'attributo loading a iframe o contenuti incorporati da altre pagine o fonti, grazie alla funzione Blink LazyLoad del browser Chrome. Si applica a immagini, foto, video, testo e altri contenuti.
Lazy loading e UX
Quando si tratta di un sito web, sia l'ottimizzazione tecnica che generale per offrire una buona user experience (UX) è essenziale, rispetto a tempi di caricamento, reattività, utilizzo delle risorse e comportamento generale. Se un sito non è molto reattivo, il suo bounce rate sarà alto, e se offre una scarsa user experience, ciò influenzerà il suo traffico, la sua visibilità e persino la SEO.
Con il caricamento differito, l'obiettivo è migliorare drasticamente l'UX di un sito in un solo passo, caricandone i contenuti progressivamente e quando l'utente ne ha bisogno mentre scorre la pagina, che si tratti di immagini o testo, il che ottimizza l'uso delle risorse rispetto al caricamento dell'intera piattaforma, mostrando probabilmente elementi che non sono importanti per l'utente.
Lazy loading nativo (HTML) in Chrome
Dimostrando l'importanza che Google dà all'UX, dal 2020 e a partire dalla versione 75 del suo browser Chrome, è possibile aggiungere il lazy loading nativo ai tag delle pagine HTML e ai loro contenuti multimediali come foto, video, tra gli altri.
In questo modo, aggiungendo automaticamente l'attributo HTML lazy loading, il browser Chrome capisce che il contenuto della pagina si caricherà in base alla navigazione dell'utente e non tutto in una volta, migliorando velocità e reattività. Per usarlo, l'attributo loading con valore lazy viene aggiunto a ciascun tag delle risorse visive e multimediali, oltre che agli iframe:
<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe> Questa risorsa può essere usata sia nelle immagini, che rappresentano una grande parte delle informazioni che il browser deve scaricare, sia negli iframe; ricorda che li usiamo per incorporare risorse esterne nel nostro sito.
È importante evidenziare l'uso negli iframe, dato che questi possono rappresentare punti critici di caricamento sul nostro sito.
Tra gli aspetti negativi, il lazy loading nativo è compatibile solo con Chrome, anche se il suo uso può essere implementato in altri browser tramite librerie compatibili, nel caso non ci sia supporto come accade in Mozilla Firefox.
Usi del Lazy loading
Come abbiamo già commentato, il lazy loading si concentra sul ritardare il caricamento degli elementi su una pagina per ottimizzarne la risposta. In questo senso, l'uso dato allo strumento si concentra su tutte le risorse visive, anche se l'enfasi è posta su immagini, video e iframe che possono includere documenti e altri file, tutto attraverso la modifica dei tag e l'inclusione dell'attributo loading con valore lazy, ottimizzando la velocità generale del sito anche se ha elementi pesanti o grandi contenuti multimediali.
Hai domande sul lazy loading o vuoi implementarlo nel tuo progetto? Siamo a tua disposizione!
Documentazione e Riferimenti:
Autore: David Kaufmann
Ho passato gli ultimi oltre 10 anni completamente ossessionato dal SEO — e onestamente, non vorrei fosse altrimenti.
La mia carriera ha fatto un salto di qualità quando ho lavorato come Senior SEO Specialist per Chess.com — uno dei 100 siti più visitati dell'intero Internet. Operare a quella scala, su milioni di pagine, decine di lingue e in una delle SERPs più competitive in assoluto, mi ha insegnato cose che nessun corso o certificazione avrebbe mai potuto. Quell'esperienza ha cambiato la mia prospettiva su come dovrebbe essere davvero un grande SEO — ed è diventata la base di tutto ciò che ho costruito da allora.
Da quell'esperienza è nata SEO Alive — un'agenzia per brand che fanno sul serio con la crescita organica. Non siamo qui per vendere dashboards e report mensili. Siamo qui per costruire strategie che spostino davvero l'ago della bilancia, combinando il meglio del SEO classico con l'entusiasmante nuovo mondo della Generative Engine Optimization (GEO) — facendo in modo che il tuo brand appaia non solo nei link blu di Google, ma anche all'interno delle risposte generate dall'AI che ChatGPT, Perplexity e Google AI Overviews consegnano ogni giorno a milioni di persone.
E poiché non riuscivo a trovare uno strumento che gestisse correttamente entrambi questi mondi, me ne sono costruito uno — SEOcrawl, una piattaforma enterprise di SEO intelligence che unisce rankings, audit tecnici, monitoraggio dei backlinks, salute del crawl e tracciamento della visibilità del brand nell'AI, tutto in un unico posto. È la piattaforma che ho sempre desiderato esistesse.
Scopri altri contenuti di questo autore
