Scopri come garantire a ogni utente la migliore esperienza possibile ottimizzando i tuoi siti per vincoli specifici di hardware e rete.
Le funzionalità del dispositivo e le connessioni di rete variano molto. I siti apprezzati dagli utenti che utilizzano dispositivi di fascia alta possono essere inutilizzabili su quelli di fascia bassa. I siti che si caricano senza problemi su reti veloci possono bloccarsi su quelle lente. Qualsiasi utente può avere un sito web lento, ecco perché lo sviluppo di soluzioni "universali" potrebbe non funzionare sempre.
Nel loro discorso sul Chrome Dev Summit, Addy Osmani di Google e Nate Schloss di Facebook esplorano una soluzione a questo problema, un modello per pubblicare pagine che soddisfino meglio una serie di vincoli degli utenti. Lo viene chiamato caricamento adattivo.
Che cos'è il caricamento adattivo?
Il caricamento adattivo comporta l'offerta 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 progressivamente di funzionalità solo di fascia alta, nel caso in cui la rete e l'hardware di un utente siano in grado di gestirle.
Ottimizzando per vincoli hardware e di rete specifici consenti a ogni utente di usufruire della migliore esperienza possibile sul proprio dispositivo. Personalizzare l'esperienza in base ai vincoli degli utenti può includere:
Pubblicazione di immagini e video di bassa qualità su reti lente.
Limitazione della frequenza fotogrammi delle animazioni sui dispositivi di fascia bassa.
Evitare operazioni costose dal punto di vista dell'elaborazione su dispositivi di fascia bassa.
Blocco degli script di terze parti su dispositivi più lenti.
Caricamento di JavaScript non critico per l'interattività solo su CPU veloci.
Supporto del 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 dei 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 indica il numero dei core della CPU. Viene utilizzato per limitare l'esecuzione costosa di JavaScript e ridurre la logica che richiede un uso intensivo della CPU quando un dispositivo non può gestirlo bene.
NetworkInformation.effectiveType
La proprietà navigator.connection.effectiveType viene utilizzata per perfezionare il trasferimento di dati in modo da utilizzare meno larghezza di banda.
NetworkInformation.saveData
La proprietà navigator.connection.saveData viene utilizzata per utilizzare le preferenze Risparmio dati dell'utente.
Puoi decidere cosa mostrare agli utenti in due modi: il client e il server. Sul client sono presenti le API JavaScript indicate sopra. Sul server puoi utilizzare i suggerimenti client per ottenere informazioni sulle funzionalità del dispositivo dell'utente e sulla rete a cui è connesso.
Caricamento adattivo in React
React Adaptive Loads & Utilities è una suite per l'ecosistema React che semplifica l'adattamento dei siti ai dispositivi di fascia inferiore. tra cui:
L'hook
useNetworkStatus()per l'adattamento in base allo stato della rete (slow-2g,2g,3go4g).L'hook
useSaveData()per l'adattamento in base alle preferenze di risparmio dati dell'utente.L'hook
useHardwareConcurrency()per l'adattamento in base al numero di core del processore della CPU logica sul dispositivo dell'utente.L'hook
useMemoryStatus()per l'adattamento in base alla memoria (RAM) del dispositivo dell'utente.
Ogni hook accetta un argomento facoltativo per l'impostazione del 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 trasmesso dal suggerimento del client per il rendering lato server e, una volta eseguito sul client, si aggiorna automaticamente se cambia il tipo effettivo della rete.
Gli hook e le utilità di caricamento adattivo di React sono implementati utilizzando le API delle piattaforme 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 mostra demo di come utilizzare il caricamento adattivo ed esempi reali da siti come Facebook, eBay, Tinder e altri.
La demo React Movie mostra come adattare la pubblicazione dei contenuti multimediali in base allo stato della rete. Si tratta di un'applicazione per sfogliare i film che mostra poster, riepiloghi ed elenchi dei cast. In base al tipo di connessione efficace dell'utente, pubblica poster di alta qualità su connessioni rapide e poster di bassa qualità su quelle lente.
Twitter ha una modalità Risparmio dati progettata per ridurre la quantità di dati utilizzati. In questa modalità, le immagini di anteprima vengono caricate a bassa risoluzione, mentre quelle di grandi dimensioni vengono caricate solo quando tocchi l'anteprima. Quando questa opzione è attivata, gli utenti su iOS e Android hanno risparmiato il 50% sull'utilizzo dei dati dalle immagini, mentre gli utenti sul web hanno risparmiato l'80%. Ecco una demo di React che utilizza l'hook Salva dati per replicare la sequenza temporale di Twitter. Prova ad aprire il riquadro Rete di DevTools e osserva la differenza tra la quantità di dati trasferiti mentre scorri il dito mentre il salvataggio dei dati è disattivato rispetto a quando è attivato.
eBay attiva e disattiva in modo condizionale funzionalità come lo zoom quando le condizioni dell'hardware o della rete di un utente non le supportano. Puoi ottenere questo risultato tramite la suddivisione del codice adattiva e il caricamento del codice, un modo per caricare in modo condizionale componenti più interattivi o eseguire operazioni più impegnative a livello di calcolo su dispositivi di fascia alta, senza inviare gli script agli utenti su dispositivi più lenti. Guarda il video a 16 min in cui Addy mostra questo pattern implementato con React.lazy() e Suspense su una pagina demo di eBay.
Tinder utilizza una serie di pattern di caricamento adattivi nel suo sito web e nell'app Lite per mantenere un'esperienza veloce per tutti. Se un utente utilizza una rete lenta o ha attivato la funzionalità Risparmio dati, disattiva la riproduzione automatica dei video, limita il precaricamento del percorso e limita il caricamento dell'immagine successiva nel carosello al caricamento di una alla volta mentre gli utenti fanno scorrere. Dopo aver implementato queste ottimizzazioni, l'azienda ha registrato miglioramenti significativi nel numero medio di scorrimenti in paesi come l'Indonesia.
Caricamento adattivo su Facebook
Un problema che si verifica nel 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 raggrupparli in classi. Tuttavia, sui computer l'unica informazione pertinente fornita da UA è il sistema operativo del dispositivo.
Per raggruppare i dispositivi desktop, Facebook registra i dati relativi a sistema operativo,
core della CPU (da navigator.hardwareConcurrency) e memoria RAM
(navigator.deviceMemory) nel monitoraggio delle prestazioni. Esaminando le relazioni tra i diversi tipi di hardware e le prestazioni, hanno classificato i dispositivi in cinque categorie. Grazie a classi hardware integrate nel monitoraggio delle prestazioni, hanno un quadro più completo dell'utilizzo dei prodotti Facebook in base al dispositivo e possono identificare più facilmente le regressioni.
Guarda il video al minuto 24 minuti, dove Nate illustra in che modo Facebook affronta il raggruppamento dei dispositivi e utilizza il caricamento adattivo per le animazioni e il caricamento di JavaScript.
Scopri di più sul caricamento adattivo
Il caricamento adattivo riguarda la progettazione dei siti tenendo conto dell'inclusività. Crea un'esperienza di base perfetta per tutti, quindi attiva o sovrapponi le funzionalità che la rendono ancora più straordinaria se un utente dispone di memoria, CPU o una rete veloce a sufficienza. Per scoprire di più sul caricamento adattivo, guarda le demo disponibili e guarda la presentazione del Chrome Dev Summit: