Extreme WebPerformance    Leo Balter  WPMeetupRJ 2012
https://reps.mozilla.org/u/leobalter/
Jaydson.org http://goo.gl/IDefJ
Steve Souders                 High Performance Web Sites    "Performance golden rule: Optimize front-endperformance first,...
80 a 90% do tempo de resposta ao usuário está no frontend!
Por que?
Google• Velocidade do site afeta o seu ranking nas  buscas (Webmaster Central Blog)             http://goo.gl/h3FX3
Amazon• +100ms = -1% de vendas• ~ $67 milhões/dia• 1seg = - $2.4 bilhões por ano!             http://goo.gl/zSd8q
Shopzilla.com• -5 segunos = + conversão (7 a 12%)• 2x referências em sites de busca• 50% servidores necessários           ...
Tamanho também é   velocidade
Terra
Psicologia da Performance               http://goo.gl/mecWn           Parece mais lento quando:•   desagradável•   desconh...
Psicologia da Performance                http://goo.gl/mecWn                 Efeitos da espera•   Irritação•   Estresse•  ...
1 segundo• 11% de page views• 7% de conversão• 16% Satisfação do consumidor
http://goo.gl/YHygR
Comportamento         Não otimizado       Otimizado Bounce Rate              14,35%           13,38% Páginas / Visita     ...
Ferramentas• Yahoo YSlow• Google PageSpeed• Abas de “Rede” nos DevTools (Firefox,  Chrome e Opera)• WebPageTest
LazyLoad• <script async src=”file.js”></script>• YepNope.js
Unificar e Minimizar• JavaScript• CSS• Imagens (Background Sprites)
Javascript• UglifyJS• PimpMyJs.com• Google Closure Compiler
CSS• Sqwish - https://github.com/ded/sqwish• YUI CSS Compressor
Imagens• YSlow Smush.it http://goo.gl/gk1XQ• Photoshop / GIMP
CDN• Pense nos cookies!
Código ruim afeta     performance!• HTML, CSS e Javascript• Validação W3C, CSSLint e JSHint!
Wordpress• W3 Total Cache: • Closure Compiler (JS) • YUI Compressor (CSS) • HTML Tidy
Wordpress• W3 Total Cache: • Unifica e Minimiza tudo! • mas...
Grunt!• via node.js• https://github.com/cowboy/grunt/
jQuery• + recente = + performance• fuja de anti padrões
Seletores jQuery    $(‘#minha_id’)+    $(‘div’)    $(‘div.classes’)    $(‘.classes’)-   $(‘[atributo]’)
$(‘div.classes’).show();$(‘div.classes’).css(‘color’, ‘red’);$(‘div.classes’).click();var elems = $(‘div.classes’);elems.s...
Tempo no consoleconsole.time(‘minha tarefa’);$(‘div.classes’).show();$(‘div.classes’).css(‘color’, ‘red’);$(‘div.classes’)...
JS: esquerda pra direita      $(‘#menu li a’)
CSS: direita pra esquerda   #menu li a {       text-decoration: none;   }             WTF!
CSS: direita pra esquerda   .menuLink {       text-decoration: none;   }Mais rápido! (no CSS)
CSS Faz diferença!
Viagem no tempo
1   var a = Date.now(), 2     b, 3     i = 0; 4 5   while (i < 1000) { 6     ++i; 7     if (i % 100 === 0) { 8       conso...
1002003004005006007008009001000valor de i: 1000tempo em ms: 8user!0m0.048s
Percepções• Toque• Visão• Resposta do Console
Extreme Web Performance
Extreme Web Performance
Extreme Web Performance
Extreme Web Performance
Extreme Web Performance
Upcoming SlideShare
Loading in …5
×

Extreme Web Performance

1,744 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,744
On SlideShare
0
From Embeds
0
Number of Embeds
176
Actions
Shares
0
Downloads
14
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Extreme Web Performance

  1. 1. Extreme WebPerformance Leo Balter WPMeetupRJ 2012
  2. 2. https://reps.mozilla.org/u/leobalter/
  3. 3. Jaydson.org http://goo.gl/IDefJ
  4. 4. Steve Souders High Performance Web Sites "Performance golden rule: Optimize front-endperformance first, thats where 80/90% of the end-user response time is spent."
  5. 5. 80 a 90% do tempo de resposta ao usuário está no frontend!
  6. 6. Por que?
  7. 7. Google• Velocidade do site afeta o seu ranking nas buscas (Webmaster Central Blog) http://goo.gl/h3FX3
  8. 8. Amazon• +100ms = -1% de vendas• ~ $67 milhões/dia• 1seg = - $2.4 bilhões por ano! http://goo.gl/zSd8q
  9. 9. Shopzilla.com• -5 segunos = + conversão (7 a 12%)• 2x referências em sites de busca• 50% servidores necessários http://goo.gl/AMCx2
  10. 10. Tamanho também é velocidade
  11. 11. Terra
  12. 12. Psicologia da Performance http://goo.gl/mecWn Parece mais lento quando:• desagradável• desconhecido• chato• muita coisa pra acompanhar• nunca coloque muitos• marcadores• em um slide• nunca• é difícil de analisar
  13. 13. Psicologia da Performance http://goo.gl/mecWn Efeitos da espera• Irritação• Estresse• Colesterol alto• Morte!
  14. 14. 1 segundo• 11% de page views• 7% de conversão• 16% Satisfação do consumidor
  15. 15. http://goo.gl/YHygR
  16. 16. Comportamento Não otimizado Otimizado Bounce Rate 14,35% 13,38% Páginas / Visita 11,04 15,64Tempo médio no 0:23:50 0:30:10 site http://goo.gl/iz5qc
  17. 17. Ferramentas• Yahoo YSlow• Google PageSpeed• Abas de “Rede” nos DevTools (Firefox, Chrome e Opera)• WebPageTest
  18. 18. LazyLoad• <script async src=”file.js”></script>• YepNope.js
  19. 19. Unificar e Minimizar• JavaScript• CSS• Imagens (Background Sprites)
  20. 20. Javascript• UglifyJS• PimpMyJs.com• Google Closure Compiler
  21. 21. CSS• Sqwish - https://github.com/ded/sqwish• YUI CSS Compressor
  22. 22. Imagens• YSlow Smush.it http://goo.gl/gk1XQ• Photoshop / GIMP
  23. 23. CDN• Pense nos cookies!
  24. 24. Código ruim afeta performance!• HTML, CSS e Javascript• Validação W3C, CSSLint e JSHint!
  25. 25. Wordpress• W3 Total Cache: • Closure Compiler (JS) • YUI Compressor (CSS) • HTML Tidy
  26. 26. Wordpress• W3 Total Cache: • Unifica e Minimiza tudo! • mas...
  27. 27. Grunt!• via node.js• https://github.com/cowboy/grunt/
  28. 28. jQuery• + recente = + performance• fuja de anti padrões
  29. 29. Seletores jQuery $(‘#minha_id’)+ $(‘div’) $(‘div.classes’) $(‘.classes’)- $(‘[atributo]’)
  30. 30. $(‘div.classes’).show();$(‘div.classes’).css(‘color’, ‘red’);$(‘div.classes’).click();var elems = $(‘div.classes’);elems.show();elems.css(‘color’, ‘red’);elems.click();
  31. 31. Tempo no consoleconsole.time(‘minha tarefa’);$(‘div.classes’).show();$(‘div.classes’).css(‘color’, ‘red’);$(‘div.classes’).click();console.timeEnd(‘minha tarefa’);
  32. 32. JS: esquerda pra direita $(‘#menu li a’)
  33. 33. CSS: direita pra esquerda #menu li a { text-decoration: none; } WTF!
  34. 34. CSS: direita pra esquerda .menuLink { text-decoration: none; }Mais rápido! (no CSS)
  35. 35. CSS Faz diferença!
  36. 36. Viagem no tempo
  37. 37. 1 var a = Date.now(), 2 b, 3 i = 0; 4 5 while (i < 1000) { 6 ++i; 7 if (i % 100 === 0) { 8 console.log(i); 9 }10 }1112 b = Date.now();1314 console.log(valor de i: + i);15 console.log(tempo em ms: + (b - a));
  38. 38. 1002003004005006007008009001000valor de i: 1000tempo em ms: 8user!0m0.048s
  39. 39. Percepções• Toque• Visão• Resposta do Console

×