Cos'è il caricamento lento?

Cos'è il caricamento lento?

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.

Come funziona il caricamento differito delle immagini?

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.

Come implementare il caricamento differito per le immagini

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.

Quali altre risorse della pagina possono utilizzare il caricamento differito?

• JavaScript: JavaScript è ciò che è noto come una risorsa di blocco del rendering, ovvero un browser non può visualizzare la pagina finché non viene caricato il codice JavaScript. Il codice JavaScript può essere suddiviso in moduli più piccoli che vengono caricati quando necessario, riducendo il tempo di caricamento delle pagine che devono eseguire JavaScript (scopri di più).
• CSS: anche CSS è una risorsa di blocco del rendering. Suddividere un file CSS in più file, che vengono caricati solo quando necessario, può aiutare a ridurre il tempo in cui un browser rimane bloccato nel rendering del resto della pagina. I file CSS non bloccanti dovrebbero avere un proprio collegamento con una proprietà media aggiunta per indicare al browser quando caricarli (scopri di più).
• iframe: gli iframe vengono utilizzati per incorporare contenuti da un'origine esterna in una pagina Web. I tag iframe possono includere lo stesso attributo HTML loading descritto sopra per le immagini.

Quali sono i vantaggi del caricamento differito?

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.

Quali sono gli svantaggi del caricamento differito?

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.

Cos'è il caricamento rapido?

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.

In quale altro modo gli sviluppatori possono velocizzare una pagina Web?

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:

1. Usare una CDN: quando il contenuto Web viene memorizzato nella cache di una CDN, la comunicazione con il server di origine viene ridotta al minimo, indipendentemente dal fatto che venga utilizzato o meno il caricamento differito. Inoltre, le CDN distribuiscono i contenuti agli utenti più rapidamente perché solitamente sono più vicine agli utenti rispetto al server di origine.
2. Ottimizzare le immagini: le immagini eccessivamente grandi avranno un impatto sulle prestazioni anche se viene utilizzato il caricamento differito. La riduzione delle dimensioni dei file immagine quando possibile aiuta a garantire che le immagini vengano caricate rapidamente.
3. Ridurre il codice: la minificazione è il processo di rimozione di tutti i caratteri non necessari dal codice CSS e JavaScript senza alterarne la funzionalità. Ciò include l'eliminazione di spazi, commenti e punti e virgola. La minificazione riduce le dimensioni del file di codice, aumentando la velocità di caricamento.

Scoprire altri modi per migliorare le prestazioni delle pagine Web: Suggerimenti per migliorare la velocità dei siti Web