por uma web    técnicas demais rápida:   otimização                  de sites
sergiolopes.org@sergio_caelum
Por que vocêdeve otimizar  seu Site?
esperar    é muito muitoirritante!
esperar    é muito muitoirritante!
2s a mais de latência no Bingdiminuem o faturamento em 4,3%
Para c  ada 400ms de melhora,o tráfe go do Yahoo! aumenta 9%
Ao diminuir 2.2s de sua landing page, a Mozilla aumentou em 15% osdownloads do Firefox.
Um experimento doGoogle aumentou onúmero de resultadosde 10 para 30, indode 0.4s para 0.9s.O tráfego caiu 20%.
1 segundo a mais no carregamento dapágina custa 1.6 bilhão de dólares por ano
Tamanho: de 100kb para 300kb      Requests: de 12 para 42  Carregamento: de 2s para 6s
queda de   21% no time on site,  28% nos pageviews e18% no conversion rate
Desde 2010, Sites mais rápidos rankeiam melhor no Google
“ Diminua o tamanhodos requests
#1   Habilite GZIP
#2   Minifique JavaScript
#3   Minifique CSS
#4   Comprima HTML
#5   Não redimensione imagens no HTML
#6   Otimize as imagens
#7   Pense no formato das imagens
PNGJPGGIF
PNG   AlphaJPGGIF
PNG   AlphaJPG   LossyGIF
PNG     AlphaJPG     LossyGIF   Animações
PNG8PNG             Alpha      PNG32JPG             LossyGIF           Animações
#8   Diminua cookies e headers
O Mito da Banda Larga
} largura de banda    (bandwidth)                        latência    }O Mito da Banda Larga
“ Diminuaa quantidade de requests
#9   Junte arquivos JavaScript
#10   Junte arquivos CSS
#11   Use Sprites
#12   Use Data URIs
<img width="160" height="50" alt="Logo Caelum"src="logo_caelum.png">
<img width="160" height="50" alt="Logo Caelum"src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAyCAYAAADbYdBlAAAAB...
#13   Configure os headers
#14   Tire firulas do design
“Performance é medida pelapercepção do   usuário
#15   Especifique o tamanho das imagens
#16   Coloque o JavaScript no fim
#17   Coloque o CSS no topo
#18   Adie o carregamento do que puder
#19   Abuse do carregamento assíncrono
<script type="text/javascript">  var _gaq = _gaq || [];  _gaq.push([_setAccount, UA-123456]);  _gaq.push([_trackPageview])...
#20   Otimize o First-View
#21   Design performático
#22   Automatize
#23   Use ferramentas de diagnóstico
#24   Pré-carregue componentes
Diminua o tamanhodos requests
Diminua o tamanhodos requests    S  Diminuaa quantidade de requests
Diminua        Priorize o tamanho carregamentodos requests e renderização    S  Diminuaa quantidade de requests
Diminua        Priorize o tamanho carregamentodos requests e renderização   S                 S  Diminua Performance éa qu...
slides, referências, links, dicas.          post completo:sergiolopes.org    @sergio_caelum
E NÃO É SÓ
Obrigado!
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - por Sérgio Lopes
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - por Sérgio Lopes
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - por Sérgio Lopes
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - por Sérgio Lopes
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - por Sérgio Lopes
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - por Sérgio Lopes
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - por Sérgio Lopes
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - por Sérgio Lopes
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - por Sérgio Lopes
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - por Sérgio Lopes
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - por Sérgio Lopes
[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - por Sérgio Lopes
Upcoming SlideShare
Loading in …5
×

[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - por Sérgio Lopes

4,128 views

Published on

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,128
On SlideShare
0
From Embeds
0
Number of Embeds
1,388
Actions
Shares
0
Downloads
55
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - por Sérgio Lopes

  1. 1. por uma web técnicas demais rápida: otimização de sites
  2. 2. sergiolopes.org@sergio_caelum
  3. 3. Por que vocêdeve otimizar seu Site?
  4. 4. esperar é muito muitoirritante!
  5. 5. esperar é muito muitoirritante!
  6. 6. 2s a mais de latência no Bingdiminuem o faturamento em 4,3%
  7. 7. Para c ada 400ms de melhora,o tráfe go do Yahoo! aumenta 9%
  8. 8. Ao diminuir 2.2s de sua landing page, a Mozilla aumentou em 15% osdownloads do Firefox.
  9. 9. Um experimento doGoogle aumentou onúmero de resultadosde 10 para 30, indode 0.4s para 0.9s.O tráfego caiu 20%.
  10. 10. 1 segundo a mais no carregamento dapágina custa 1.6 bilhão de dólares por ano
  11. 11. Tamanho: de 100kb para 300kb Requests: de 12 para 42 Carregamento: de 2s para 6s
  12. 12. queda de 21% no time on site, 28% nos pageviews e18% no conversion rate
  13. 13. Desde 2010, Sites mais rápidos rankeiam melhor no Google
  14. 14. “ Diminua o tamanhodos requests
  15. 15. #1 Habilite GZIP
  16. 16. #2 Minifique JavaScript
  17. 17. #3 Minifique CSS
  18. 18. #4 Comprima HTML
  19. 19. #5 Não redimensione imagens no HTML
  20. 20. #6 Otimize as imagens
  21. 21. #7 Pense no formato das imagens
  22. 22. PNGJPGGIF
  23. 23. PNG AlphaJPGGIF
  24. 24. PNG AlphaJPG LossyGIF
  25. 25. PNG AlphaJPG LossyGIF Animações
  26. 26. PNG8PNG Alpha PNG32JPG LossyGIF Animações
  27. 27. #8 Diminua cookies e headers
  28. 28. O Mito da Banda Larga
  29. 29. } largura de banda (bandwidth) latência }O Mito da Banda Larga
  30. 30. “ Diminuaa quantidade de requests
  31. 31. #9 Junte arquivos JavaScript
  32. 32. #10 Junte arquivos CSS
  33. 33. #11 Use Sprites
  34. 34. #12 Use Data URIs
  35. 35. <img width="160" height="50" alt="Logo Caelum"src="logo_caelum.png">
  36. 36. <img width="160" height="50" alt="Logo Caelum"src="data:image/png;base64,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 ZiKc3OxD8+6vC5XdTXSZI eA6q AU0Pxs3gk9 nQz29JG l5EJ 9cDLCeWvx/IvpmlbE/72bpaA06dPZ8aMGS3UrVPigVj+65LOaqsTSTofWAJEdqoafC4EPvqekqZ pRK5NZvaRpIGS7sKJ/OVQ9wowE5hgZqvzrnz2OGhmBxLK98Xy/5umbUO7jATs06cPFRVJo2zXg5mtwsPtI/xMUt98n0fSJ4CfhMO3gclmNtTMRuBrrrd naH5y+PuBpO/iZLsCHxXfAa4CTjazh8Ko3uWRk YDz5s2Llj5+XBBfvlkKfL8NznEWMCjkb7aYIdfMtgN/n6Htq+HvVOBmoB8+iiwEyszsDsvB+NyZkZaApaWlXH/99e2pS5vDzNYAP44 VlUv6Wp5PE62x3g88mFD/e9yWl4RnY/mDuAmmzMxuNrN0r7O2wIDmRfKDtARctGgRffr0aS892hPX4i4j8OtfLumX4dXZYkj6iqSbYkXRgvV63JTSBOHVWZdaHrAull 8PfNuydNlliY9i+YlJApJO wBdttQsSCVhcXMz555/fXjq0K8Ir7AJ8QX6E2cBWSVOz7UfSOEmr8f1pFkqaEqo2hr9FwEUJ7T4HJM5rzGwz7uoCmAzcIyn1S zneV19JLYloijYhAP8QS+q7LaYlaZGo/GWXXUZhYWffnyh3mNlO4HNAPCh1MLBS0m/C9hupNroiSadJ+qakZTjRvhATmRv+Pol/fIATc0ysj6E0fqCkw7X 4QnjwnReWSzonvhVI2H5jPr47w8mHd5EM8yCByC43BFgsqV/os1TS/bghu13RxOMhyV577bXmHBCdBpHelptXoge+rHJ36n0IaS9uy9pOoxM/Nb2Geybi/thZsfp63BD+LI2+4MhdVZVGr/E09XREujxNUxecAX NS2mZcE4J7Qw7FZA7R6JmJp ge7aN4Tsi+N7sNifS1MI3NvJHPYCDh16lRKS0ubI+3HAmZWb2YVeJjTv+CmjjiOAUYC o3BTSBzvAdcAo8zsgfBjiPpdCnwT/xARMBq38RXiI+dVzei1AQ+Z+mWKLlPwkQucxCtwcmcNc+9KOY02uh5A/5DfgxP0jwlN2wSicU4AwMMPP8wFF1zQXudvNaJpjJml nSu1oK8ewBnAecBngL8OqRB3om/FjcJbgY1m9mEz/Y0Epoc+38cf7H248/4UYJ0185EhqQyYQGM84J9xX+1jZrYjQf6k0PcW4EWLxd2lyA0E/g4n+gHcPfi4me2U9K VQtslSXHySpuO82WJmNSndRnbQr4XzbzWz2gS ZaXhs4JYmBCwuLqampqZLzf/yScButD+avIIvvPDCLkW+bnR9NCHgGWec0VF6dOMIRRMCTpo0qaP06MYRiob3 7eDBgxkyZEgm2S4PSVcnFK83s/U59ncqMNHMmrPt5R2SjgW+BfyHme1p7/OnQ7BXfhr/CCkBas3troloIOAR8vpdjK+1iK8Ge7MV/ZXhX7ntTkDgU8APgEdw80lnw TPAX3ASfgj8TSbhBgIeQa/ffzOzRzIJSOpjZvtSygR8wmL7yZjZgyQEHEgqwA3Th5lAJB1lZh+llifI9bLkeLtmkaR/KBfQO6kuQ18CeibpErwodVF/wYx1CW4 s7x3qDqS06QUcMrNDEJsDHkEETETYEX+hpG3Ah5J+HaubibvHVkr6k 6TBoXy2pDUhP07Sm5Ku wT0r70iaFevjs5JeAPYEubMz6PJToEbS9myjdSTNl7RE0qPAXyS 9KKkkVn910GuPpNWSiiUVhHNMT+nn3pC/JVz3m5J+FrkDQ7ulONF2S7oO3LAP3BjavIwvUor6LQxt3g363SWpJwSXyMGDB3PxhHU4Iv0tO9ebAT/H93mO0ietcSHOq/gCpk/jLqlJ+C/5I+CKIHcdcGPIzwVeCPmJof9fAJ8MN/+l2LmfD2V9cYf/ThJ22Mc3UVqPR9VMxl+vxyTIjQrnGxWOF+FutYvwaJbngFtC3Wj8tXgmblh/Brg91N2DzyOjfp8D/hZfNrARD6ooCsQ5J8hcg09l+uLG8Tp8OjIRX6NSiE8RD gKnhDbX4uuBS3Gj+m7c4N/wALskciBgNT5vitLx1kjAb8dkXwIutcaH8hP8VRTvL4mAEaEnEXbvp9E/Gq1cG0Sa1Xn4K/1efDeBU3F33qQEuSQCPhWrrwAqQ/47wKpYXTnuJQE4B3gr5D+Fh9T3TznXF3HPyJxwvCrlXk0Ejosd98ADKRr80aHNgpjMo8DdR6LV+QeWfg4YdxvV4xHJ4MEFNwE7JFXhI8u2ZvqoBwrl/wZtErDHglvL3N21Bx+ZUjdKOgn3+0b+2SeyuqrM+k+g6QKh7cDI8EpdBRRJGouP/L+1MM+V9C08WGMD PhL3Du1PoDHiB4tZESTNA+YAvwv6RG0mAHfHdNgKTDkSCdgSCBpC6S8Ok+5lwG+jeWCWfewGjpU0wMx2h376E3uIMWwDXjazGwEkjSd59VnW+gMf4EEVEYYC71v4QJD0CL593UnA8lA 2E7cajDWzly S9EevvfRqXhSLpcpzI5+Gj7Wg8sOPyWJt3U3QYArzdgxCdu29f1h9GnQYxndNFGCehVNIpsTQok3CYPO+QdLp5WHw1HorUkkVBG/E52D8F8s3DF5NvSJCtAs6W1F/SsHB8VAvOlYQqYIKkqZKGAJfhhInwEL57xBT81Qg+V9sWyHcaTtqITA8AXw0fMp/Hlw4cwAn2jJm9DXyFxtEv0mGmpBHy3WqnAk9BiJKtrKxs/YSsndHSf9WF/3LfI3yl4nFv80PdGmB2TLbhONzMdfhrbBONG+vMBtaE/Dh8ROud5vjL+Ei0P/z9ahodewG/wl95rwIXp5EbHvofHo7nE9t0HfhedIzPyX6Mf6Tsx38QQ2OyPfE5730p/T+Pv64fwzd42kDjR8ldQcc9+HbH4JsRvYxHDFUCPyLMS/HdwdYEoh7CQ816RopaWVmZVVZWWm1tbRtSJj+ora21yspKKysriwj4PcuCgK1NEZla0b4Aj7wuyEK2Txvo35cW/kMdYh8XKeU9ww9lYkLdsRn6GwAcHR13/7vWbuQESUcBnwf+E//yz2kO1yM8uEnALbj/riXzqY5CHa7rLXSTr6MwBQ88nZcr+QD+H6qmzsUbhaCcAAAAAElFTkSuQmCC ">
  37. 37. #13 Configure os headers
  38. 38. #14 Tire firulas do design
  39. 39. “Performance é medida pelapercepção do usuário
  40. 40. #15 Especifique o tamanho das imagens
  41. 41. #16 Coloque o JavaScript no fim
  42. 42. #17 Coloque o CSS no topo
  43. 43. #18 Adie o carregamento do que puder
  44. 44. #19 Abuse do carregamento assíncrono
  45. 45. <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push([_setAccount, UA-123456]); _gaq.push([_trackPageview]); (function() { var ga = document.createElement(script); ga.type = text/javascript; ga.async = true; ga.src = (https: == document.location.protocol ? https://ssl:http://www) + .google-analytics.com/ga.js; var s = document.getElementsByTagName(script)[0]; s.parentNode.insertBefore(ga, s); })();</script>
  46. 46. #20 Otimize o First-View
  47. 47. #21 Design performático
  48. 48. #22 Automatize
  49. 49. #23 Use ferramentas de diagnóstico
  50. 50. #24 Pré-carregue componentes
  51. 51. Diminua o tamanhodos requests
  52. 52. Diminua o tamanhodos requests S Diminuaa quantidade de requests
  53. 53. Diminua Priorize o tamanho carregamentodos requests e renderização S Diminuaa quantidade de requests
  54. 54. Diminua Priorize o tamanho carregamentodos requests e renderização S S Diminua Performance éa quantidade medida pela de requests percepção do usuário
  55. 55. slides, referências, links, dicas. post completo:sergiolopes.org @sergio_caelum
  56. 56. E NÃO É SÓ
  57. 57. Obrigado!

×