Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Upcoming SlideShare
Seo nao é só para Google
Seo nao é só para Google
Loading in …3
×

Check these out next

1 of 92 Ad
1 of 92 Ad
Advertisement

More Related Content

More from Caelum (20)

Advertisement

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

  1. 1. Como fabricar dinheiro: Otimizações de Sites e por que isso vai deixá-lo rico
  2. 2. Sérgio Lopes @sergio_caelum facebook.com/sergio.caelum sergio.lopes@caelum.com.br
  3. 3. Por que você deve otimizar seu Site?
  4. 4. esperar é muito muito irritante!
  5. 5. esperar é muito muito irritante!
  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 seg Tamanho: 102.6 kb Tamanho: 313 kb
  16. 16. Tempo médio: 2 seg Tempo médio: 6 seg Tamanho: 102.6 kb Tamanho: 313 kb # Requests: 12 # Requests: 42
  17. 17. Tempo médio: 2 seg Tempo médio: 6 seg Tamanho: 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 33s Average Pageview: 3.32 Average Pageview: 2.75
  20. 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%
  21. 21. Pessoas ficam 21% menos tempo no site 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%
  22. 22. Pessoas ficam 21% menos tempo no site Time on Site: 3min 17s Pessoas veem 28% Time on Site: 2min 33s menos páginas Average Pageview: 3.32 Average Pageview: 2.75 Conversion Rate: 2.17% Conversion Rate:1.84%
  23. 23. Pessoas ficam 21% menos tempo no site Time on Site: 3min 17s Pessoas veem 28% Time on Site: 2min 33s menos páginas Average Pageview: 3.32 Average Pageview: 2.75 18% menos Conversion Rate: 2.17% Conversion Rate:1.84% contatos enviados
  24. 24. $ $
  25. 25. Como não perder dinheiro?
  26. 26. #1 Coloque os JavaScripts no fim da página
  27. 27. Progressive render
  28. 28. #2 Coloque os CSS no topo da página
  29. 29. Problema do “Flash Screen”
  30. 30. #3 Diminua 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. #4 Configure os headers corretamente
  39. 39. GET /css/estilo.css HTTP/1.1 Host: www.caelum.com.br HTTP/1.1 200 OK Content-Type: text/css Content-Length: 100 #conteudo { font-family: 'Arial'; }
  40. 40. GET /css/estilo.css HTTP/1.1 Host: www.caelum.com.br HTTP/1.1 200 OK Content-Type: text/css Content-Length: 100 Expires: Sat, 10 Jul 2011 14:23:47 GMT #conteudo { font-family: 'Arial'; }
  41. 41. HTTP/1.1 200 OK Content-Type: text/css Content-Length: 100 Expires: Sat, 10 Jul 2011 14:23:47 GMT Date-Modified: Sat, 2 Jul 2011 11:23:47 GMT #conteudo { font-family: 'Arial'; }
  42. 42. GET /css/estilo.css HTTP/1.1 Host: www.caelum.com.br If-Modified-Since: Sat, 2 Jul 2011 11:23:47 GMT HTTP/1.1 200 OK Content-Type: text/css Content-Length: 100 Expires: Sat, 10 Jul 2011 14:23:47 GMT Date-Modified: Sat, 2 Jul 2011 11:23:47 GMT #conteudo { font-family: 'Arial'; }
  43. 43. GET /css/estilo.css HTTP/1.1 Host: www.caelum.com.br If-Modified-Since: Sat, 2 Jul 2011 11:23:47 GMT HTTP/1.1 304 OK
  44. 44. #5 Minifique o JS, CSS e HTML e habilite GZIP
  45. 45. 27.4 kb YUI Compressor pra JS e CSS 20.1 kb 22.9 kb Google Closure Compiler pra JS 9.54 kb 54.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 GZIP Tamanho sem GZIP: 219.5 kb Tamanho com GZIP: 102.3 kb
  48. 48. #6 Otimize suas imagens
  49. 49. httparchive.org
  50. 50. Lossless compression
  51. 51. 13kb 7.9kb
  52. 52. Lossy compression
  53. 53. 64kb qualidade 0.5 38kb
  54. 54. Tipos de arquivo
  55. 55. PNG JPG GIF
  56. 56. PNG Alpha JPG GIF
  57. 57. PNG Alpha JPG Lossy GIF
  58. 58. PNG Alpha JPG Lossy GIF Animações
  59. 59. PNG8 PNG Alpha PNG32 JPG Lossy GIF Animações
  60. 60. #7 Use ferramentas e automatize
  61. 61. diagnóstico • Yahoo! YSlow • Google PageSpeed • webpagetest.com
  62. 62. diagnóstico • Yahoo! YSlow • Google PageSpeed • webpagetest.com ferramentas 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.com ferramentas modconcat, modpagespeed, Minify, PHP Speedy, Site SpeedUp,YUI Compressor, Google Closure, UglifyJS, Smush.it, HTML Compressor, SpriteMe, ImageMagick referê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 enviados Otimizar o response-time é obrigatório
  66. 66. Obrigado! @sergio_caelum facebook.com/sergio.caelum sergio.lopes@caelum.com.br

×