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.

Testar 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 aplicativo 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 "Rede". 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 durante a execução de apps (incluindo navegadores da Web e apps da Web híbridos) no Android:

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 diversos testes de desempenho no seu site usando várias redes e localizações 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 nos processos de build ou no registro de performance.

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

Proxy do Fiddler

Testar em uma rede com problemas

Os proxies de software e hardware permitem que você emule condições de rede móvel problemáticas, como limitação de largura de banda, atraso de pacotes 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é instituiu as terças-feiras 2G para ajudar a entender como as pessoas com 2G usam o produto. 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 versão de avaliação sem custo financeiro.

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.

Considere conectividade pouco 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. 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.

É provável que o lie-fi se torne um problema maior conforme as pessoas mudam da banda larga fixa para os dispositivos móveis. 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 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 do Jeff Posnick no Chrome Dev Summit, Workbox: Flexible PWA Libraries.

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