O Facebook e o Instagram compartilharam a experiência em melhorar seus aplicativos em vários dispositivos Android e em diferentes velocidades de conexão de rede durante a sessão Escalando Aplicações Android para Mercados Emergentes gravada no evento @Scale 2014.
O Facebook enviou equipes para vários países na Ásia, África, América Central e América do Sul para avaliar o mercado de telefonia local e de comprar e usar dispositivos populares para ver o que é a experiência do usuário ao acessar a sua aplicação. Chris Marra, gerente de produto do desenvolvimento Android no Facebook, compartilhou uma série de conclusões sobre os dispositivos Android e conexões de rede nesses mercados emergentes:
- Há em torno de 10.000 modelos de dispositivos acessando o Facebook regularmente;
- Nos países em desenvolvimento, existem duas categorias predominantes de dispositivos móveis: feature phones e celulares Android de baixo custo;
- Esses dispositivos são normalmente desenvolvidos com um hardware de uma geração anterior;
- Conexão com a Internet é um serviço pago e caracterizado por um congestionamento de problemas;
- Os celulares são lentos, com tela pequena e geralmente com má qualidade na conexão com a rede;
- EUA têm 70% de cobertura 3G, enquanto países como Brasil e Índia têm 38% e 7%, respectivamente.
Depois de tomar o controle destes mercados, o Facebook começou a melhorar a sua aplicação. Eles descobriram que os usuários com telefones mais antigos têm significativamente mais falha com os aplicativos porque a memória limitada gera erros do tipo "OutOfMemory" com mais frequência, então eles decidiram fornecer uma versão diferente do aplicativo para esses usuários, a fim de garantir o funcionamento sem problemas. Eles tiveram que reduzir animações e operações de interface que utilizam muita memória porque os usuários de telefones mais antigos tiveram uma experiência negativa.
Depois de ver como o aplicativo se comportava em certos telefones mais antigos, o Facebook criou as ferramentas para educar suas equipes sobre os problemas existentes e eles começaram a melhorar a experiência do usuário em tais dispositivos. Um dos fatores que tiveram que ser considerado foi o tamanho da tela, pois 10% dos usuários do Facebook possuem celulares com telas LDPI (120 DPI). Eles decidiram cortar substancialmente a interface do usuário, eliminando ou simplificando os acessórios e ícones.
Andrew Rogers, gerente de engenharia do Facebook, detalhou alguns dos passos tomados para melhorar a experiência do usuário.
Tamanho das imagens. Os dados de imagens representam 85% do tráfego do Facebook / Android e 65% dos bytes do aplicativo Messenger transferidos através da rede, de modo que é desejável reduzir a sua dimensão, tanto quanto possível. Isto foi conseguido por:
- Escalar imagens no servidor;
- Tendo vários tamanhos de imagem e resoluções: pré visualização de imagens em feed de notícias, miniaturas de perfis e uma grande imagem para conjuntos de fotos;
- Baixando pequenas imagens de acordo com o tamanho da tela;
- Usando imagens de tamanho completo apenas quando o usuário aumentar o zoom; na maior parte das vezes os usuários precisam apenas de uma pequena miniatura ou uma pré-visualização;
- Usando WebP para 90% de imagens no Android, tendo um tamanho de 30% menor em comparação ao JPEG para a mesma qualidade de imagem percebida. Detalhes: WebP é suportado nativamente no Android 4.2+, assim, para as versões anteriores a imagem precisa ser decodificada para PNG ou JPEG no dispositivo.
Qualidade da rede. O Facebook percebeu que não é suficiente para determinar a velocidade da rede com base no tipo de rede. As conexões são 2-3x mais lento em alguns países em relação aos outros, apesar de usar a mesma tecnologia: Edge, HSPA, LTE, etc. Em países como a Índia ou o Brasil, o Wi-Fi é mais lento que a LTE, por isso é melhor para determinar dinamicamente o velocidade de rede real.
Para reduzir o tempo de download, eles decidiram:
- Aumentar a compressão de imagem;
- Emitir pedidos paralelamente;
- Desativar auto-play;
- Carregar antecipamente mais conteúdo.
Para tornar isso possível é necessário testar seu aplicativo em várias redes antes de ser implantado, o Facebook criou Controle de Tráfego Aéreo, uma ferramenta que simula diferentes tipos de conexão de rede Wi-Fi, que tem a capacidade de configurar máxima largura de banda, perda de pacotes, atraso de latência para uplink e downlink.
Carregar conteúdo antecipadamente. Outra forma de melhorar a experiência do usuário mencionado por Rogers é a carregar alguns dos conteúdos antecipadamente. Isto é especialmente útil para redes de alta latência, mas a pré-busca não deve ser usado em demasia porque o cache fica cheio e consome o plano de dados que é provavelmente bastante limitado.
Tyler Kieft, um engenheiro que trabalhava com o Android no Instagram, apresentou alguns dos ajustes feitos por sua equipe para o aplicativo Android para aprimorar seu desempenho e torná-lo mais bonito. Uma das coisas que fizeram foi, reescrever a interface usando um design moderno removendo gradientes, cores brilhantes, sombras, entre outros. O que resultou em aumento de desempenho em todos os tipos de dispositivos Android.
Um efeito colateral foi que o design habilitou "matização de recursos" de forma programática. O aplicativo não precisa de todos os recursos em todas as cores, mas somente em uma cor. O Instagram conseguiu reduzir o número de recursos de 29 para 8 apenas para uma tela do aplicativo. Como resultado, a interface do usuário exibe mais rápido, ocupa menos espaço de memória e o tempo de inicialização caiu para 120ms. Além disso, os usuários reagiram muito positivamente para a nova aparência e suas melhorias de desempenho.
De acordo com Tyler Kieft, eles analisaram o aplicativo para determinar o que estava deixando o aplicativo lento usando o método de rastreamento com o Android Traceview e declarações de cronometragem de tempo. Em seguida, melhoraram o aplicativo com algumas alterações:
- Removendo itens lentos à partir do caminho inicialização;
- Reescrever o código com baixo desempenho;
- Utilizando tarefas em segundo plano;
- Repetindo os passos acima (análise, re-escrita).
Eles também usam tarefas em brackground em duas etapas: criam objetos singletons na thread de UI, mas executam ações sobre eles, tal como: o armazenamento em disco de acesso para cache, certificados de carga para um cliente HTTP, desserialização de cookies com uma thread em background.
Outra forma de reduzir o tempo de inicialização para a aplicação estava em utilizar views nativas em vez de usar WebView, obtendo redução de 30% em todas as versões do Android.