O documento discute a importância da performance no desenvolvimento de sites, destacando que 80-90% do tempo de resposta do usuário é gasto na frente do site. Melhorar a velocidade de carregamento pode aumentar o ranqueamento em buscadores como o Google, reduzir custos para empresas de comércio eletrônico e aumentar taxas de conversão. Ferramentas como YSlow e PageSpeed podem ajudar a diagnosticar e melhorar a performance.

1. Extreme Web
Performance
Leo Balter

2. Jaydson.org
https://docs.google.com/presentation/d/
1S7i_Z204o5LjaSBzQtxyrhDWfKH3UninQ1-EhaZaAPE/
edit#slide=id.p

3. 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."

4. Por que?

6. Google
• Velocidade do site afeta o seu ranking nas
buscas
http://googlewebmastercentral.blogspot.com.br/2010/04/
using-site-speed-in-web-search-ranking.html

7. Amazon
• Cada 100 milissegundos a mais na demora
do carregamento de uma página gera um
custo pra Amazon.com de 1% de suas
vendas!
• Ela vende em média $67 milhões/dia, ou
seja, 1 segundo é equivalente a uma perda
de $2.4 bilhões por ano!
http://sites.google.com/site/glinden/Home/
StanfordDataMining.2006-11-28.ppt?attredirects=0

8. Shopzilla.com
• Ao diminuir carregamento de página em 5
segundos o Shopzilla.com aumento sua taxa
de conversão para 7 a 12%
• Também duplicou o número de referências
em sites de busca
• e reduziu a quantidade de seus servidores
pela metade
http://www.scribd.com/doc/16877317/Shopzillas-Site-Redo-
You-Get-What-You-Measure

9. Tamanho também é
velocidade

10. Terra

11. http://www.slideshare.net/stoyan/psychology-of-
performance

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

13. http://www.gomez.com/wp-content/downloads/
Aberdeen_WebApps.pdf

14. http://www.gomez.com/pdfs/
wp_why_web_performance_matters.pdf

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

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

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

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

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

22. Imagens
• YSlow Smush.it http://developer.yahoo.com/
yslow/smushit/
• Photoshop / GIMP

23. CDN
• Pense nos cookies!

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

25. Viagem no tempo

26. 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));

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