Your SlideShare is downloading. ×
0
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Práticas para um Site Otimizado - CaelumDay in Rio 2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,354

Published on

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

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,354
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
13
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Como fabricar dinheiro: Otimizações de Sitese por que isso vai deixá-lo rico
  • 2. Sérgio Lopes @sergio_caelum facebook.com/sergio.caelumsergio.lopes@caelum.com.br
  • 3. Por que você deveotimizar seu Site?
  • 4. esperar é muito muitoirritante!
  • 5. esperar é muito muitoirritante!
  • 6. http://googleresearch.blogspot.com/2009/06/speed-matters.html
  • 7. http://googleresearch.blogspot.com/2009/06/speed-matters.html
  • 8. http://velocityconference.blip.tv/file/2279751/
  • 9. http://velocityconference.blip.tv/file/2279751/
  • 10. http://velocityconference.blip.tv/file/2279751/
  • 11. http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html
  • 12. http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html
  • 13. http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
  • 14. Tempo médio: 2 seg Tempo médio: 6 seg
  • 15. Tempo médio: 2 seg Tempo médio: 6 segTamanho: 102.6 kb Tamanho: 313 kb
  • 16. Tempo médio: 2 seg Tempo médio: 6 segTamanho: 102.6 kb Tamanho: 313 kb # Requests: 12 # Requests: 42
  • 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. Time on Site: 3min 17s Time on Site: 2min 33s
  • 19. Time on Site: 3min 17s Time on Site: 2min 33sAverage Pageview: 3.32 Average Pageview: 2.75
  • 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. 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. 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. 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. $ $
  • 25. Como não perder dinheiro?
  • 26. #1Coloque os JavaScripts no fim da página
  • 27. Progressive render
  • 28. #2Coloque os CSS no topo da página
  • 29. Problema do “Flash Screen”
  • 30. #3Diminua o número de requests
  • 31. Junte vários JS em um único arquivo (dinamicamente! sem POG!)
  • 32. Junte vários JS em um único arquivo (dinamicamente! sem POG!)
  • 33. Junte vários CSS em um único arquivo (dinamicamente! sem POG!)
  • 34. Junte vários CSS em um único arquivo (dinamicamente! sem POG!)
  • 35. Use CSS Sprites
  • 36. Use CSS Sprites
  • 37. Spriteme.org
  • 38. #4Configure os headers corretamente
  • 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. 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. 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. 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. 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. #5Minifique o JS, CSS e HTML e habilite GZIP
  • 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. 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. Habilite GZIPTamanho sem GZIP: 219.5 kbTamanho com GZIP: 102.3 kb
  • 48. #6Otimize suas imagens
  • 49. httparchive.org
  • 50. Lossless compression
  • 51. 13kb7.9kb
  • 52. Lossy compression
  • 53. 64kbqualidade 0.538kb
  • 54. Tipos de arquivo
  • 55. PNGJPGGIF
  • 56. PNG AlphaJPGGIF
  • 57. PNG AlphaJPG LossyGIF
  • 58. PNG AlphaJPG LossyGIF Animações
  • 59. PNG8PNG Alpha PNG32JPG LossyGIF Animações
  • 60. #7Use ferramentas e automatize
  • 61. diagnóstico • Yahoo! YSlow • Google PageSpeed • webpagetest.com
  • 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. 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. 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. 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. Obrigado! @sergio_caelum facebook.com/sergio.caelumsergio.lopes@caelum.com.br

×