Práticas para um Site Otimizado - CaelumDay in Rio 2011

2,749 views

Published on

Palestra do Sérgio Lopes no CaelumDay 2011 no dia 2 de Julho de 2011 no Rio de Janeiro

Published in: Technology, Education
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,749
On SlideShare
0
From Embeds
0
Number of Embeds
213
Actions
Shares
0
Downloads
0
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Práticas para um Site Otimizado - CaelumDay in Rio 2011

  1. 1. Como fabricar dinheiro: Otimizações de Sitese por que isso vai deixá-lo rico
  2. 2. Sérgio Lopes @sergio_caelum facebook.com/sergio.caelumsergio.lopes@caelum.com.br
  3. 3. Por que você deveotimizar seu Site?
  4. 4. esperar é muito muitoirritante!
  5. 5. esperar é muito muitoirritante!
  6. 6. http://googleresearch.blogspot.com/2009/06/speed-matters.html
  7. 7. http://googleresearch.blogspot.com/2009/06/speed-matters.html
  8. 8. http://velocityconference.blip.tv/file/2279751/
  9. 9. http://velocityconference.blip.tv/file/2279751/
  10. 10. http://velocityconference.blip.tv/file/2279751/
  11. 11. http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html
  12. 12. http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html
  13. 13. http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
  14. 14. Tempo médio: 2 seg Tempo médio: 6 seg
  15. 15. Tempo médio: 2 seg Tempo médio: 6 segTamanho: 102.6 kb Tamanho: 313 kb
  16. 16. Tempo médio: 2 seg Tempo médio: 6 segTamanho: 102.6 kb Tamanho: 313 kb # Requests: 12 # Requests: 42
  17. 17. Tempo médio: 2 seg Tempo médio: 6 segTamanho: 102.6 kb Tamanho: 313 kb # Requests: 12 # Requests: 42 Nota YSlow: 100 Nota YSlow: 67
  18. 18. Time on Site: 3min 17s Time on Site: 2min 33s
  19. 19. Time on Site: 3min 17s Time on Site: 2min 33sAverage Pageview: 3.32 Average Pageview: 2.75
  20. 20. Time on Site: 3min 17s Time on Site: 2min 33sAverage Pageview: 3.32 Average Pageview: 2.75Conversion Rate: 2.17% Conversion Rate:1.84%
  21. 21. Pessoas ficam 21% menos tempo no siteTime on Site: 3min 17s Time on Site: 2min 33sAverage Pageview: 3.32 Average Pageview: 2.75Conversion Rate: 2.17% Conversion Rate:1.84%
  22. 22. Pessoas ficam 21% menos tempo no siteTime on Site: 3min 17s Pessoas veem 28% Time on Site: 2min 33s menos páginasAverage Pageview: 3.32 Average Pageview: 2.75Conversion Rate: 2.17% Conversion Rate:1.84%
  23. 23. Pessoas ficam 21% menos tempo no siteTime on Site: 3min 17s Pessoas veem 28% Time on Site: 2min 33s menos páginasAverage Pageview: 3.32 Average Pageview: 2.75 18% menosConversion Rate: 2.17% Conversion Rate:1.84% contatos enviados
  24. 24. $ $
  25. 25. Como não perder dinheiro?
  26. 26. #1Coloque os JavaScripts no fim da página
  27. 27. Progressive render
  28. 28. #2Coloque os CSS no topo da página
  29. 29. Problema do “Flash Screen”
  30. 30. #3Diminua o número de requests
  31. 31. Junte vários JS em um único arquivo (dinamicamente! sem POG!)
  32. 32. Junte vários JS em um único arquivo (dinamicamente! sem POG!)
  33. 33. Junte vários CSS em um único arquivo (dinamicamente! sem POG!)
  34. 34. Junte vários CSS em um único arquivo (dinamicamente! sem POG!)
  35. 35. Use CSS Sprites
  36. 36. Use CSS Sprites
  37. 37. Spriteme.org
  38. 38. #4Configure os headers corretamente
  39. 39. GET /css/estilo.css HTTP/1.1Host: www.caelum.com.brHTTP/1.1 200 OKContent-Type: text/cssContent-Length: 100#conteudo { font-family: Arial;}
  40. 40. GET /css/estilo.css HTTP/1.1Host: www.caelum.com.brHTTP/1.1 200 OKContent-Type: text/cssContent-Length: 100Expires: Sat, 10 Jul 2011 14:23:47 GMT#conteudo { font-family: Arial;}
  41. 41. HTTP/1.1 200 OKContent-Type: text/cssContent-Length: 100Expires: Sat, 10 Jul 2011 14:23:47 GMTDate-Modified: Sat, 2 Jul 2011 11:23:47 GMT#conteudo { font-family: Arial;}
  42. 42. GET /css/estilo.css HTTP/1.1Host: www.caelum.com.brIf-Modified-Since: Sat, 2 Jul 2011 11:23:47 GMTHTTP/1.1 200 OKContent-Type: text/cssContent-Length: 100Expires: Sat, 10 Jul 2011 14:23:47 GMTDate-Modified: Sat, 2 Jul 2011 11:23:47 GMT#conteudo { font-family: Arial;}
  43. 43. GET /css/estilo.css HTTP/1.1Host: www.caelum.com.brIf-Modified-Since: Sat, 2 Jul 2011 11:23:47 GMTHTTP/1.1 304 OK
  44. 44. #5Minifique o JS, CSS e HTML e habilite GZIP
  45. 45. 27.4 kb YUI Compressor pra JS e CSS 20.1 kb22.9 kb Google Closure Compiler pra JS 9.54 kb54.4 kb HTML Compressor pra HTML 36.1 kb
  46. 46. 27.4 kb YUI Compressor pra JS e CSS 20.1 kb Cacheie!22.9 kb Ou faça em Google Closure Compiler pra JS 9.54 kb build time!54.4 kb HTML Compressor pra HTML 36.1 kb
  47. 47. Habilite GZIPTamanho sem GZIP: 219.5 kbTamanho com GZIP: 102.3 kb
  48. 48. #6Otimize suas imagens
  49. 49. httparchive.org
  50. 50. Lossless compression
  51. 51. 13kb7.9kb
  52. 52. Lossy compression
  53. 53. 64kbqualidade 0.538kb
  54. 54. Tipos de arquivo
  55. 55. PNGJPGGIF
  56. 56. PNG AlphaJPGGIF
  57. 57. PNG AlphaJPG LossyGIF
  58. 58. PNG AlphaJPG LossyGIF Animações
  59. 59. PNG8PNG Alpha PNG32JPG LossyGIF Animações
  60. 60. #7Use ferramentas e automatize
  61. 61. diagnóstico • Yahoo! YSlow • Google PageSpeed • webpagetest.com
  62. 62. diagnóstico • Yahoo! YSlow • Google PageSpeed • webpagetest.comferramentas modconcat, modpagespeed, Minify, PHP Speedy, Site SpeedUp,YUI Compressor, Google Closure, UglifyJS, Smush.it, HTML Compressor, SpriteMe, ImageMagick
  63. 63. diagnóstico • Yahoo! YSlow • Google PageSpeed • webpagetest.comferramentas modconcat, modpagespeed, Minify, PHP Speedy, Site SpeedUp,YUI Compressor, Google Closure, UglifyJS, Smush.it, HTML Compressor, SpriteMe, ImageMagickreferências ‣ YSlow: developer.yahoo.com/performance ‣ Google Speed: code.google.com/speed ‣ O’Reilly Velocity Conference ‣ bookofspeed.com
  64. 64. 400 ms a mais diminuíram as buscas em 0.6% 2 seg a mais diminuíram faturamento em 4.3% 67 no YSlow diminuiu em 18%o número de contatos enviados
  65. 65. 400 ms a mais diminuíram as buscas em 0.6% 2 seg a mais diminuíram faturamento em 4.3% 67 no YSlow diminuiu em 18% o número de contatos enviadosOtimizar o response-time é obrigatório
  66. 66. Obrigado! @sergio_caelum facebook.com/sergio.caelumsergio.lopes@caelum.com.br

×