1. Extreme Web
Performance
Leo Balter
WPMeetupRJ 2012

2. https://reps.mozilla.org/u/leobalter/

4. Jaydson.org
http://goo.gl/IDefJ

5. Steve Souders
High Performance Web Sites
"Performance golden rule: Optimize front-end
performance first, that's where 80/90% of the end-user
response time is spent."

6. 80 a 90% do tempo de resposta
ao usuário está no frontend!

7. Por que?

9. Google
• Velocidade do site afeta o seu ranking nas
buscas (Webmaster Central Blog)
http://goo.gl/h3FX3

10. Amazon
• +100ms = -1% de vendas
• ~ $67 milhões/dia
• 1seg = - $2.4 bilhões por ano!
http://goo.gl/zSd8q

11. Shopzilla.com
• -5 segunos = + conversão (7 a 12%)
• 2x referências em sites de busca
• 50% servidores necessários
http://goo.gl/AMCx2

12. Tamanho também é
velocidade

13. Terra

14. 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

15. Psicologia da Performance
http://goo.gl/mecWn
Efeitos da espera
• Irritação
• Estresse
• Colesterol alto
• Morte!

16. 1 segundo
• 11% de page views
• 7% de conversão
• 16% Satisfação do consumidor

17. http://goo.gl/YHygR

18. Comportamento Não otimizado Otimizado
Bounce Rate 14,35% 13,38%
Páginas / Visita 11,04 15,64
Tempo médio no
0:23:50 0:30:10
site
http://goo.gl/iz5qc

19. Ferramentas
• Yahoo YSlow
• Google PageSpeed
• Abas de “Rede” nos DevTools (Firefox,
Chrome e Opera)
• WebPageTest

20. LazyLoad
• <script async src=”file.js”></script>
• YepNope.js

21. Unificar e Minimizar
• JavaScript
• CSS
• Imagens (Background Sprites)

22. Javascript
• UglifyJS
• PimpMyJs.com
• Google Closure Compiler

25. CSS
• Sqwish - https://github.com/ded/sqwish
• YUI CSS Compressor

26. Imagens
• YSlow Smush.it http://goo.gl/gk1XQ
• Photoshop / GIMP

27. CDN
• Pense nos cookies!

28. Código ruim afeta
performance!
• HTML, CSS e Javascript
• Validação W3C, CSSLint e JSHint!

29. Wordpress
• W3 Total Cache:
• Closure Compiler (JS)
• YUI Compressor (CSS)
• HTML Tidy

30. Wordpress
• W3 Total Cache:
• Unifica e Minimiza tudo!
• mas...

31. Grunt!
• via node.js
• https://github.com/cowboy/grunt/

32. jQuery
• + recente = + performance
• fuja de anti padrões

33. Seletores jQuery
$(‘#minha_id’)
+
$(‘div’)
$(‘div.classes’)
$(‘.classes’)
- $(‘[atributo]’)

34. $(‘div.classes’).show();
$(‘div.classes’).css(‘color’, ‘red’);
$(‘div.classes’).click();
var elems = $(‘div.classes’);
elems.show();
elems.css(‘color’, ‘red’);
elems.click();

35. Tempo no console
console.time(‘minha tarefa’);
$(‘div.classes’).show();
$(‘div.classes’).css(‘color’, ‘red’);
$(‘div.classes’).click();
console.timeEnd(‘minha tarefa’);

36. JS: esquerda pra direita
$(‘#menu li a’)

37. CSS: direita pra esquerda
#menu li a {
text-decoration: none;
}
WTF!

38. CSS: direita pra esquerda
.menuLink {
text-decoration: none;
}
Mais rápido! (no CSS)

39. CSS Faz diferença!

40. Viagem no tempo

41. 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 }
11
12 b = Date.now();
13
14 console.log('valor de i: ' + i);
15 console.log('tempo em ms: ' + (b - a));

42. 100
200
300
400
500
600
700
800
900
1000
valor de i: 1000
tempo em ms: 8
user!0m0.048s

43. Percepções
• Toque
• Visão
• Resposta do Console