o melhor da 
monitoração de 
web performance 
Davidson Fellipe
senior front-end engineer 
globo.com ~ 2010 
front in bh, rio.js, pernambuco.js e 
front in recife 
mais em fellipe.com
https://github.com/globocom/iwanttoworkatglobocom
performance
“ 
designa as apresentações de 
dança, canto, teatro, mágica, 
mímica, malabarismo, 
referindo-se ao seu executante 
como ...
https://www.flickr.com/photos/joshholmes/9596598726
“ 
é possível expressar a 
performance do que se 
pretende avaliar utilizando-se 
uma métrica previamente 
definida. 
wiki...
alto processamento 
+ 
consumo de memória
“ 
Performance golden rule: 
Optimize front-end 
performance first, that's where 
80/90% of the end-user 
response time is...
94% 
tempo de 
carregamento 
http://gtmetrix.com/har.html?inputUrl=http://gtmetrix.com/reports/globoesporte.globo.com/7eqN...
web performance 
é 
user experience
usuários 
satisfeitos
+ engajamento 
https://twitter.com/igrigorik/status/300226402496704512
o que 
irrita?
paciência de 
usuários mobile 
49% 
31% 
20% 
1s - 10 s 
10s - 20s 
+20s 
gomesz.com e akamai.com
análise 
estática
gzip, sprites, concatenar 
css e js, css no head, cache 
expires, js embaixo, 
minificar, uglify
reduzir requests 
criar sprites 
concatenar css e js 
data-uri
paralelismo 
CDNs 
diferentes domínios
reduzir tráfego 
minificar js, css, img e html 
domínios sem cookies 
gzip
https://developers.google.com/speed/pagespeed/module/download
PageSpeed 
criado pela google em 2010 
plugin para chrome e firefox 
avalia 27 regras 
API aberta limitada a 25k reqs/dia ...
Yslow 
criado pela yahoo! em 2007 
plugin para chrome e firefox 
avalia 23 critérios 
código aberto
yslow e 
pagespeed 
não escalam
via 
task 
runners
http://gulpjs.com/
http://gruntjs.com/
Title Text 
https://github.com/jrcryer/grunt-pagespeed
grunt-pagespeed 
pagespeed: { 
options: { 
nokey: true, 
url: "https://fellipe.com" 
}, 
paths: { 
options: { 
paths: ["/t...
grunt-wpt 
grunt.initConfig({ 
wpt: { 
options: { 
locations: ['Tokyo', 'SanJose_IE9'], 
key: process.env.WPT_API_KEY 
}, ...
Title Text 
https://github.com/sideroad/grunt-wpt
workflow com 
gruntjs e gulp 
https://github.com/ 
davidsonfellipe/grunt-workflow 
http://yeoman.io/blog/ 
performance-opt...
http://globoesporte.globo.com/eu-atleta/calendario.html
via 
task 
runners
Apenas um share! 
- qual é o valor 
desse elemento 
na interface? 
- posso retardar o 
carregamento? 
- como melhoro a 
pe...
Solução 
- imagem fake 
- carregamento 
dependente do scroll 
- reduzindo cerca de 40 
requests
tools para 
monitoração
Cenário com 
monitoração 
qa 
deploy 
produção 
dev 
feature 
ou 
bug fix 
deploy 
keepfast 
redução de 
performance
http://www.webpagetest.org/
http://www.webpagetest.org/
Webpagetest 
criado pela AOL em 2008 
teste de velocidade 
geolocalizado 
permite especificar o browser 
mantido pela goog...
http://www.showslow.com/
showslow 
http://www.showslow.com/details/1283344/http://fellipe.com/
showslow 
url
showslow 
http://www.showslow.com/details/1283344/http://fellipe.com/
https://github.com/macbre/phantomas
phantomas 
número de eventos via jQuery, 
chamadas para window.write 
seletores complexos e duplicados 
(via analisar-css)...
https://github.com/davidsonfellipe/keepfast
https://github.com/davidsonfellipe/keepfast
wrappers baseados 
em phantomjs 
https://github.com/jmervine/ 
node-yslowjs 
https://github.com/addyosmani/ 
psi
Pagespeed 
Insights 
With 
Reporting 
term
algumas soluções 
pagas 
http://gtmetrix.com/ 
https://www.pingdom.com/ 
https://www.dareboost.com/ 
http://newrelic.com/b...
“ 
um ser 
A adição de novas 
funcionalidades pode ser um 
bom momento para melhorias 
na página atual
A A A A A 
no WPT não garante 
que você está livre 
de problemas 
de performance
SPOF 
dependências de terceiros 
aumento do número de 
requests 
imagens sem compressão 
imagens que poderiam ser 
sprites
Há um mundo 
de conhecimento 
em busca do 60 FPS
http://google.github.io/tracing-framework/
referências
http://browserdiet.com/pt
https://github.com/davidsonfellipe/awesome-wpo
“ 
você não pode otimizar o que 
você não pode mensurar 
Anônimo
twitter.com/davidsonfellipe 
github.com/davidsonfellipe 
fellipe.com/talks
O melhor da monitoração de web performance
O melhor da monitoração de web performance
O melhor da monitoração de web performance
O melhor da monitoração de web performance
O melhor da monitoração de web performance
O melhor da monitoração de web performance
Próximos SlideShares
Carregando em…5
×

O melhor da monitoração de web performance

1.652 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
16 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.652
No SlideShare
0
A partir de incorporações
0
Número de incorporações
98
Ações
Compartilhamentos
0
Downloads
16
Comentários
0
Gostaram
16
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

×