Métricas de performance no client side

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

Transcript

1. Métricas de performance no client side
2. William Oliveira Front End Software Engineer - Escale Digital Coordenador Educacional - @tecnogueto Podcaster - @_malabarizando
3. Pra você, quão importante é a performance de uma aplicação?
4. 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
5. 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.
6. Performance é experiência de usuário Pensar em performance impacta totalmente o contexto social dos nossos usuários.
7. Como podemos ajudar o usuário
8. 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
9. Bundle size split components components lazy load dynamic imports compress images minify HTML minify CSS minify + uglify JS gzip
12. Network server cache application cache server time to first byte (backend and infra performance) CDN prefetching
13. 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
16. Conclusão
17. Dúvidas? William Oliveira linktr.ee/malabarizando