Il caricamento differito consiste nell'attendere che il contenuto di una pagina Web venga visualizzato finché l'utente o il browser non ne hanno bisogno. Il caricamento differito può aiutare a velocizzare i tempi di caricamento delle pagine Web.
Dopo aver letto questo articolo sarai in grado di:
Argomenti correlati
Perché ridurre Javascript?
Cos'è l'ottimizzazione delle immagini?
Come rendere un sito Web mobile friendly
Cos'è JAMstack?
Velocizzare un sito Web
Abbonati a theNET, il riepilogo mensile di Cloudflare sulle tematiche più discusse in Internet.
Copia link dell'articolo
Il caricamento differito è una tecnica che consente di attendere il caricamento di determinate parti di una pagina Web, in particolare le immagini, finché non sono necessarie. Invece di caricare tutto in una volta, metodo noto come caricamento "eager" o immediato, il browser non richiede determinate risorse finché l'utente non interagisce in modo tale che tali risorse siano necessarie. Se implementato correttamente, il caricamento differito può accelerare i tempi di caricamento della pagina.
Questo tipo di caricamento è chiamato anche "pigro" perché incoraggia un browser Web a procrastinare. Quando si visualizza una pagina Web con caricamento differito, un browser sostanzialmente dice: "Aspetterò di caricare queste immagini finché non ne avrò realmente bisogno". Quando un browser visualizza una pagina Web che si carica rapidamente, assume l'atteggiamento opposto: "Mi occuperò di tutto subito!" Anche se nel mondo reale la procrastinazione può talvolta avere connotazioni negative, in questo caso risulta spesso più efficiente.
Ad esempio, un post di un blog potrebbe avere un'immagine nella parte superiore della pagina e un diagramma nella parte inferiore. Chi legge il post del blog potrebbe impiegare diversi minuti per arrivare in fondo al testo, quindi il browser attende di caricare il diagramma finché il lettore non scorre fino a quella sezione. In questo modo, all'inizio la pagina si carica più velocemente, perché il browser carica un'immagine anziché due.
In genere è la navigazione dell'utente a far scattare il caricamento differito delle immagini. In particolare, quando un utente scorre verso il basso una pagina, il browser viene informato di caricare le immagini che vi compaiono.
Quando una pagina web viene caricata, la parte che l'utente vede è chiamata "above the fold" (sopra la piega), mentre la parte che l'utente non vede ancora è chiamata "below the fold" (sotto la piega).* Le immagini sopra la piega devono essere caricate immediatamente, altrimenti l' esperienza utente ne risentirà. Ma l'utente non vede le immagini sotto la piega finché non scorre verso il basso. Pertanto, le immagini sotto la piega possono utilizzare il caricamento differito.
*Ma cos'è esattamente la "piega"? "Sopra la piega" e "Sotto la piega" hanno origine dai layout dei giornali. I giornali solitamente vengono piegati a metà orizzontalmente e la metà anteriore, l'area sopra la piega, è quella che il lettore vede per prima. Quando il termine viene applicato a un layout Web, la "piega" è la parte inferiore dello schermo dell'utente.
Un modo per implementare il caricamento differito consiste nell'utilizzare il caricamento dell'attributo HTML in un tag immagine. L'aggiunta di loading="lazy"
, come nell'esempio seguente, indica al browser di attendere per caricare l'immagine fino a quando l'utente non arriva, scorrendo, vicino ad essa:
<img src="example.com/image" alt="example image" width="100" height="100" loading="lazy">
Gli sviluppatori Web possono anche utilizzare framework di programmazione per implementare un caricamento differito più sofisticato. Angular è comunemente usato per questo scopo. Anche la libreria JavaScript React supporta il caricamento differito.
Cloudflare Mirage è un altro modo per implementare il caricamento differito. Oltre a ridimensionare automaticamente le immagini, Mirage funziona come lazy loader, caricando le immagini solo su richiesta. La funzionalità Cloudflare Mirage è disponibile per i clienti Cloudflare con i piani self-service Pro e Business, nonché per i clienti Enterprise.
media
aggiunta per indicare al browser quando caricarli (scopri di più).loading
descritto sopra per le immagini.Caricamento più rapido delle pagine: a parità di condizioni, le pagine Web con file di dimensioni più piccole si caricano più velocemente. Con il caricamento differito, una pagina Web inizialmente è più piccola delle sue dimensioni originali e quindi si carica più velocemente. Prestazioni Web veloci presentano numerosi vantaggi, tra cui migliore SEO, tassi di conversione più elevati e un'esperienza utente migliorata.
Nessun contenuto non necessario: supponiamo che una pagina carichi più immagini sotto la piega ma che l'utente esca dalla pagina prima di scorrere verso il basso. In tal caso, la larghezza di banda utilizzata per fornire le immagini e il tempo impiegato dal browser per richiederle e visualizzarle venivano sostanzialmente sprecati. Al contrario, il caricamento differito garantisce che queste immagini vengano caricate solo quando necessario. Ciò consente di risparmiare tempo e potenza di elaborazione e potrebbe far risparmiare denaro al proprietario del sito Web poiché viene utilizzata meno larghezza di banda.
Gli utenti potrebbero richiedere risorse più velocemente del previsto: ad esempio, se un utente scorre rapidamente una pagina, potrebbe dover attendere che le immagini vengano caricate. Ciò potrebbe avere un impatto negativo esperienza utente.
Ulteriori comunicazioni con il server: anziché richiedere tutto il contenuto della pagina in una volta, il browser potrebbe dover inviare più richieste di contenuto ai server del sito Web mentre l'utente interagisce con la pagina. L'uso di una rete per la distribuzione di contenuti (CDN) riduce al minimo questo potenziale inconveniente, perché le immagini vengono memorizzate nella cache dalla CDN e il browser non deve inviare una richiesta al server di origine per recuperarle.
Codice aggiuntivo da elaborare per il browser: se uno sviluppatore aggiunge diverse righe di JavaScript a una pagina web per indicare al browser come caricare in modo differito le risorse della pagina, ciò aumenta la quantità di codice che il browser deve caricare ed elaborare. Se eseguito in modo inefficiente, questo leggero tempo aggiuntivo di caricamento ed elaborazione potrebbe superare il tempo risparmiato tramite il caricamento differito.
Il caricamento rapido consiste nel caricare tutte le risorse della pagina Web contemporaneamente o il prima possibile. Alcune applicazioni che utilizzano il caricamento rapido potrebbero visualizzare una schermata "Caricamento in corso". Le applicazioni Web complesse e ricche di codice, come i giochi online, potrebbero preferire l'utilizzo del caricamento rapido.
Diversi fattori influiscono sulle prestazioni del sito Web, ma questi tre passaggi rappresentano un buon punto di partenza per rendere un sito web più veloce:
Scoprire altri modi per migliorare le prestazioni delle pagine Web: Suggerimenti per migliorare la velocità dei siti Web