Caricamento adattivo: miglioramento delle prestazioni web sui dispositivi lenti

Scopri come garantire a ogni utente la migliore esperienza possibile ottimizzando i tuoi siti in base a vincoli hardware e di rete specifici.

Le funzionalità dei dispositivi e le connessioni di rete variano molto. I siti che soddisfano gli utenti su dispositivi di fascia alta possono essere non utilizzabili su quelli di fascia bassa. I siti che si caricano senza problemi su reti veloci possono bloccarsi su quelle lente. La lentezza di un sito web per tutti gli utenti è dovuta al fatto che lo sviluppo di soluzioni adatte a tutti potrebbe non funzionare sempre.

Nel loro intervento al Chrome Dev Summit, Addy Osmani di Google e Nate Schloss di Facebook esplorano una soluzione a questo problema: un pattern per la pubblicazione di pagine che soddisfino meglio una serie di vincoli degli utenti. Si chiama caricamento adattivo.

Che cos'è il caricamento adattivo?

Il caricamento adattivo comporta la fornitura di esperienze diverse a utenti diversi in base ai vincoli della rete e dell'hardware, in particolare:

• Un'esperienza di base veloce per tutti gli utenti (inclusi i dispositivi di fascia bassa).

• Aggiunta graduale di funzionalità solo di fascia alta, se la rete e l'hardware di un utente lo consentono.

Se esegui l'ottimizzazione in base a vincoli hardware e di rete specifici, consenti a ogni utente di ottenere la migliore esperienza possibile per il proprio dispositivo. La personalizzazione dell'esperienza in base alle limitazioni degli utenti può includere:

• Pubblicazione di immagini e video di bassa qualità su reti lente.

• Riduci la frequenza dei fotogrammi delle animazioni sui dispositivi di fascia bassa.

• Evitare operazioni dal costo computazionale elevato su dispositivi di fascia bassa.

• Blocco degli script di terze parti sui dispositivi più lenti.

• Caricamento di codice JavaScript non critico per l'interattività solo su CPU veloci.

Supporto dei browser e come implementare il caricamento adattivo

Di seguito sono elencati gli indicatori che puoi utilizzare per il caricamento adattivo. Per ogni indicatore è incluso anche il supporto del browser:

Navigator.deviceMemory

La proprietà navigator.deviceMemory viene utilizzata per ridurre il consumo di memoria sui dispositivi di fascia bassa.

Navigator.hardwareConcurrency

La proprietà navigator.hardwareConcurrency è il numero di core della CPU. Viene utilizzato per limitare le costose esecuzioni di JavaScript e la logica che richiede molta CPU quando un dispositivo non è in grado di gestirlo bene.

NetworkInformation.effectiveType

La proprietà navigator.connection.effectiveType viene utilizzata per ottimizzare il trasferimento dei dati in modo da utilizzare meno larghezza di banda.

NetworkInformation.saveData

La proprietà navigator.connection.saveData viene utilizzata per sfruttare le preferenze di Risparmio dati dell'utente.

Esistono due modi in cui puoi decidere cosa mostrare agli utenti: il client e il server. Sul client sono presenti le API JavaScript indicate sopra. Sul server, puoi utilizzare i suggerimenti per i client per ottenere informazioni sulle funzionalità del dispositivo dell'utente e sulla rete a cui è connesso.

Caricamento adattivo in React

React Adaptive Loading Hooks & Utilities è una suite per l'ecosistema React che semplifica l'adattamento dei siti ai dispositivi di fascia bassa. Comprende:

• L'hook useNetworkStatus() per l'adattamento in base allo stato della rete (slow-2g, 2g, 3g o 4g).

• L'hook useSaveData() per l'adattamento in base alle preferenze dell'utente relative al risparmio dati.

• Il hook useHardwareConcurrency() per l'adattamento in base al numero di core del processore CPU logico sul dispositivo dell'utente.

• Il hook useMemoryStatus() per l'adattamento in base alla memoria del dispositivo (RAM) dell'utente.

Ogni hook accetta un argomento facoltativo per impostare il valore iniziale. Questa opzione è utile in due scenari: quando il browser dell'utente non supporta l' API pertinente e per il rendering lato server, in cui puoi utilizzare i dati del suggerimento client per impostare il valore iniziale sul server. Ad esempio, l'hook useNetworkStatus() può utilizzare il valore iniziale passato dall'indicazione del client per il rendering lato server e, quando viene eseguito sul client, può aggiornarsi se il tipo di rete effettivo cambia.

