Introdução
Hoje em dia, a coisa mais importante que você pode fazer pelo seu site é garantir que ele funcione bem quando acessado por um smartphone ou tablet. Continue lendo e saiba como otimizar seu site para o navegador para dispositivos móveis usando o Chrome DevTools e um dispositivo Android.
Por que é tão importante otimizar para a Web para dispositivos móveis?
Desempenho
Os dispositivos móveis estão recebendo CPUs mais rápidas, mais RAM, GPUs mais rápidas e acesso à rede mais rápido à medida que fazemos a transição de 2G e 3G para 4G. Apesar do ritmo do progresso, os dispositivos móveis têm menos capacidade do que os computadores. Em termos mais concretos, o carregamento de recursos de rede, a descompactação de imagens, a pintura da página e a execução de scripts demoram mais. É seguro presumir que sua página é executada de 5 a 10 vezes mais lentamente em um dispositivo móvel.
Bateria
Os dispositivos móveis são alimentados exclusivamente por 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 de bateria. Quando você busca um recurso, o rádio Wi-Fi ou celular precisa estar ligado, 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ê. No Facebook, nos preocupamos com a rolagem. Em um teste A/B, reduzimos a velocidade de rolagem de 60 fps para 30 fps. Engajamento recolhido. Dissemos que sim, portanto, a rolagem é importante.
Facebook na Edge Conference
Os usuários de dispositivos móveis esperam poder entrar e sair rapidamente. O site mais rápido vai receber mais engajamento.
Gerenciamento de performance
O Chrome vem com um ótimo conjunto de ferramentas para desenvolvedores. Este artigo ensina como usar essas ferramentas para analisar seu site para dispositivos móveis. Se você já conhece o Chrome DevTools, ótimo! Se não, confira estes tutoriais incríveis:
Agora que você já sabe o que é o DevTools, vamos ver como acelerar seu site para dispositivos móveis com ele. Se esta for a primeira vez que você usa o Chrome DevTools para Android, confira o guia de iniciação na parte de baixo do artigo.
Usar o Chrome DevTools remotamente
Com o dispositivo Android conectado ao computador. No Chrome para computador, acesse http://localhost:9222 e, no dispositivo Android, abra o site. Você vai ver uma lista de guias abertas no dispositivo Android. Escolha sua página na lista "Páginas inspecionáveis".
e você vai acessar o Chrome DevTools dessa página.
Ah… a barra de ferramentas do Chrome DevTools está bem ali. O mais importante sobre o Chrome DevTools remoto é que ele é o mesmo DevTools 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. Nos bastidores, os mesmos dados são coletados e as mesmas funcionalidades estão disponíveis.
Por exemplo, acessei www.sfgate.com/movies no meu smartphone. Usando o Chrome DevTools no meu computador, passei o cursor sobre uma div na ferramenta Elements e, assim como no computador, a div foi destacada visualmente no meu dispositivo Android.
A ferramenta Elements também pode ser usada para ativar e desativar estilos, o que será útil quando tentarmos investigar os tempos de pintura.
Esclarecimento sobre o acesso à rede
A performance da rede é importante, e é ainda mais importante na Web para dispositivos móveis. Os dispositivos móveis geralmente têm conexões mais lentas do que os computadores e laptops. Para garantir que você está fazendo a coisa certa, faça um snapshot de rede acessando a ferramenta de rede e pressionando "Gravar".
A captura de tela mostra o tráfego de rede resultante de uma Pesquisa Google. Observe as solicitações de rede que seu site faz e encontre maneiras de minimizá-las. Se o site fizer solicitações de sondagem ao servidor, preste atenção à atividade do usuário e evite a sondagem quando ele estiver inativo. A ferramenta de rede permite que você veja os cabeçalhos HTTP brutos, o que é útil caso as redes móveis os estejam alterando.
Otimizar os 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 desacelera a pintura de toda a página. O Chrome tenta armazenar em cache elementos renderizados 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 é que mais pinturas são feitas e cada uma delas é mais lenta do que no computador. Para ter uma rolagem responsiva, é preciso minimizar os tempos de pintura.
O Chrome 25 inclui o modo de repintura contínua de páginas. O modo de repintura contínua de página nunca armazena em cache os elementos pintados e, em vez disso, pinta todos os elementos em cada frame. Ao forçar a pintura de todos os elementos em cada frame, é possível realizar testes A/B de tempos de pintura ativando e desativando 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 analisar um exemplo simples.
Primeiro, ative o modo de repintura contínua de página:
Depois de ativar, um gráfico vai aparecer no canto superior direito do seu 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. No meu dispositivo, a página leva 14 milissegundos para ser renderizada. Os tempos de pintura mínimo e máximo também são mostrados, junto com a memória de GPU usada.
Como teste, defini o estilo do elemento selecionado como display: none. Vamos ver como ficou o custo
de pintura da página agora.
Os tempos de pintura caíram de cerca de 14 milissegundos por frame para 4 milissegundos por frame. Em outras palavras, a pintura desse elemento levou aproximadamente 10 milissegundos. Ao seguir o processo de ativar e desativar elementos e estilos, você pode identificar rapidamente as partes mais pesadas da página. Lembre-se de que tempos de pintura mais rápidos significam menos instabilidade, maior duração da bateria e mais engajamento dos usuários. Quando quiser se aprofundar, leia este ótimo artigo sobre o modo de repintura contínua de páginas.
Recursos avançados
about:tracing
Muitos dos recursos para desenvolvedores mais avançados 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 identificar a causa. 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 para Android. Siga estas etapas para começar:
- Faça o download de 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 adb_trace.py for concluído, você terá um arquivo JSON que pode ser carregado no about:tracing do Chrome para computador.
Guia de inicialização
Agora que analisamos o que o Chrome DevTools remoto pode fazer, vamos falar sobre como iniciar sua sessão de depuração remota. Se você nunca usou esses recursos, leia as instruções detalhadas sobre como começar. Se você já os usou, mas esqueceu exatamente como, também listei instruções resumidas aqui.
1. Instalar o SDK do Android
Talvez você esteja se perguntando por que precisa instalar o SDK do Android ao desenvolver para a Web. O SDK inclui o adb (Android Debug Bridge). O Chrome para computador precisa se comunicar com o dispositivo Android. O Chrome não se comunica diretamente com o dispositivo Android. Em vez disso, ele 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. Conectar ao dispositivo
Conecte o dispositivo Android ao computador usando um cabo USB, caso ainda não tenha feito isso. Se esta for a primeira vez que você usa a depuração USB, o seguinte prompt vai aparecer:
Se você for fazer sessões de depuração remota com frequência, recomendo marcar "Sempre permitir neste computador".
4. Verificar se o dispositivo está conectado corretamente
Execute adb devices no prompt de comando. Seu dispositivo vai aparecer na lista.
5. Ativar a depuração USB no Chrome
Abra Configurações > Avançado > DevTools e marque a opção Ativar depuração USB da Web, como 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 seu computador e o dispositivo Android usando o adb. Se você tiver problemas para chegar até aqui, 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 no computador e acessando http://localhost:9222. Se você receber um erro 404, outro erro ou não encontrar algo como o seguinte:
Leia as instruções de configuração detalhadas aqui.
Conclusão
Os usuários de dispositivos móveis geralmente estão com pressa e precisam acessar rapidamente as informações importantes da sua página. Como criador de sites móveis, é seu dever garantir que o carregamento de página seja rápido e tenha um bom desempenho em dispositivos móveis. Caso contrário, o engajamento do usuário vai cair. O Chrome DevTools remoto é funcionalmente equivalente ao do computador. A interface é parecida o suficiente para que você não precise aprender a usar um novo conjunto de ferramentas. Em outras palavras, seu fluxo de trabalho é mantido. Lembre-se: o Facebook não é imune a problemas de desempenho, e seu site também não. Sites com bom desempenho têm mais engajamento do usuário.