#perfmatters: técnicas de ferramentas para os ninjas de desempenho
Conhecer as ferramentas de desenvolvimento é fundamental para se tornar um especialista em performance. A Colt acompanhou os três pilares do desempenho: rede, computação e renderização, apresentando um tour do problema principal em cada área e as ferramentas disponíveis para encontrá-los e erradicar esses problemas.
- Agora é possível criar perfis para o Chrome no Android com as DevTools que você conhece e adora no computador.
- O loop de iteração para o trabalho de desempenho é: reunir dados, conseguir insights e agir.
- Priorize os recursos que estão no caminho crítico de renderização das páginas.
- Evite pintar. Isso é muito caro.
- Evite rotatividade de memória e execute códigos durante momentos críticos no app.
#perfmatters: Como otimizar o desempenho da rede
A rede e a latência geralmente representam 70% do tempo total de carregamento de página de um site. Essa porcentagem é grande, mas também significa que as melhorias que você fizer terão grandes benefícios para os usuários. Nessa palestra, Ilya analisou as mudanças recentes no Chrome que melhoram o tempo de carregamento, além de algumas mudanças que você pode fazer no seu ambiente para ajudar a manter a carga da rede em um mínimo absoluto.
- O Chrome M27 tem um agendador de recursos novo e aprimorado.
- O Chrome M28 tornou os sites de SPDY (ainda) mais rápidos.
- O cache simples do Chrome foi reformulado.
- O SPDY / HTTP/2.0 oferece grandes melhorias na velocidade de transferência. Existem módulos SPDY consolidados disponíveis para nginx, Apache e local (para citar apenas três).
- O QUIC é um protocolo novo e experimental baseado no UDP. Ele ainda está no início, mas parece que os usuários vencerão.
#perfmatters: layout e renderização de 60 fps
Atingir 60 fps em seus projetos está diretamente correlacionado ao engajamento do usuário e é crucial para o sucesso. Nessa palestra, Nat e Tom falaram sobre o pipeline de renderização do Chrome, algumas causas comuns de frames perdidos e como evitá-los.
- Um frame tem 16 ms de duração. Ela contém JavaScript, cálculos de estilo, pintura e composição.
- A pintura é extremely cara. Uma tempestade de pinturas é quando você repete desnecessariamente trabalhos de pintura caros.
- As camadas são usadas para armazenar em cache os elementos pintados.
- Os gerenciadores de entrada (ouvintes de toque e roda do mouse) podem eliminar a capacidade de resposta; evite-os se puder. Não é possível reduzir ao máximo.
#perfmatters: apps instantâneos da Web para dispositivos móveis
O Caminho crítico de renderização se refere a tudo (JavaScript, HTML, CSS, imagens) que o navegador exige antes de começar a pintar a página. É essencial priorizar o envio de recursos no caminho crítico de renderização, principalmente para usuários em dispositivos com redes limitadas, como smartphones em redes celulares. Bryan falou sobre como a equipe do Google passou pelo processo de identificação e priorização de recursos para o site PageSpeed Insights, levando o tempo de carregamento de 20 segundos para pouco mais de 1 segundo.
- Elimine JavaScript e CSS que bloqueiam a renderização.
- Priorizar conteúdo visível
- Carregar scripts de forma assíncrona.
- Renderize a visualização inicial do lado do servidor como HTML e aumente com JavaScript.
- Minimize o CSS de bloqueio de renderização. Envie apenas os estilos necessários para exibir a janela de visualização inicial e, em seguida, exiba o restante.
- Grandes URIs de dados inline no CSS bloqueador de renderização são prejudiciais para o desempenho de renderização e bloqueiam recursos em que os URLs de imagem não causam bloqueio.