O melhor da monitoração de web performance

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.

Transcript

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