Informazioni su larghezza di banda ridotta e alta latenza

È importante capire come viene utilizzata la tua app o il tuo sito quando la connettività è scarsa o inaffidabile e sviluppare le soluzioni di conseguenza. Una serie di strumenti può aiutarti.

Esegui test con larghezza di banda bassa e latenza elevata

Una crescente proporzione di persone naviga sul web sui dispositivi mobili. Anche a casa, molte persone abbandonano la banda larga fissa per i dispositivi mobili.

In questo contesto, è importante capire cosa prova l'utilizzo della tua app o del tuo sito quando la connettività è scarsa o inaffidabile. Una serie di strumenti software può aiutarti a emulare e simulare larghezza di banda bassa e latenza elevata.

Emula la limitazione della rete

Quando crei o aggiorni un sito, devi garantire prestazioni adeguate in diverse condizioni di connettività. Diversi strumenti possono essere utili.

Strumenti del browser

Chrome DevTools ti consente di testare il tuo sito con una serie di velocità di caricamento/download e tempi di round trip, utilizzando impostazioni predefinite o personalizzate nel riquadro Network. Consulta Inizia ad analizzare le prestazioni di rete per apprendere le nozioni di base.

Limitazione di Chrome DevTools

Strumenti di sistema

Network Link Conditioner è un riquadro di preferenze disponibile su Mac se si installano Strumenti di IO hardware per Xcode:

Pannello di controllo Network Link Conditioner di Mac

Impostazioni di Network Link Conditioner di Mac

Impostazioni personalizzate del Conditioner link di rete Mac

Emulazione dispositivo

Android Emulator consente di simulare varie condizioni di rete durante l'esecuzione di app (inclusi browser web e app web ibride) su Android:

emulatore Android

Impostazioni emulatore Android

Per iPhone, Network Link Conditioner può essere utilizzato per simulare condizioni di rete compromesse (vedi sopra).

Esegui test da località e reti diverse

Le prestazioni della connettività dipendono dalla posizione del server e dal tipo di rete.

WebPagetest è un servizio online che consente di eseguire una serie di test delle prestazioni per il tuo sito utilizzando una varietà di reti e località host. Ad esempio, puoi provare il tuo sito da un server in India su una rete 2G o tramite cavo da una città degli Stati Uniti.

Impostazioni WebPagetest

Seleziona una località e, dalle impostazioni avanzate, un tipo di connessione. Puoi persino automatizzare i test utilizzando script (ad esempio per accedere a un sito) o utilizzando le relative API RESTful. Ciò ti consente di includere i test di connettività nei processi di compilazione o nel logging delle prestazioni.

Viola supporta il proxy globale tramite GeoEdge e le sue regole personalizzate possono essere utilizzate per simulare la velocità del modem:

Proxy fitbit

Eseguire il test su una rete con problemi

I proxy hardware e software consentono di emulare condizioni problematiche della rete mobile, come limitazione della larghezza di banda, ritardo dei pacchetti e perdita casuale di pacchetti. Un proxy condiviso o una rete con problemi possono consentire a un team di sviluppatori di incorporare nel flusso di lavoro test di rete reali.

Il controllo del traffico aumentato (ATC) di Facebook è un insieme di applicazioni con licenza BSD che può essere utilizzato per modellare il traffico ed emulare condizioni di rete compromesse:

Controllo aumentato del traffico di Facebook

Facebook ha anche istituito il programma Giovedì 2G per capire in che modo le persone che utilizzano il 2G utilizzano il prodotto. Il martedì, i dipendenti visualizzano un popup che offre loro la possibilità di simulare una connessione 2G.

Il proxy HTTP/HTTPS di Charles può essere utilizzato per regolare la larghezza di banda e la latenza. Charles è un software commerciale, ma è disponibile una prova senza costi.

Impostazioni di latenza e larghezza di banda del proxy Charles

Ulteriori informazioni su Charles sono disponibili su codewithchris.com.

Gestire connettività inaffidabili e "lie-fi"

Che cos'è il lie-fi?

Il termine lie-fi risale almeno al 2008 (ovvero i telefoni simili a questo) e si riferisce a una connettività che non è ciò che sembra. Il browser si comporta come se fosse disponibile quando, per qualsiasi motivo, non ci fosse.

Interpretazioni errate della connettività possono causare un'esperienza scadente, in quanto il browser (o JavaScript) continua a tentare di recuperare le risorse invece di rinunciare e scegliere un fallback ragionevole. Il "lie-fi" può essere peggio che offline. Almeno se un dispositivo è del tutto offline, JavaScript può compiere un'azione elusiva appropriata.

Il Lie-Fi diventerà probabilmente un problema maggiore con l'aumento del numero di persone che passano alla banda larga mobile e verso la banda larga fissa. Recenti dati del censimento degli Stati Uniti mostrano l'abbandono della banda larga fissa. Il seguente grafico mostra l'utilizzo di internet mobile a casa nel 2015 rispetto al 2013:

Un grafico basato sui dati del censimento degli Stati Uniti
mostra il passaggio alla banda larga mobile dalla banda larga fissa, soprattutto nelle famiglie a basso reddito

Usa i timeout per gestire la connettività intermittente

In passato, sono stati utilizzati metodi compromessi che utilizzano l'XHR per verificare la connettività intermittente, ma il service worker consente metodi più affidabili per impostare i timeout di rete. Puoi ottenere questo risultato utilizzando Workbox con solo poche righe di codice:

workboxSW.router.registerRoute(
  '/path/to/image',
  workboxSW.strategies.networkFirst({networkTimeoutSeconds: 3}),
);

Puoi scoprire di più su Workbox nell'articolo del Chrome Dev Summit di Jeff Posnick, Workbox: Librerie PWA flessibili.

È in fase di sviluppo anche la funzionalità timeout per l'API Fetch e l'API Streams dovrebbe essere utile ottimizzando la distribuzione dei contenuti ed evitando richieste monolitiche. Jake Archibald fornisce ulteriori dettagli su come affrontare il lie-fi in Supercharging page load.

Feedback