pigro Caricamento

Il lazy loading posticipa il caricamento delle risorse fino a quando non sono effettivamente necessarie, solitamente ritardando il caricamento di immagini, iframe e componenti fino a quando non si trovano in prossimità dell'area visibile dello schermo. L'obiettivo è ridurre il carico di lavoro necessario per il rendering della visualizzazione iniziale, in modo che il contenuto che un visitatore vede immediatamente non competa per la larghezza di banda e la potenza di elaborazione con contenuti che si trovano molto al di sotto della parte visibile della pagina e che potrebbero non essere mai visualizzati.

La tecnica è diventata semplice da applicare per immagini e iframe, dove un attributo nativo del browser se ne occupa senza alcun JavaScript, con il browser che decide quando iniziare il caricamento in base alla vicinanza alla viewport e alle condizioni di connessione. Per componenti e route, la suddivisione del codice ottiene un risultato equivalente posticipando i bundle JavaScript fino a quando una route non viene visitata o una funzionalità non viene utilizzata, il che può ridurre sostanzialmente la quantità di script che deve essere scaricata ed eseguita prima che una pagina diventi interattiva.

L'errore più comune e dannoso è applicarlo indiscriminatamente, anche ai contenuti nella viewport iniziale. Il lazy loading dell'immagine principale ritarda proprio l'elemento che determina la dimensione di visualizzazione del contenuto più grande e produce un risultato peggiore rispetto al non applicare affatto la tecnica. Il modello corretto è caricare in modo eager i contenuti above-the-fold, idealmente con un suggerimento di priorità, e posticipare solo ciò che si trova effettivamente al di sotto della parte visibile della pagina. L'applicazione indiscriminata tramite un plugin o un'impostazione globale è il modo in cui i siti web finiscono per avere metriche di caricamento peggiori dopo aver implementato un'ottimizzazione delle prestazioni.

La stabilità del layout è il secondo aspetto da considerare. Le immagini caricate in differita senza spazio riservato causano lo spostamento del contenuto durante il caricamento, trasformando un miglioramento della velocità di caricamento in un problema di instabilità visiva. Dimensioni o proporzioni esplicite per ogni elemento caricato in differita non sono opzionali, e un segnaposto che occupa lo spazio corretto è ciò che rende il caricamento differito invisibile all'utente, anziché semplicemente più veloce.

Esistono casi in cui questa tecnica è inappropriata. I contenuti che devono essere presenti affinché i motori di ricerca li indicizzino in modo affidabile, le pagine stampabili in cui tutto deve essere visualizzato correttamente e le interfacce in cui gli utenti scorrono velocemente lunghi elenchi risentono negativamente di un differimento aggressivo. In quest'ultimo caso, le immagini che si caricano solo quando si avvicinano alla finestra di visualizzazione arrivano troppo tardi per uno scorrimento veloce, producendo una serie di segnaposto vuoti, e si rende necessario un margine di caricamento maggiore o una strategia diversa.

Un aspetto correlato da considerare è cosa succede quando il differimento fallisce. Se le immagini vengono caricate solo tramite JavaScript che non viene eseguito, a causa di un errore, di uno script bloccato o di un browser non supportato, la pagina viene visualizzata senza le immagini e non è previsto alcun meccanismo di fallback. Il differimento nativo del browser evita completamente questo problema, ed è uno dei motivi per cui dovrebbe essere preferito alle implementazioni basate su script laddove sia sufficiente. Laddove un approccio basato su script sia effettivamente necessario, fornire un meccanismo di fallback che carichi il contenuto quando il meccanismo non è disponibile richiede un piccolo sforzo che previene una categoria di errori invisibile nei normali test e che interessa una piccola ma reale percentuale di visitatori.

Applicato con giudizio, il differimento è tra le tecniche più efficaci disponibili per le pagine con contenuti sostanziali al di sotto della piega, che descrivono la maggior parte degli elenchi di prodotti, degli articoli e delle lunghe pagine di marketing. In pratica è una componente di una strategia di caricamento più ampia affrontata in prestazioni web lavoro, insieme al formato e alle dimensioni dell'immagine, alla prioritizzazione delle risorse e alla struttura del pacchetto, e il suo impatto è maggiore in e-commerce contesti in cui le pagine di categoria contengono decine di immagini e i visitatori da dispositivi mobili si fanno carico dell'intero costo del caricamento simultaneo di tutte le immagini.