Saiba como garantir que todos os usuários tenham a melhor experiência possível otimizando seus sites para restrições específicas de hardware e rede.
Os recursos do dispositivo e as conexões de rede variam muito. Sites que encantam os usuários de dispositivos sofisticados podem ser inutilizáveis em mais simples. Os sites que carregam sem problemas em redes rápidas podem ser interrompidos em redes lentas. Um site lento pode ser usado por qualquer usuário. Por isso, desenvolver soluções únicas para todos os casos nem sempre funciona.
Na palestra da Conferência de Desenvolvedores do Chrome, Addy Osmani, do Google, e Nate Schloss, do Facebook, exploram uma solução para esse problema: um padrão de exibição de páginas que atendem melhor a uma variedade de restrições do usuário. Eles o chamam de carregamento adaptável.
O que é o carregamento adaptável?
O carregamento adaptável envolve a entrega de experiências diferentes para usuários distintos com base nas restrições de rede e hardware, especificamente:
Uma experiência principal rápida para todos os usuários (incluindo dispositivos mais simples).
Adicionar progressivamente recursos exclusivos de última geração, se a rede e o hardware do usuário puderem fazer isso.
Ao otimizar para restrições específicas de hardware e rede, você permite que todos os usuários tenham a melhor experiência possível no dispositivo. A adaptação da experiência às restrições dos usuários pode incluir:
Exibição de imagens e vídeos de baixa qualidade em redes lentas.
Limitação da frame rate de animações em dispositivos mais simples.
Evitar operações computacionais dispendiosas em dispositivos mais simples.
Bloquear scripts de terceiros em dispositivos mais lentos.
Carregar JavaScript não essencial para interatividade apenas em CPUs rápidas.
Suporte a navegadores e como implementar o carregamento adaptável
Os sinais que podem ser usados para o carregamento adaptável estão listados abaixo. A compatibilidade com navegadores também está incluída para cada indicador:
Navigator.deviceMemory
A propriedade navigator.deviceMemory é usada para reduzir o consumo de memória em dispositivos mais simples.
Navigator.hardwareConcurrency
A propriedade navigator.hardwareConcurrency é a contagem de núcleos da CPU. Ele é usado para limitar a execução dispendiosa do JavaScript e reduzir a lógica de uso intensivo da CPU quando um dispositivo não consegue lidar bem com isso.
NetworkInformation.effectiveType
A propriedade navigator.connection.effectiveType é usada para ajustar a transferência de dados para usar menos largura de banda.
NetworkInformation.saveData
A propriedade navigator.connection.saveData é usada para aproveitar as preferências da Economia de dados do usuário.
Há dois lugares em que você pode decidir o que exibir aos usuários: no cliente e no servidor. No cliente, há as APIs JavaScript mencionadas acima. No servidor, você pode usar dicas de cliente para ter insights sobre os recursos do dispositivo do usuário e a rede a que ele está conectado.
Carregamento adaptável no React
Os hooks de carregamento e utilitários de carregamento adaptáveis da reação são um pacote para o ecossistema do React que facilita a adaptação dos seus sites a dispositivos mais simples. Saiba o que ele inclui:
O hook
useNetworkStatus()para adaptação com base no status da rede (slow-2g,2g,3gou4g).O gancho
useSaveData()para adaptação com base nas preferências da Economia de dados do usuário.O hook
useHardwareConcurrency()para adaptação com base no número de núcleos de processador lógico de CPU no dispositivo do usuário.O hook
useMemoryStatus()para adaptação com base na memória do dispositivo (RAM) do usuário.
Cada gancho aceita um argumento opcional para definir o valor inicial. Essa
opção é útil em dois cenários: quando o navegador do usuário não oferece suporte à
API relevante e para renderização do lado do servidor, em que você pode usar os dados de dica
do cliente para definir o valor inicial no servidor. Por exemplo, o hook useNetworkStatus() pode usar o valor inicial transmitido da dica do cliente para renderização do lado do servidor e, quando executado no cliente, atualizar a si mesmo se o tipo efetivo de rede for alterado.
Os hooks de carregamento e utilitários do React Adaptive são implementados usando APIs da plataforma Web (Informações de rede, Memória do dispositivo e Simultaneidade de hardware). É possível usar as mesmas APIs para aplicar conceitos de carregamento adaptável a outros frameworks e bibliotecas, como Angular, Vue e outros.
Carregamento adaptável em ação
Esta seção apresenta demonstrações de como usar o carregamento adaptável e exemplos reais de sites como Facebook, eBay, Tinder e outros.
A demonstração React Movie mostra como adaptar a veiculação de mídia com base no status da rede. É um app de navegação de filmes que mostra pôsteres, resumos e listas de elenco. Com base no tipo de conexão eficaz do usuário, ele exibe pôsteres de alta qualidade em conexões rápidas e pôsteres de baixa qualidade em conexões lentas.
O Twitter tem um modo de Economia de dados projetado para reduzir a quantidade de dados usados. Nesse modo, as imagens de visualização são carregadas em baixa resolução e as imagens grandes são carregadas somente quando você toca na visualização. Com essa opção ativada, os usuários de iOS e Android economizaram 50% no uso de dados de imagens, e os usuários na Web economizaram 80%. Veja uma demonstração do React que usa o hook "Save Data" para replicar a linha do tempo do Twitter. Tente abrir o painel Network do DevTools e observar a diferença na quantidade de dados transferidos conforme você rola a tela enquanto a opção "Salvar dados" está desativada e quando ela está ativada.
O eBay ativa e desativa condicionalmente recursos como o zoom quando as condições de hardware ou rede do usuário não são bem compatíveis com eles. É possível fazer isso com a divisão de código adaptável e o carregamento de código, uma maneira de carregar condicionalmente componentes mais interativos ou executar operações com uso mais intenso de computação em dispositivos sofisticados, sem enviar esses scripts a usuários em dispositivos mais lentos. Confira o vídeo em 16 min, em que Addy mostra esse padrão implementado com React.Lazy() e Suspense em uma página de produto de demonstração do eBay.
O Tinder está usando vários padrões de carregamento adaptáveis na Web e no app Lite para manter a experiência rápida para todos. Se um usuário estiver em uma rede lenta ou tiver a Economia de dados ativada, ele desativará a reprodução automática de vídeos, limitará a pré-busca de rotas e limitará o carregamento da próxima imagem no carrossel para carregar uma imagem por vez à medida que os usuários deslizam deslizando. Depois de implementar essas otimizações, eles notaram melhorias significativas na contagem média de deslizar em países como a Indonésia.
Carregamento adaptável no Facebook
Um problema que surge no carregamento adaptável é o agrupamento de dispositivos em classes sofisticadas e sofisticadas com base nos sinais disponíveis. Em dispositivos móveis, a string user-agent (UA) fornece o nome do dispositivo que permite que o Facebook use dados disponíveis publicamente sobre as características do dispositivo para agrupar dispositivos móveis em classes. No entanto, em dispositivos desktop, a única informação relevante que o UA fornece é o sistema operacional do dispositivo.
Para agrupar dispositivos de desktop, o Facebook registra os dados sobre o sistema operacional,
núcleos de CPU (de navigator.hardwareConcurrency) e memória RAM
(navigator.deviceMemory) no monitoramento de desempenho. Analisando as
relações entre diferentes tipos de hardware e desempenho, os dispositivos
classificaram os dispositivos em cinco categorias. Com as classes de hardware integradas ao
monitoramento de desempenho, eles têm uma visão mais completa de como as pessoas usam
os produtos do Facebook, dependendo do dispositivo, e podem identificar regressões com mais
facilidade.
Confira o vídeo em 24 minutos, em que Nate explica como o Facebook aborda o agrupamento de dispositivos e usa o carregamento adaptável para animações e JavaScript.
Saiba mais sobre o carregamento adaptável
O carregamento adaptável tem a ver com criar sites com foco na inclusão. Crie uma experiência principal que funcione bem para todos e, em seguida, alterne ou use camadas de recursos que tornam o app ainda mais incrível se o usuário tiver memória, CPU ou uma rede rápida suficientes. Para saber mais sobre o carregamento adaptável, confira as demonstrações disponíveis e assista à palestra da Conferência de Desenvolvedores do Chrome: