The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

Compreender baixa largura de banda 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 crescente 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 banda larga baixa e latência alta.

Emule limitações 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 de navegador

O Chrome DevTools permite testar o site com diversas velocidades de upload/download e tempos de ida e volta usando configurações predefinidas ou personalizadas no painel Network do Chrome DevTools:

Limitações no Chrome DevTools

Ferramentas de sistema

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

Painel de controle do Mac Network Link Conditioner

Configurações do Mac Network Link Conditioner settings

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 aplicativos (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).

Teste em locais e redes diferentes

Os problemas de desempenho dependem da localização do servidor e do tipo de rede.

WebPagetest é um serviço on-line que permite a execução de diversos teste de desempenho em seu site, usando várias redes e localizações de host. Por exemplo, você pode experimentar nosso site a partir de um servidor na Índia em uma rede 2G ou usando cabo em uma cidade dos EUA.

Configurações do WebPagetest

Selecione uma localização e, nas configurações avançadas, selecione um tipo de conexão. Você pode até automatizar os testes usando scripts (por exemplo, para fazer login em um site) ou usando suas APIs RESTful. Isso ajuda a incluir testes de conectividade nos processos de compilação ou no registro de desempenho.

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 Fiddler

Teste em redes desfavoráveis

Os proxies de software e hardware permitem que você emule condições de redes móveis problemáticas, como limitação de largura de banda, atraso de pacotes e perda aleatória de pacotes. Um proxy ou rede desfavorável compartilhado pode permitir que uma equipe de desenvolvedores incorpore testes de rede do mundo real em seu 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 instituiu as terças-feiras 2G para ajudar a entender como as pessoas usam seu 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 Charles HTTP/HTTPS pode ser usado para ajustar largura de banda e latência. O Charles é um software comercial, mas há uma versão de avaliação gratuita.

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

Você pode obter 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 foi criado em 2008 (quando os telefones tinham esta aparência) e significa 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 resultados 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. Dados recentes do censo americano 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

Use 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. Jeff Posnick explica como fazer isso usando tempos limite do sw-toolbox em sua palestra Carga instantânea com Service Workers:

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

Uma opção de tempo limite também está planejada para a Fetch API, e a Streams API pode ajudar otimizando a entrega de conteúdo e evitando solicitações monolíticas. Jake Archibald dá mais detalhes sobre como lidar com o lie-fi em Otimização de carga de páginas.