#perfmatters: técnicas de ferramentas para o ninja da performance
Conhecer bem as ferramentas de desenvolvimento é fundamental para se tornar um especialista em performance. Colt abordou os três pilares de performance: rede, computação e renderização, apresentando um tour pelo principal problema em cada área e as ferramentas disponíveis para encontrá-los e eliminá-los.
- Agora você pode criar perfis do Chrome no Android com as DevTools que você já conhece no computador.
- O ciclo de iteração para o trabalho de performance é o seguinte: coletar dados, gerar insights e tomar medidas.
- Priorize os recursos que estão no caminho de renderização crítico das suas páginas.
- Evite pintar, porque é muito caro.
- Evite a rotatividade de memória e a execução de código em 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 da página de um site. Essa é uma porcentagem alta, mas também significa que qualquer melhoria que você fizer vai gerar benefícios enormes para os usuários. Nesta palestra, Ilya explicou as mudanças recentes no Chrome que vão melhorar o tempo de carregamento, além de algumas mudanças que você pode fazer no seu ambiente para manter a carga de rede no mínimo.
- O Chrome M27 tem um novo agendador de recursos aprimorado.
- O Chrome M28 deixou os sites SPDY ainda mais rápidos.
- O cache simples do Chrome passou por uma revisão.
- O SPDY / HTTP/2.0 oferece grandes melhorias na velocidade de transferência. Há módulos SPDY avançados disponíveis para nginx, Apache e Jetty, para citar apenas três.
- O QUIC é um protocolo novo e experimental criado com base no UDP. Ainda está nos primeiros dias, mas, seja como for, os usuários vão sair ganhando.
#perfmatters: layout e renderização de 60 fps
Alcançar 60 fps nos seus projetos está diretamente relacionado ao engajamento do usuário e é crucial para o sucesso. Nesta 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. Ele 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 desnecessariamente.
- As camadas são usadas para armazenar em cache elementos pintados.
- Os processadores de entrada (listeners de toque e roda do mouse) podem acabar com a capacidade de resposta. Evite esse recurso. Onde não é possível manter o mínimo.
#perfmatters: apps da Web para dispositivos móveis instantâneos
O caminho de renderização crítico se refere a qualquer coisa (JavaScript, HTML, CSS, imagens) que o navegador precisa antes de começar a pintar a página. É essencial priorizar a entrega de recursos no caminho de renderização crítico, 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 identificação e priorização dos recursos do site do PageSpeed Insights, reduzindo o tempo de carregamento de 20 segundos para pouco mais de 1 segundo.
- Elimine JavaScript e CSS que bloqueiam a renderização.
- Priorize o conteúdo visível.
- Carregar scripts de forma assíncrona.
- Renderizar a visualização inicial no servidor como HTML e aumentar com JavaScript.
- Minimize o CSS de bloqueio de renderização. Forneça apenas os estilos necessários para mostrar a viewport inicial e, em seguida, o restante.
- URIs de dados grandes inline em CSS que bloqueia a renderização são prejudiciais para a performance de renderização. Eles bloqueiam recursos em que os URLs de imagem não são bloqueados.