Your SlideShare is downloading. ×
Como
fabricar
e por que isso vai deixá-lo rico
Otimizações de Sites
dinheiro:
Sérgio Lopes
sergio.lopes
@caelum.com.br
@sergio_caelum
http://googleresearch.blogspot.com/2009/06/speed-matters.html
http://googleresearch.blogspot.com/2009/06/speed-matters.html
http://velocityconference.blip.tv/file/2279751/
http://velocityconference.blip.tv/file/2279751/
http://velocityconference.blip.tv/file/2279751/
http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html
http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html
Tempo médio: 2 seg Tempo médio: 6 seg
Tempo médio: 2 seg Tempo médio: 6 seg
Tamanho: 102.6 kb Tamanho: 313 kb
Tempo médio: 2 seg Tempo médio: 6 seg
Tamanho: 102.6 kb Tamanho: 313 kb
# Requests: 12 # Requests: 42
Tempo médio: 2 seg Tempo médio: 6 seg
Tamanho: 102.6 kb Tamanho: 313 kb
# Requests: 12 # Requests: 42
NotaYSlow: 100 NotaY...
Time on Site: 3min 17s Time on Site: 2min 33s
Time on Site: 3min 17s Time on Site: 2min 33s
Average Pageview: 3.32 Average Pageview: 2.75
Time on Site: 3min 17s Time on Site: 2min 33s
Average Pageview: 3.32 Average Pageview: 2.75
Conversion Rate: 2.17% Convers...
Time on Site: 3min 17s Time on Site: 2min 33s
Average Pageview: 3.32 Average Pageview: 2.75
Conversion Rate: 2.17% Convers...
Time on Site: 3min 17s Time on Site: 2min 33s
Average Pageview: 3.32 Average Pageview: 2.75
Conversion Rate: 2.17% Convers...
Time on Site: 3min 17s Time on Site: 2min 33s
Average Pageview: 3.32 Average Pageview: 2.75
Conversion Rate: 2.17% Convers...
$ $
Como não perder
dinheiro?
Coloque os JavaScripts no fim da página
#1
Progressive render
Coloque os CSS no <head> da página
#2
Problema do “Flash Screen”
Diminua o número de requests
#3
Junte vários JS em um único arquivo
(dinamicamente! sem POG!)
Junte vários JS em um único arquivo
(dinamicamente! sem POG!)
Junte vários CSS em um único arquivo
(dinamicamente! sem POG!)
Junte vários CSS em um único arquivo
(dinamicamente! sem POG!)
Use CSS Sprites
Use CSS Sprites
Cuidado com a área final em pixels
Difícil e chato de criar e manter
Spriteme.org
Cuidado com a área final em pixels
Difícil e chato de criar e manter
Configure os headers corretamente
#4
Coloque um Expires alto
Coloque um Expires alto
Configure ETag ou Date-Modified
Minifique o JS, CSS e HTML e habilite GZIP
#5
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...
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...
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...
YUI Compressor pra JS e CSS
Google Closure Compiler pra JS
HTML Compressor pra HTML
Cacheie!
Ou faça em
build time!
27.4 k...
Habilite GZIP
Tamanho sem GZIP:
219.5 kb
Tamanho com GZIP:
102.3 kb
Cuidado com os cookies
#6
Sirva conteúdo estático em um
domínio cookie-free
yimg.com
ytimg.com
images-amazon.com
caelumcombr.appspot.com
Diminua qua...
Use CDNs
#7
Content Delivery Networks
Content Delivery Networks
AppEngine
Akamai
Amazon Cloudfront
Sua Aplicação
Content Delivery Networks
AppEngine
Akamai
Amazon Cloudfront
Sua Aplicação
GoogleApis.com
YahooApis.com
Google-Analytics.c...
Otimize suas imagens
#8
Smush.it
17.7 kb
8.3 kb
Minimize o número de DNS lookups
Especifique o tamanho das imagens no HTML
Paralelize downloads com vários hostnames
Bonus
diagnóstico
ferramentas
referências
•Yahoo!YSlow
• Google PageSpeed
• webpagetest.com
modconcat, modpagespeed, Minify, PHP...
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...
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...
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
Upcoming SlideShare
Loading in...5
×

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

4,162

Published on

Palestra do Sérgio Lopes na PHP Conf 2010

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

No Downloads
Views
Total Views
4,162
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

Transcript of "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

×