#perfmatters: técnicas de ferramentas para os ninjas de desempenho
Conhecer suas ferramentas de desenvolvimento é fundamental para se tornar um especialista em desempenho. A Colt percorreu os três pilares do desempenho: rede, computação e renderização, oferecendo um tour pelos principais problemas em cada área e pelas ferramentas disponíveis para localizá-los e erradicá-los.
- Agora você pode criar perfis do Chrome no Android com as DevTools que você conhece e adora no computador.
- O loop de iteração do trabalho de desempenho é: coletar dados, obter insights e agir.
- Priorize os recursos que estão no caminho crítico de renderização para suas páginas.
- Evite pintar; é muito caro.
- Evite rotatividade de memória e execução de código durante momentos críticos no seu app.
#perfmatters: como otimizar o desempenho da rede
Rede e latência normalmente representam 70% do tempo total de carregamento da página de um site. Essa é uma porcentagem grande, mas também significa que qualquer melhoria que você fizer colherá enormes benefícios para seus usuários. Nesta palestra, Ilya acompanhou as alterações recentes no Chrome que melhorarão o tempo de carregamento, bem como algumas alterações que você pode fazer em seu ambiente para ajudar a manter a carga da rede em um mínimo absoluto.
- O Chrome M27 tem um programador de recursos novo e aprimorado.
- O Chrome M28 deixou os sites do SPDY (ainda) mais rápidos.
- O cache simples do Chrome foi reformulado.
- SPDY / HTTP/2.0 oferecem grandes melhorias na velocidade de transferência. Há módulos SPDY maduros disponíveis para nginx, Apache e Jetty (para citar apenas três).
- O QUIC é um novo protocolo experimental baseado no UDP. nos primeiros dias, mas, no entanto, os usuários vencem.
#perfmatters: layout e renderização de 60 fps
Alcançar 60 fps nos seus projetos está diretamente correlacionado com o envolvimento do usuário e é crucial para o seu sucesso. Nesta palestra, Nat e Tom falaram sobre o pipeline de renderização do Chrome, algumas causas comuns de queda de frames 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 é extremamente cara. Uma Tempestade de Pintura é quando você repete trabalhos de pintura caros sem necessidade.
- As camadas são usadas para armazenar elementos pintados em cache.
- Os gerenciadores de entrada (detectores de toque e de roda do mouse) podem eliminar a capacidade de resposta. evitá-los sempre que possível. Onde você não pode reduzi-los ao mínimo.
#perfmatters: apps da Web instantâneos 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. Priorizar a entrega de recursos no caminho crítico de renderização é obrigatório, principalmente para usuários em dispositivos com restrições de rede, como smartphones em redes celulares. Bryan explicou como a equipe do Google passou pelo processo de identificar e priorizar os recursos para o site do PageSpeed Insights, passando de um tempo de carregamento de 20 segundos para pouco mais de 1 segundo.
- Elimine JavaScript e CSS que bloqueiam a renderização.
- Priorize conteúdo visível.
- Carregue scripts de forma assíncrona.
- Renderize a visualização inicial no lado do servidor como HTML e aumente com JavaScript.
- Minimize o CSS de bloqueio de renderização. entregar apenas os estilos necessários para exibir a janela de visualização inicial e, em seguida, entregar o restante.
- Grandes URIs de dados embutidos no CSS de bloqueio de renderização são prejudiciais para o desempenho da renderização. eles bloqueiam recursos em que os URLs de imagem não causam bloqueio.