Como fabricar dinheiro: Otimizações de Sites e porque isso vai deixá-lo rico - PHP Conf 2010

1. Como fabricar e por que isso vai deixá-lo rico Otimizações de Sites dinheiro:

2. Sérgio Lopes sergio.lopes @caelum.com.br @sergio_caelum

3. http://googleresearch.blogspot.com/2009/06/speed-matters.html

4. http://googleresearch.blogspot.com/2009/06/speed-matters.html

5. http://velocityconference.blip.tv/ﬁle/2279751/

8. http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html

9. http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html

11. Tempo médio: 2 seg Tempo médio: 6 seg

12. Tempo médio: 2 seg Tempo médio: 6 seg Tamanho: 102.6 kb Tamanho: 313 kb

13. Tempo médio: 2 seg Tempo médio: 6 seg Tamanho: 102.6 kb Tamanho: 313 kb # Requests: 12 # Requests: 42

14. Tempo médio: 2 seg Tempo médio: 6 seg Tamanho: 102.6 kb Tamanho: 313 kb # Requests: 12 # Requests: 42 NotaYSlow: 100 NotaYSlow: 67

15. Time on Site: 3min 17s Time on Site: 2min 33s

16. Time on Site: 3min 17s Time on Site: 2min 33s Average Pageview: 3.32 Average Pageview: 2.75

17. Time on Site: 3min 17s Time on Site: 2min 33s Average Pageview: 3.32 Average Pageview: 2.75 Conversion Rate: 2.17% Conversion Rate:1.84%

18. Time on Site: 3min 17s Time on Site: 2min 33s Average Pageview: 3.32 Average Pageview: 2.75 Conversion Rate: 2.17% Conversion Rate:1.84% Pessoas ﬁcam 21% menos tempo no site

19. Time on Site: 3min 17s Time on Site: 2min 33s Average Pageview: 3.32 Average Pageview: 2.75 Conversion Rate: 2.17% Conversion Rate:1.84% Pessoas ﬁcam 21% menos tempo no site Pessoas veem 28% menos páginas

20. Time on Site: 3min 17s Time on Site: 2min 33s Average Pageview: 3.32 Average Pageview: 2.75 Conversion Rate: 2.17% Conversion Rate:1.84% Pessoas ﬁcam 21% menos tempo no site Pessoas veem 28% menos páginas 18% menos contatos enviados

21. $ $

22. Como não perder dinheiro?

23. Coloque os JavaScripts no ﬁm da página #1

24. Progressive render

25. Coloque os CSS no <head> da página #2

26. Problema do “Flash Screen”

27. Diminua o número de requests #3

28. Junte vários JS em um único arquivo (dinamicamente! sem POG!)

29. Junte vários JS em um único arquivo (dinamicamente! sem POG!)

30. Junte vários CSS em um único arquivo (dinamicamente! sem POG!)

31. Junte vários CSS em um único arquivo (dinamicamente! sem POG!)

32. Use CSS Sprites

33. Use CSS Sprites

35. Cuidado com a área ﬁnal em pixels Difícil e chato de criar e manter

36. Spriteme.org Cuidado com a área ﬁnal em pixels Difícil e chato de criar e manter

37. Conﬁgure os headers corretamente #4

38. Coloque um Expires alto

39. Coloque um Expires alto Conﬁgure ETag ou Date-Modiﬁed

40. Miniﬁque o JS, CSS e HTML e habilite GZIP #5

41. YUI Compressor pra JS e CSS Google Closure Compiler pra JS HTML Compressor pra HTML 27.4 kb 20.1 kb 22.9 kb 36.1 kb54.4 kb 9.54 kb

42. YUI Compressor pra JS e CSS Google Closure Compiler pra JS HTML Compressor pra HTML 27.4 kb 20.1 kb 22.9 kb 36.1 kb54.4 kb 9.54 kb (ou JSMin, Packer,YUI Compressor, Minify) (ou Minify, web-optimizator) (ou Minify, web-optimizator)

43. YUI Compressor pra JS e CSS Google Closure Compiler pra JS HTML Compressor pra HTML 27.4 kb 20.1 kb 22.9 kb 36.1 kb54.4 kb 9.54 kb

44. YUI Compressor pra JS e CSS Google Closure Compiler pra JS HTML Compressor pra HTML Cacheie! Ou faça em build time! 27.4 kb 20.1 kb 22.9 kb 36.1 kb54.4 kb 9.54 kb

45. Habilite GZIP Tamanho sem GZIP: 219.5 kb Tamanho com GZIP: 102.3 kb

46. Cuidado com os cookies #6

47. Sirva conteúdo estático em um domínio cookie-free yimg.com ytimg.com images-amazon.com caelumcombr.appspot.com Diminua quantidade e tamanho dos cookies

48. Use CDNs #7

49. Content Delivery Networks

50. Content Delivery Networks AppEngine Akamai Amazon Cloudfront Sua Aplicação

51. Content Delivery Networks AppEngine Akamai Amazon Cloudfront Sua Aplicação GoogleApis.com YahooApis.com Google-Analytics.com Recursos comuns

52. Otimize suas imagens #8

53. Smush.it 17.7 kb 8.3 kb

54. Minimize o número de DNS lookups Especiﬁque o tamanho das imagens no HTML Paralelize downloads com vários hostnames Bonus

55. diagnóstico ferramentas referências •Yahoo!YSlow • Google PageSpeed • webpagetest.com modconcat, modpagespeed, Minify, PHP Speedy, Site SpeedUp,YUI Compressor, Google Closure, HTML Compressor, Smush.it, SpriteMe ‣YSlow: developer.yahoo.com/performance ‣ Google Speed: code.google.com/speed ‣ O’ReillyVelocity Conference

56. 400 ms a mais diminuíram as buscas em 0.6% 2 seg a mais diminuíram faturamento em 4.3% 67 noYSlow diminuiu em 18% o número de contatos enviados

57. 400 ms a mais diminuíram as buscas em 0.6% 2 seg a mais diminuíram faturamento em 4.3% 67 noYSlow diminuiu em 18% o número de contatos enviados Otimizar o response-time é obrigatório

58. Obrigado! sergio.lopes @caelum.com.br @sergio_caelum

Como fabricar dinheiro: Otimizações de Sites e porque isso vai deixá-lo rico - PHP Conf 2010

Como fabricar dinheiro: Otimizações de Sites e porque isso vai deixá-lo rico - PHP Conf 2010

Recommended

More Related Content

Viewers also liked

Viewers also liked(9)

Similar to Como fabricar dinheiro: Otimizações de Sites e porque isso vai deixá-lo rico - PHP Conf 2010

Similar to Como fabricar dinheiro: Otimizações de Sites e porque isso vai deixá-lo rico - PHP Conf 2010(20)

More from Caelum

More from Caelum(20)

Recently uploaded

Recently uploaded(20)

Como fabricar dinheiro: Otimizações de Sites e porque isso vai deixá-lo rico - PHP Conf 2010