O melhor da monitoração de web performance

1.834 visualizações

Publicada em

Como encarar os desafios da área de web performance e conhecer quais são as melhores ferramentas para auxiliar o desenvolvimento de páginas rápidas e mantê-las rápidas. Além disso, fazer a integração de algumas dessas ferramentas de uma forma fácil para melhorar a compreensão desses indicadores para toda a equipe de desenvolvimento.

Publicada em: Software
0 comentários
15 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.834
No SlideShare
0
A partir de incorporações
0
Número de incorporações
101
Ações
Compartilhamentos
0
Downloads
16
Comentários
0
Gostaram
15
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

O melhor da monitoração de web performance

  1. 1. o melhor da monitoração de web performance Davidson Fellipe
  2. 2. senior front-end engineer globo.com ~ 2010 front in bh, rio.js, pernambuco.js e front in recife mais em fellipe.com
  3. 3. https://github.com/globocom/iwanttoworkatglobocom
  4. 4. performance
  5. 5. “ designa as apresentações de dança, canto, teatro, mágica, mímica, malabarismo, referindo-se ao seu executante como performer. wikipédia
  6. 6. https://www.flickr.com/photos/joshholmes/9596598726
  7. 7. “ é possível expressar a performance do que se pretende avaliar utilizando-se uma métrica previamente definida. wikipédia
  8. 8. alto processamento + consumo de memória
  9. 9. “ Performance golden rule: Optimize front-end performance first, that's where 80/90% of the end-user response time is spent. - steve souders
  10. 10. 94% tempo de carregamento http://gtmetrix.com/har.html?inputUrl=http://gtmetrix.com/reports/globoesporte.globo.com/7eqNM2Z1/net.harp&expand=true&validate=false
  11. 11. web performance é user experience
  12. 12. usuários satisfeitos
  13. 13. + engajamento https://twitter.com/igrigorik/status/300226402496704512
  14. 14. o que irrita?
  15. 15. paciência de usuários mobile 49% 31% 20% 1s - 10 s 10s - 20s +20s gomesz.com e akamai.com
  16. 16. análise estática
  17. 17. gzip, sprites, concatenar css e js, css no head, cache expires, js embaixo, minificar, uglify
  18. 18. reduzir requests criar sprites concatenar css e js data-uri
  19. 19. paralelismo CDNs diferentes domínios
  20. 20. reduzir tráfego minificar js, css, img e html domínios sem cookies gzip
  21. 21. https://developers.google.com/speed/pagespeed/module/download
  22. 22. PageSpeed criado pela google em 2010 plugin para chrome e firefox avalia 27 regras API aberta limitada a 25k reqs/dia módulos para Apache e Nginx
  23. 23. Yslow criado pela yahoo! em 2007 plugin para chrome e firefox avalia 23 critérios código aberto
  24. 24. yslow e pagespeed não escalam
  25. 25. via task runners
  26. 26. http://gulpjs.com/
  27. 27. http://gruntjs.com/
  28. 28. Title Text https://github.com/jrcryer/grunt-pagespeed
  29. 29. grunt-pagespeed pagespeed: { options: { nokey: true, url: "https://fellipe.com" }, paths: { options: { paths: ["/talks", "/blog"], locale: "en_GB", strategy: "desktop", threshold: 80 }}} js
  30. 30. grunt-wpt grunt.initConfig({ wpt: { options: { locations: ['Tokyo', 'SanJose_IE9'], key: process.env.WPT_API_KEY }, sideroad: { options: { url: [ ‘http://fellipe.com/blog', ‘http://fellipe.com/talks ] }, dest: ‘tmp/fellipe/' }}}); js
  31. 31. Title Text https://github.com/sideroad/grunt-wpt
  32. 32. workflow com gruntjs e gulp https://github.com/ davidsonfellipe/grunt-workflow http://yeoman.io/blog/ performance-optimization.html
  33. 33. http://globoesporte.globo.com/eu-atleta/calendario.html
  34. 34. via task runners
  35. 35. Apenas um share! - qual é o valor desse elemento na interface? - posso retardar o carregamento? - como melhoro a percepção do usuário?
  36. 36. Solução - imagem fake - carregamento dependente do scroll - reduzindo cerca de 40 requests
  37. 37. tools para monitoração
  38. 38. Cenário com monitoração qa deploy produção dev feature ou bug fix deploy keepfast redução de performance
  39. 39. http://www.webpagetest.org/
  40. 40. http://www.webpagetest.org/
  41. 41. Webpagetest criado pela AOL em 2008 teste de velocidade geolocalizado permite especificar o browser mantido pela google código aberto
  42. 42. http://www.showslow.com/
  43. 43. showslow http://www.showslow.com/details/1283344/http://fellipe.com/
  44. 44. showslow url
  45. 45. showslow http://www.showslow.com/details/1283344/http://fellipe.com/
  46. 46. https://github.com/macbre/phantomas
  47. 47. phantomas número de eventos via jQuery, chamadas para window.write seletores complexos e duplicados (via analisar-css) formato de saída JSON e CSV
  48. 48. https://github.com/davidsonfellipe/keepfast
  49. 49. https://github.com/davidsonfellipe/keepfast
  50. 50. wrappers baseados em phantomjs https://github.com/jmervine/ node-yslowjs https://github.com/addyosmani/ psi
  51. 51. Pagespeed Insights With Reporting term
  52. 52. algumas soluções pagas http://gtmetrix.com/ https://www.pingdom.com/ https://www.dareboost.com/ http://newrelic.com/browser-monitoring
  53. 53. “ um ser A adição de novas funcionalidades pode ser um bom momento para melhorias na página atual
  54. 54. A A A A A no WPT não garante que você está livre de problemas de performance
  55. 55. SPOF dependências de terceiros aumento do número de requests imagens sem compressão imagens que poderiam ser sprites
  56. 56. Há um mundo de conhecimento em busca do 60 FPS
  57. 57. http://google.github.io/tracing-framework/
  58. 58. referências
  59. 59. http://browserdiet.com/pt
  60. 60. https://github.com/davidsonfellipe/awesome-wpo
  61. 61. “ você não pode otimizar o que você não pode mensurar Anônimo
  62. 62. twitter.com/davidsonfellipe github.com/davidsonfellipe fellipe.com/talks

×