Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Métricas de performance no client side

Métricas de performance no client side

Dicas de cuidados com a performance das aplicações front end no navegador.

William Oliveira

February 10, 2021
Tweet

More Decks by William Oliveira

Other Decks in Programming

Transcript

  1. William Oliveira Front End Software Engineer - Escale Digital Coordenador

    Educacional - @tecnogueto Podcaster - @_malabarizando
  2. O valor da performance Preciso enviar um documento para meu

    empregador e x minutos, mas o site não carrega Preciso ativar uma funcionalidade remota para desbloquear a catraca do pedágio Preciso finalizar a compra de um medicamento muito importante para minha saúde
  3. A sensação de velocidade depende de contexto Uma pessoa com

    internet de velocidade contratada de 1Mb só vai acreditar que a aplicação é ruim quando realmente for muito ruim. Uma pessoa com internet de 50Mb+ vai perceber a diferença gritante de velocidade de uma aplicação para outra.
  4. Métricas de performance Bundle size Download time CPU execution time

    Network less download bytes less time to parse less content time download Render perceived performance interaction productivity happiness
  5. Bundle size split components components lazy load dynamic imports compress

    images minify HTML minify CSS minify + uglify JS gzip
  6. Network server cache application cache server time to first byte

    (backend and infra performance) CDN prefetching
  7. Render first contentful paint speed index first meaningful paint time

    to interactive first input delay first CPU idle largest contentful paint total blocking time layout shifts