Introdução
Hoje, a coisa mais importante que você pode fazer para seu site é verificar se ele funciona bem quando visitado em um smartphone ou tablet. Continue lendo para saber como otimizar seu site para o navegador 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
Os dispositivos móveis estão recebendo CPUs e GPUs mais velozes, além de GPUs e acesso à rede mais rápidos à medida que fazemos a transição de 2G e 3G para 4G. Apesar do ritmo de progresso, os dispositivos móveis têm menos potência em comparação com os computadores. Em termos mais concretos, o carregamento de recursos de rede leva mais tempo, descompactar imagens leva mais tempo, pintar a página leva mais tempo, executar scripts leva mais tempo. É seguro presumir que a página é executada de 5 a 10 vezes mais lentamente em um dispositivo móvel.
Bateria
Os dispositivos móveis são exclusivamente movidos a bateria. Os usuários de dispositivos móveis querem que a bateria dure o máximo possível. Um site subótimo vai consumir uma bateria muito mais rápido do que o necessário. Minimizar o tráfego de rede e reduzir as pinturas para diminuir o consumo de bateria. Quando você extrai um recurso, o Wi-Fi ou o rádio celular precisa estar ativado, o que consome bateria. Quando o navegador pinta um elemento, o uso da CPU e da GPU aumenta, o que também consome bateria.
Engajamento
A performance serve para aumentar a métrica mais importante para você. A rolagem é muito importante para o Facebook. Em um teste A/B, reduzimos a rolagem de 60 qps para 30 qps. Engajamento fechado. Dissemos tudo bem, então a rolagem é importante.
Facebook na Edge Conference
Os usuários de dispositivos móveis esperam conseguir entrar e sair rapidamente. O site mais rápido vai gerar mais engajamento.
Gerenciamento de desempenho
O Chrome vem com um ótimo conjunto de ferramentas para desenvolvedores. Neste artigo, você vai aprender a usar essas ferramentas para criar o perfil do seu site para dispositivos móveis. Se você já conhece o Chrome DevTools, ótimo! Caso contrário, confira estes tutoriais:
Agora que você está atualizado, vamos ver como acelerar seu site móvel com as Ferramentas do desenvolvedor. Se esta é a primeira vez que você usa o Chrome DevTools para Android, confira o guia de início rápido na parte de baixo do artigo.
Como usar o Chrome DevTools remotamente
Com o dispositivo Android conectado ao computador. No Chrome para computador, navegue até http://localhost:9222 e, no dispositivo Android, abra seu site. Você vai acessar uma lista de guias abertas no seu dispositivo Android. Escolha a página na lista de "Páginas inspecionáveis".
e você será direcionado para o Chrome DevTools dessa página.
Ah, a barra de ferramentas do Chrome DevTools está ali. O mais importante a entender sobre o Chrome DevTools remoto é que ele é o mesmo que você usa hoje no computador. A única diferença é que o dispositivo Android é responsável apenas pela página, enquanto o computador é responsável pelo DevTools. Por trás dos bastidores, os mesmos dados são coletados e a mesma funcionalidade está disponível.
Por exemplo, acessei www.sfgate.com/movies no meu smartphone. Usando o Chrome DevTools no computador, passei o cursor sobre uma div na ferramenta Elementos e, assim como no computador, a div foi destacada visualmente no meu dispositivo Android.
A ferramenta Elementos também pode ser usada para ativar e desativar estilos, o que será útil quando tentarmos investigar os tempos de pintura.
Iluminação do acesso à rede
O desempenho da rede é importante, e ainda mais na Web para dispositivos móveis. Os dispositivos móveis geralmente têm conexões mais lentas do que os computadores desktop e laptop. Para garantir que você está fazendo a coisa certa, tire uma imagem da rede acessando a Ferramenta de rede e pressionando o botão de gravação.
A captura de tela mostra o tráfego de rede resultante de uma pesquisa no Google. Observe as solicitações de rede feitas pelo seu site e encontre maneiras de minimizá-las. Se o site fizer solicitações de pesquisa ao servidor, é recomendável prestar atenção à atividade do usuário e evitar a pesquisa quando o usuário estiver inativo. A ferramenta de rede permite que você visualize os cabeçalhos HTTP brutos, o que é útil caso as redes móveis os alterem.
Otimização dos tempos de pintura
Um dos maiores gargalos nos 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 um elemento é caro para pintar, ele retarda a pintura de toda a página. 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, limitando 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 no computador. Para ter a rolagem responsiva, é necessário minimizar os tempos de pintura.
O Chrome 25 inclui o modo de nova pintura contínua de página. O modo de repintura contínua da página nunca armazena em cache os elementos pintados e, em vez disso, pinta todos os elementos em cada frame. Ao forçar todos os elementos a serem pintados em cada frame, é possível realizar testes A/B dos tempos de pintura alternando a ativação e desativação de elementos e estilos. Embora o processo seja manual, é uma ferramenta valiosa para rastrear o custo de pintura de cada elemento na página. A primeira regra do clube de otimização é medir o que você está tentando otimizar para ter uma referência. Vamos usar um exemplo simples.
Primeiro, ative o modo de repintura contínua da página:
Depois de ativar, 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 pintura, em milissegundos. Você pode ver que, no meu dispositivo, a página leva 14 milissegundos para ser renderizada. Os tempos mínimos e máximos de pintura também são mostrados junto com a memória da GPU usada.
Como experimento, defini o estilo do elemento selecionado como display: none. Vamos ver o custo
da pintura da página agora.
Os tempos de exibição foram de cerca de 14 milissegundos por frame para 4 milissegundos por frame. Em outras palavras, a pintura de um elemento levou aproximadamente 10 milissegundos. Ao seguir o processo de ativar e desativar elementos e ativar e desativar estilos, é possível restringir rapidamente as partes caras da página. Lembre-se de que tempos de pintura mais rápidos significam menos lentidão, bateria mais longa e mais engajamento dos usuários. Quando estiver tudo pronto para se aprofundar, leia este ótimo artigo sobre o modo de repintura contínua de páginas.
Recursos avançados
about:tracing
Muitos dos recursos mais avançados para desenvolvedores disponíveis no Chrome para computadores 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, talvez você esteja usando about:tracing. Se você ainda não conhece o 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 Chrome no Android. Siga estas etapas para começar:
- Baixar o adb_trace.py
- Executar adb_trace.py na linha de comando
- Usar o Chrome no Android
- Pressione Enter na linha de comando para encerrar 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 de início
Agora que analisamos o que o Chrome DevTools remoto pode fazer, vamos abordar como começar sua sessão de depuração remota. Se você ainda não usou esses recursos, leia as instruções detalhadas sobre como começar. Se você já usou, mas esqueceu como fazer isso, também incluí instruções abreviadas aqui.
1. Instalar o SDK do Android
Talvez você esteja se perguntando por que é necessário instalar o SDK do Android ao desenvolver para a Web. O SDK inclui o adb (Android Debug Bridge). O Chrome para computadores precisa se comunicar com seu dispositivo Android. O Chrome não se comunica diretamente com o dispositivo Android, mas encaminha 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-o.
3. Conecte-se ao dispositivo
Conecte o dispositivo Android ao computador por USB, caso ainda não tenha feito isso. Se esta for a primeira vez que você usar a depuração USB, o seguinte comando será exibido:
Se você for realizar sessões de depuração remota com frequência, recomendamos marcar "Sempre permitir neste computador".
4. Verifique se o dispositivo está conectado corretamente
Execute adb devices no prompt de comando. O dispositivo vai aparecer na lista.
5. Ativar a depuração USB no Chrome
Abra Settings > Advanced > DevTools e marque a opção Ativar a depuração da Web via USB, conforme mostrado aqui:
6. Criar uma conexão do DevTools com o dispositivo Android
Execute este comando:
adb forward tcp:9222 localabstract:chrome_devtools_remote
cria uma ponte entre a máquina de mesa e o dispositivo Android por meio do adb. Se você tiver problemas para chegar a esse ponto, leia as instruções detalhadas de configuração aqui.
7. Confirmando sua identidade
Verifique se o dispositivo está conectado corretamente abrindo o Chrome na área de trabalho e navegando até http://localhost:9222. Se você receber um 404, outro erro ou não encontrar algo como o seguinte:
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 encontrar rapidamente informações importantes na sua página. É seu dever como criador de sites para dispositivos móveis garantir que a página carregue rapidamente e tenha um bom desempenho em dispositivos móveis. Caso contrário, o engajamento do usuário vai cair. As Ferramentas do desenvolvedor do Chrome remoto são funcionalmente equivalentes às versões 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 performance, e seu site também não. Sites com bom desempenho têm mais engajamento dos usuários.