O que é largura de banda baixa e alta latência

É importante entender como é usar o seu aplicativo ou site quando a conectividade é ruim ou pouco confiável e considerar isso quando for programar. Há diversas ferramentas que podem ajudar.

Teste com baixa largura de banda e alta latência

Uma proporção cada vez maior de pessoas usa a Web em dispositivos móveis. Mesmo em casa, muitas pessoas estão mudando da banda larga fixa para os dispositivos móveis.

Nesse contexto, é importante entender como o app ou site se comporta quando a conectividade é insuficiente ou pouco confiável. Uma variedade de ferramentas de software pode ajudar a emular e simular baixa largura de banda e alta latência.

Emular limitação de rede

Ao criar ou atualizar um site, você deve verificar o desempenho para que seja adequado em diversas condições de conectividade. Várias ferramentas podem ajudar.

Ferramentas do navegador

O Chrome DevTools permite testar seu site com diversas velocidades de upload/download e tempos de ida e volta usando configurações predefinidas ou personalizadas no painel "Network". Consulte Começar a analisar o desempenho da rede para aprender o básico.

Limitação do Chrome DevTools

Ferramentas do sistema

O Network Link Conditioner é um painel de preferências disponível no Mac quando você instala Hardware IO Tools para Xcode:

Painel de controle do Mac Network Link Conditioner

Configurações do Network Link Conditioner do Mac

Configurações personalizadas do Mac Network Link Conditioner

Emulação de dispositivos

O Android Emulator permite simular várias condições de rede ao executar apps no Android, incluindo navegadores da Web e apps da Web híbridos:

Android Emulator

Configurações do Android Emulator

No iPhone, o Network Link Conditioner pode ser usado para simular condições de rede desfavoráveis (veja acima).

Testar em locais e redes diferentes

O desempenho da conectividade depende da localização do servidor e do tipo de rede.

O WebPagetest é um serviço on-line que permite a execução de um conjunto de testes de desempenho para seu site usando uma variedade de redes e locais de host. Por exemplo, você pode testar seu site em um servidor na Índia em uma rede 2G ou usando cabo em uma cidade dos EUA.

Configurações do WebPagetest

Selecione um local e, nas configurações avançadas, selecione um tipo de conexão. Você pode até mesmo automatizar os testes usando scripts (por exemplo, para fazer login em um site) ou usando as APIs RESTful. Isso ajuda a incluir testes de conectividade em processos de build ou geração de registros de desempenho.

O Fiddler é compatível com o uso de proxy global por meio do GeoEdge e as regras personalizadas podem ser usadas para simular velocidades de modem:

Proxy do Fiddler

Testar em uma rede com problemas

Com os proxies de software e hardware, é possível emular condições problemáticas de rede móvel, como limitação de largura de banda, atraso de pacote e perda aleatória de pacotes. Um proxy compartilhado ou uma rede prejudicada pode permitir que uma equipe de desenvolvedores incorpore testes de rede do mundo real no fluxo de trabalho.

O Augmented Traffic Control (ATC) do Facebook é um conjunto de aplicativos licenciados do BSD que pode ser usado para modelar tráfego e simular condições desfavoráveis de rede:

Augmented Traffic Control do Facebook

O Facebook até criou as Terças-feiras do 2G para ajudar a entender como as pessoas usam o produto com 2G. Nas terças-feiras, um pop-up notifica os funcionários sobre a opção de simular uma conexão 2G.

O proxy HTTP/HTTPS do Charles pode ser usado para ajustar a largura de banda e a latência. O Charles é um software comercial, mas há uma avaliação sem custo financeiro disponível.

Configurações de largura de banda e latência do proxy do Charles

Você pode conferir mais informações sobre o Charles em codewithchris.com.

Lidar com conectividade não confiável e "lie-fi"

O que é lie-fi?

O termo lie-fi data de pelo menos 2008 (quando os smartphones tinham esta aparência) e se refere a uma conectividade que não é o que parece ser. O navegador se comporta como se tivesse conectividade quando, por algum motivo, não tem.

A interpretação incorreta da conectividade pode resultar em uma experiência ineficiente, pois o navegador (ou o JavaScript) persiste na tentativa de recuperar recursos em vez de desistir e optar por um fallback razoável. Na verdade, o lie-fi pode ser pior que o off-line. Se o dispositivo estiver definitivamente off-line, o JavaScript poderá pelo menos executar ações adequadas para contornar a situação.

"Lie-fi" provavelmente se tornará um problema maior à medida que mais pessoas migrarem para dispositivos móveis e abandonarem a banda larga fixa. Os dados recentes do censo dos EUA mostram um abandono da banda larga fixa. O gráfico a seguir mostra o uso doméstico da Internet móvel em 2015 com o de 2013:

Gráfico de dados do censo americano
mostrando a mudança da banda larga fixa para os dispositivos móveis, particularmente em lares de baixa renda

Usar tempos limite para lidar com conectividade intermitente

Anteriormente, métodos de hacker usando XHR eram utilizados para testar a presença de conectividade intermitente. No entanto, o Service Worker oferece métodos mais confiáveis para definir tempos limite de rede. Isso pode ser feito usando o Workbox com apenas algumas linhas de código:

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

Saiba mais sobre o Workbox na palestra de Jeff Posnick na Chrome Dev Summit, Workbox: bibliotecas PWA flexíveis.

A funcionalidade de tempo limite também está sendo desenvolvida para a API Fetch. A API Streams pode ajudar a otimizar a entrega de conteúdo e evitar solicitações monolíticas. Jake Archibald dá mais detalhes sobre como lidar com o lie-fi em Otimização de carga de páginas.

Feedback