Comprendere la bassa larghezza di banda e la latenza elevata

È importante capire come si comporta l'applicazione o il sito in caso di connettività scarsa o inaffidabile, e costruire di conseguenza. Una gamma di strumenti può aiutarti.

Test con bassa larghezza di banda e latenza elevata

Una quantità crescente di persone utilizza la rete sui dispositivi mobili. Anche a casa, molte persone stanno abbandonando la banda larga fissa per il mobile.

In questo contesto, è importante capire come si comporta l'applicazione o il sito quando la connettività è scarsa o inaffidabile. Una gamma di strumenti software può aiutarti a emulare e simulare la bassa larghezza di banda e la latenza elevata.

Emulare un rallentamento di rete

Durante la creazione o l'aggiornamento di un sito, è necessario assicurare prestazioni adeguate in una varietà di condizioni di connettività. Diversi strumenti possono aiutarti.

Strumenti del browser

Chrome DevTools ti consente di testare il tuo sito con varie velocità di upload/download e tempi di round-trip, utilizzando impostazioni preimpostate o personalizzate dal pannello di rete. Vedere Iniziare con l'Analisi delle Performance di Rete per imparare le basi.

Chrome DevTools throttling

Strumenti di sistema

Network Link Conditioner è un pannello di preferenze disponibile su Mac installando Hardware IO Tools per Xcode: pannello di controllo Mac Network Link Conditioner

impostazioni Mac Network Link Conditioner

impostazioni personalizzate Mac Network Link Conditioner

Emulazione del dispositivo

Emulatore Android consente di simulare le varie condizioni di rete durante l'esecuzione di applicazioni (compresi browser web e applicazioni web ibride) su Android:

Emulatore Android

Impostazioni dell'Emulatore Android

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

Test da diversi luoghi e reti

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

WebPagetest è un servizio online che consente di eseguire un set di test di prestazioni per il tuo sito utilizzando una vasta gamma di reti e località di hosting. Ad esempio, puoi provare il tuo sito da un server in India su una rete 2G o su un cavo da una città negli Stati Uniti.

Impostazioni di WebPagetest

Selezionare una posizione e, dalle impostazioni avanzate, selezionare un tipo di connessione. Puoi anche automatizzare i test utilizzando scripts (ad esempio, per fare login a un sito) o utilizzando le RESTful API. Questo ti aiuta a includere test di connettività nei processi di generazione o nella registrazione delle prestazioni.

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

Fiddler proxy

Test su una rete altalenante

I proxy software e hardware consentono di emulare condizioni di reti mobili problematiche, come la limitazione della larghezza di banda, il ritardo dei pacchetti e la perdita casuale dei pacchetti. Un proxy condiviso o una rete scarsa possono consentire a un team di sviluppatori di includere test di rete del mondo reale nel loro flusso di lavoro.

Il sistema Facebook di Augmented Traffic Control (ATC) è un insieme di applicazioni con licenza BSD che possono essere utilizzate per modificare il traffico ed emulare condizioni di rete scarse.

Augmented Traffic Control di Facebook

Facebook ha anche istituito i Martedì 2G per capire come le persone su 2G utilizzano il loro prodotto. Il martedì i dipendenti visualizzano un pop-up che offre loro la possibilità di simulare una connessione 2G.

Il proxy Charles HTTP/HTTPS può essere utilizzato per regolare la larghezza di banda e la latenza. Charles è un software commerciale ma è disponibile in forma di trial gratuita.

Impostazioni della larghezza di banda e latenza del proxy Charles

Ulteriori informazioni su Charles sono disponibili su codewithchris.com.

Gestire connessioni non affidabili e "lie-fi"

Che cos'è il lie-fi?

Il termine lie-fi risale almeno al 2008 (quando i telefoni erano fatti così Immagini di telefoni dal 2008), e si riferisce alla connettività che non è ciò che sembra. Il tuo browser si comporta come se avesse connettività quando, per qualunque motivo, non è così.

La connettività errata può provocare una scarsa esperienza d'uso poiché il browser (o JavaScript) persiste nel tentativo di recuperare risorse anziché abbandonare e scegliere un fallback ragionevole. Il lie-fi può in realtà essere peggiore dell'offline; almeno se un dispositivo è decisamente offline, il tuo JavaScript può adottare un'opportuna azione evasiva.

È probabile che il lie-fi diventi un problema sempre maggiore in quanto più persone si muovono in mobilità e lontano dalla banda larga fissa. Recenti dati del censimento degli Stati Uniti mostrano un allontanamento dalla banda larga fissa. Il seguente grafico mostra l'utilizzo di internet mobile a casa nel 2015 rispetto al 2013:

Grafico dai dati 
del censimento degli Stati Uniti che mostrano il passaggio al mobile a 
partire dalla banda larga fissa, in particolare nelle famiglie a basso 
reddito

Utilizzare timeout per gestire la connettività intermittente

In passato, i metodi Hacky che utilizzano XHR sono stati utilizzati per verificare la connettività intermittente, ma il service worker consente metodi più affidabili per impostare i timeout di rete. Jeff Posnick spiega come raggiungere questo obiettivo usando i timeout sw-toolbox nel suo discorso Caricamento istantaneo con i Service Workers:

toolbox.router.get(
  '/path/to/image',
  toolbox.networkFirst,
  {networkTimeoutSeconds: 3}
);

È inoltre prevista una opzione di timeout per l'API Fetch e l'API Streams che dovrebbero aiutare ad ottimizzare la distribuzione dei contenuti ed evitare richieste monolitiche. Jake Archibald fornisce maggiori dettagli su come affrontare il lie-fi nel Supercharging page load.

Translated by