Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Loading in …3
×

Check these out next

1 of 58 Ad
1 of 58 Ad
Advertisement

More Related Content

More from Caelum (20)

Advertisement

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

  1. 1. Como fabricar e por que isso vai deixá-lo rico Otimizações de Sites dinheiro:
  2. 2. Sérgio Lopes sergio.lopes @caelum.com.br @sergio_caelum
  3. 3. http://googleresearch.blogspot.com/2009/06/speed-matters.html
  4. 4. http://googleresearch.blogspot.com/2009/06/speed-matters.html
  5. 5. http://velocityconference.blip.tv/file/2279751/
  6. 6. http://velocityconference.blip.tv/file/2279751/
  7. 7. http://velocityconference.blip.tv/file/2279751/
  8. 8. http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html
  9. 9. http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html
  10. 10. Tempo médio: 2 seg Tempo médio: 6 seg
  11. 11. Tempo médio: 2 seg Tempo médio: 6 seg Tamanho: 102.6 kb Tamanho: 313 kb
  12. 12. Tempo médio: 2 seg Tempo médio: 6 seg Tamanho: 102.6 kb Tamanho: 313 kb # Requests: 12 # Requests: 42
  13. 13. 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
  14. 14. Time on Site: 3min 17s Time on Site: 2min 33s
  15. 15. Time on Site: 3min 17s Time on Site: 2min 33s Average Pageview: 3.32 Average Pageview: 2.75
  16. 16. 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%
  17. 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% Pessoas ficam 21% menos tempo no site
  18. 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 ficam 21% menos tempo no site Pessoas veem 28% menos páginas
  19. 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 ficam 21% menos tempo no site Pessoas veem 28% menos páginas 18% menos contatos enviados
  20. 20. $ $
  21. 21. Como não perder dinheiro?
  22. 22. Coloque os JavaScripts no fim da página #1
  23. 23. Progressive render
  24. 24. Coloque os CSS no <head> da página #2
  25. 25. Problema do “Flash Screen”
  26. 26. Diminua o número de requests #3
  27. 27. Junte vários JS em um único arquivo (dinamicamente! sem POG!)
  28. 28. Junte vários JS em um único arquivo (dinamicamente! sem POG!)
  29. 29. Junte vários CSS em um único arquivo (dinamicamente! sem POG!)
  30. 30. Junte vários CSS em um único arquivo (dinamicamente! sem POG!)
  31. 31. Use CSS Sprites
  32. 32. Use CSS Sprites
  33. 33. Cuidado com a área final em pixels Difícil e chato de criar e manter
  34. 34. Spriteme.org Cuidado com a área final em pixels Difícil e chato de criar e manter
  35. 35. Configure os headers corretamente #4
  36. 36. Coloque um Expires alto
  37. 37. Coloque um Expires alto Configure ETag ou Date-Modified
  38. 38. Minifique o JS, CSS e HTML e habilite GZIP #5
  39. 39. 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
  40. 40. 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)
  41. 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. 42. 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
  43. 43. Habilite GZIP Tamanho sem GZIP: 219.5 kb Tamanho com GZIP: 102.3 kb
  44. 44. Cuidado com os cookies #6
  45. 45. 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
  46. 46. Use CDNs #7
  47. 47. Content Delivery Networks
  48. 48. Content Delivery Networks AppEngine Akamai Amazon Cloudfront Sua Aplicação
  49. 49. Content Delivery Networks AppEngine Akamai Amazon Cloudfront Sua Aplicação GoogleApis.com YahooApis.com Google-Analytics.com Recursos comuns
  50. 50. Otimize suas imagens #8
  51. 51. Smush.it 17.7 kb 8.3 kb
  52. 52. Minimize o número de DNS lookups Especifique o tamanho das imagens no HTML Paralelize downloads com vários hostnames Bonus
  53. 53. 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
  54. 54. 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
  55. 55. 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
  56. 56. Obrigado! sergio.lopes @caelum.com.br @sergio_caelum

×