Gli hook e le utilità di caricamento adattivo di React vengono implementati utilizzando le API della piattaforma web (Informazioni sulla rete, Memoria del dispositivo e Contemporaneità hardware). Puoi utilizzare le stesse API per applicare i concetti di caricamento adattivo ad altri framework e librerie, come Angular, Vue e altri.

Caricamento adattivo in azione

Questa sezione illustra demo su come utilizzare il caricamento adattivo ed esempi reali di siti come Facebook, eBay, Tinder e altri.

La demo React Movie spiega come adattare la pubblicazione dei contenuti multimediali in base allo stato della rete. È un'applicazione per sfogliare i film che mostra locandine, riepiloghi e elenchi del cast. In base al tipo di connessione effettiva dell'utente, vengono pubblicati poster di alta qualità su connessioni rapide e di bassa qualità su connessioni lente.

Twitter dispone di una modalità Risparmio dati progettata per ridurre la quantità di dati utilizzati. In questa modalità, le immagini di anteprima vengono caricate in bassa risoluzione e le immagini di grandi dimensioni vengono caricate solo quando tocchi l'anteprima. Con questa opzione attivata, gli utenti di iOS e Android hanno risparmiato il 50% sull'utilizzo dei dati dalle immagini e gli utenti del web hanno risparmiato l'80%. Ecco una demo React che utilizza l'hook Save Data per replicare la cronologia di Twitter. Prova ad aprire il riquadro Rete di DevTools e osserva la differenza nella quantità di dati trasferiti mentre scorri quando la funzionalità Salva dati è disabilitata e quando è attivata.

eBay attiva e disattiva in modo condizionale funzionalità come lo zoom quando l'hardware o le condizioni della rete di un utente non le supportano. Puoi ottenere questo risultato tramite la suddivisione del codice e il caricamento del codice adattivi, un modo per caricare condizionatamente componenti più interattivi o eseguire operazioni più complesse dal punto di vista computazionale su dispositivi di fascia alta, senza inviare gli script agli utenti su dispositivi più lenti. Guarda il video a 16 minuti, dove Addy mostra questo pattern implementato con React.lazy() e Suspense su una pagina di prodotto eBay demo.

Tinder utilizza una serie di pattern di caricamento adattivi nella sua versione web e nell'app Lite per mantenere l'esperienza rapida per tutti. Se un utente utilizza una rete lenta o ha attivato il Risparmio dati, disattiva la riproduzione automatica dei video, limita il prefetching dei percorsi e limita il caricamento dell'immagine successiva nel carosello al caricamento delle immagini una alla volta mentre l'utente scorre. Dopo aver implementato queste ottimizzazioni, ha registrato miglioramenti significativi nel numero medio di scorrimenti in paesi come l'Indonesia.

Caricamento adattivo su Facebook

Un problema che si verifica durante il caricamento adattivo è il raggruppamento dei dispositivi in classi di fascia alta e bassa in base agli indicatori disponibili. Sui dispositivi mobili, la stringa user-agent (UA) fornisce il nome del dispositivo che consente a Facebook di utilizzare i dati disponibili pubblicamente sulle caratteristiche dei dispositivi per raggruppare i dispositivi mobili in classi. Tuttavia, sui computer l'unica informazione pertinente fornita da UA è il sistema operativo del dispositivo.

Per raggruppare i computer, Facebook registra i dati relativi al sistema operativo, ai core della CPU (da navigator.hardwareConcurrency) e alla memoria RAM (navigator.deviceMemory) nel monitoraggio del rendimento. Esaminando le relazioni tra diversi tipi di hardware e prestazioni, hanno classificato i dispositivi in cinque categorie. Con le classi hardware integrate nel monitoraggio del rendimento, ottengono un quadro più completo di come le persone utilizzano i prodotti Facebook a seconda del dispositivo e possono identificare più facilmente le regressioni.

Guarda il video a partire dal minuto 24, in cui Nate illustra l'approccio di Facebook al raggruppamento dei dispositivi e all'utilizzo del caricamento adattivo per le animazioni e il caricamento di JavaScript.

Scopri di più sul caricamento adattivo

Il caricamento adattivo è incentrato sulla progettazione dei siti tenendo presente l'inclusività. Crea un'esperienza di base ottimale per tutti, quindi attiva/disattiva o sovrapponi funzionalità che la rendono ancora più straordinaria se un utente dispone di memoria, CPU o una rete sufficientemente veloce. Per scoprire di più sul caricamento adattivo, dai un'occhiata alle demo disponibili e guarda il talk del Chrome Dev Summit: