Introdução
Hoje, o mais importante é garantir que seu site tenha um bom desempenho quando acessado em um smartphone ou tablet. Continue lendo e saiba como otimizar seu site para dispositivos móveis usando o Chrome DevTools e um dispositivo Android.
Por que a otimização para a Web para dispositivos móveis é tão importante?
Desempenho
Com a transição do 2G e do 3G para o 4G, os dispositivos móveis estão recebendo CPUs e RAM mais rápidas, GPUs mais rápidas e um acesso mais rápido à rede. Apesar da barreira do progresso, os dispositivos móveis não são tão potentes quando comparados aos nossos computadores. Em termos mais concretos, o carregamento de recursos de rede leva mais tempo, a descompactação de imagens demora mais, a pintura da página e a execução de scripts levam mais tempo. É seguro presumir que a página fica de cinco a dez vezes mais lenta em dispositivos móveis.
Bateria
Os dispositivos móveis funcionam exclusivamente com bateria. Os usuários de dispositivos móveis querem que a bateria dure o máximo possível. Um site abaixo do ideal vai consumir a bateria muito mais rápido do que o necessário. Minimize o tráfego de rede e reduza as pinturas para reduzir o consumo da bateria. Quando você busca um recurso, o Wi-Fi ou o rádio celular precisa estar ativado, o que aumenta o consumo da bateria. Quando o navegador mostra um elemento, o uso da CPU e da GPU aumenta, o que também consome a bateria.
Engajamento
O desempenho está lá para aumentar a métrica que mais importa para você. No Facebook, a rolagem é importante. Em um teste A/B, diminuímos a rolagem de 60 QPS para 30 QPS. O engajamento foi reduzido. Nós dissemos que sim, portanto, rolar a tela é importante.
Facebook na conferência Edge
Os usuários de dispositivos móveis esperam poder entrar e sair rapidamente. O site mais rápido terá o maior engajamento.
Gerenciamento de desempenho
O Chrome vem com um excelente conjunto de ferramentas para desenvolvedores. Este artigo ensina como usar essas ferramentas para criar o perfil do seu site móvel. Se você já conhece o Chrome DevTools, ótimo. Caso contrário, confira estes ótimos tutoriais:
Agora que você já está em dia, vamos conferir como acelerar seu site móvel com o DevTools. Se esta é a primeira vez que você usa o Chrome DevTools para Android, confira o guia para iniciantes na parte inferior do artigo.
Como usar o Chrome DevTools remotamente
Com seu dispositivo Android conectado ao computador. No Chrome para computador, acesse http://localhost:9222 e, no dispositivo Android, abra o site. Você será direcionado para uma lista de guias abertas no seu dispositivo Android. Escolha sua página na lista de "Páginas que podem ser inspecionadas".
para acessar o Chrome DevTools referente a essa página.
Ah... a barra de ferramentas conhecida do Chrome DevTools está ali. O mais importante a entender sobre o Chrome DevTools remoto é que eles são os mesmos que você usa hoje no computador. A única diferença é que seu dispositivo Android é responsável apenas pela página, enquanto seu computador é responsável pelo DevTools. Em segundo plano, os mesmos dados são coletados e os mesmos recursos estão disponíveis.
Por exemplo, eu acessei www.sfgate.com/movies no meu smartphone. Ao usar o Chrome DevTools no meu computador, passei o cursor sobre um div na ferramenta Elements e, assim como no computador, o div fica em destaque no meu dispositivo Android.
A ferramenta Elements também pode ser usada para ativar e desativar estilos, o que é útil quando tentamos investigar os tempos de exibição.
Esclarecimento sobre o acesso à rede
O desempenho da rede é importante, e é ainda mais importante na Web para dispositivos móveis. Os dispositivos móveis geralmente estão em conexões mais lentas do que nossos computadores desktop e laptop. Para ter certeza de que você está fazendo a coisa certa, faça um snapshot da rede acessando a Ferramenta Rede e pressionando gravar.
A captura de tela mostra o tráfego de rede resultante de uma pesquisa no Google. Observe as solicitações de rede que seu site faz e encontre maneiras de minimizá-las. Se o site faz solicitações de pesquisa para o servidor, preste atenção à atividade do usuário e evite pesquisas quando ele estiver inativo. A ferramenta Rede permite visualizar os cabeçalhos HTTP brutos, o que é útil caso as redes móveis os alterem.
Como otimizar os tempos de exibição
Um dos maiores gargalos dos navegadores da Web para dispositivos móveis é a pintura da página. A pintura é o processo de desenhar um elemento na página com o estilo especificado. Quando a pintura de um elemento é cara, ela desacelera a exibição da página inteira. O Chrome tenta armazenar em cache elementos pintados anteriormente em um buffer fora da tela. No entanto, em dispositivos móveis, a quantidade de RAM da GPU disponível é limitada, o que limita o número de elementos que podem ser armazenados em cache fora da tela. O efeito colateral é mais pinturas e cada pintura é mais lenta do que em computadores. Para ter uma rolagem responsiva, é necessário minimizar os tempos de pintura.
O Chrome 25 inclui o modo de pintura contínua da página. O modo de repintura contínua de páginas nunca armazena em cache os elementos pintados. Em vez disso, mostra todos os elementos de cada frame. Ao forçar todos os elementos a pintar cada frame, é possível realizar um teste A/B dos tempos de pintura ativando e desativando elementos e ativando e desativando o estilo. Embora o processo seja manual, é uma ferramenta inestimável para acompanhar o custo da pintura de cada elemento da página. A primeira regra do clube de otimização é medir o que você está tentando otimizar para ter um valor de referência. Vamos conferir um exemplo simples.
Primeiro, ative o modo de repintura contínua da página:
Depois da ativação, um gráfico vai aparecer no canto superior direito do dispositivo Android. O eixo x do gráfico é o tempo, dividido em frames. O eixo Y do gráfico mede o tempo de exibição, em milissegundos. No meu dispositivo, a página leva 14 milissegundos para ser pintada. Os tempos mínimo e máximo de exibição também são mostrados com a memória da GPU usada.
Como um experimento, defini o estilo no elemento selecionado como display: none. Vamos conferir o custo
da pintura da página agora.
Os tempos de exibição passaram de cerca de 14 milissegundos por frame para 4 milissegundos por frame. Em outras palavras, pintar esse elemento levou aproximadamente 10 milissegundos. Ao seguir o processo de ativação e desativação de elementos e ativação e desativação de estilos, você pode restringir rapidamente as partes caras da página. Lembre-se de que tempos de exibição mais rápidos significam menos instabilidade, uma bateria mais longa e mais engajamento dos usuários. Quando você estiver pronto para se aprofundar, leia este ótimo artigo sobre o modo de repintura contínua da página.
Recursos avançados
sobre:rastreamento
Muitos dos recursos mais avançados para desenvolvedores disponíveis no Chrome para computador também estão disponíveis no Chrome para Android. Por exemplo, about:gpu-internals, about:appcache-internals e about:net-internals estão disponíveis. Ao investigar um problema particularmente complicado, às vezes você precisa de mais dados para restringir a causa do seu problema. No computador, você pode usar about:tracing. Se você ainda não conhece about:tracing, assista meu vídeo sobre como usar e explorar a ferramenta de criação de perfil about:tracing. É possível capturar os mesmos dados do Android Chrome. Siga estas etapas para começar:
- Faça o download do adb_trace.py.
- Executar o adb_trace.py na linha de comando
- Usar o Chrome no Android
- Pressione Enter na linha de comando, desligando o script adb_trace.py.
Depois que o adb_trace.py for concluído, você terá um arquivo JSON que poderá ser carregado no about:tracing do Chrome para computador.
Guia inicial
Agora que analisamos o que o Chrome DevTools remoto pode fazer, vamos ver como começar na sua sessão de depuração remota. Se você nunca usou,leia as instruções detalhadas sobre como começar. Se você já os usou, mas se esqueceu exatamente de como usá-los, também listei instruções resumidas aqui.
1. Instalar o SDK do Android
Você pode estar se perguntando por que é necessário instalar o SDK do Android ao desenvolver para a Web. O adb (Android Debug Bridge) está incluído no SDK. O Chrome para computador precisa ser capaz de se comunicar com seu dispositivo Android. O Chrome não se comunica diretamente com o dispositivo Android, mas roteia a comunicação pelo adb.
2. Ativar a depuração USB do dispositivo
A opção para ativar a depuração USB pode ser encontrada nas configurações do Android. Ative.
3. Conecte-se ao dispositivo
Conecte o dispositivo Android à área de trabalho via USB, caso ainda não tenha feito isso. Se esta for a primeira vez que você usa a depuração USB, o seguinte prompt será exibido:
Se você realizar sessões de depuração remotas com frequência, recomendamos marcar "Sempre permitir neste computador".
4. Verifique se o dispositivo está conectado corretamente.
Execute adb devices no seu prompt de comando. Seu dispositivo vai aparecer na lista.
5. Ativar a depuração USB no Chrome
Abra Settings > Advanced > DevTools e marque a opção Enable USB Web debugging, conforme mostrado aqui:
6. Como criar uma conexão do DevTools com seu dispositivo Android
Execute este comando:
adb forward tcp:9222 localabstract:chrome_devtools_remote
cria uma ponte entre o computador e o dispositivo Android pelo adb. Se você tiver problemas para chegar a esse ponto, leia as instruções detalhadas de configuração neste link.
7. Verificando se está tudo pronto
Verifique se o dispositivo está conectado corretamente abrindo o Chrome na área de trabalho e navegando até http://localhost:9222. Se você receber um erro 404, outro erro ou não for exibido algo semelhante a:
Leia as instruções detalhadas de configuração aqui.
Conclusão
Os usuários de dispositivos móveis geralmente estão com pressa e precisam acessar rapidamente aquela informação importante na sua página. Como criador de sites para dispositivos móveis, é seu dever garantir que a página carregue rapidamente e tenha um bom desempenho nesses dispositivos. Caso contrário, o engajamento dos usuários vai diminuir. O Chrome DevTools remoto tem funções equivalentes às da versão para computador. A interface é semelhante o suficiente para que você não precise aprender um novo conjunto de ferramentas. Em outras palavras, seu fluxo de trabalho é transferido. Lembre-se de que o Facebook não é invencível a problemas de desempenho, e seu site também não. Sites com bom desempenho geram mais engajamento.