[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites

167,992 views
179,040 views

Published on

Palestra do Sérgio Lopes no QCon SP 2011 sobre otimizações client-side.

Post sobre essa palestra com bastante conteúdo:
http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites/

Published in: Technology
8 Comments
48 Likes
Statistics
Notes
  • Não conhecia a técnica Sprite para imagens, vi na apresentação e depois pesquisei e achei muito bacana. Parabéns pela Apresentação.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Parabéns pelo excelente conteúdo! Essas dicas fazem um ótimo diferencial!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Perfeita a presentação, parabéns
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Liberado o download do PDF
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Pra quem quer ver tudo isso, num post incrível, do Sergio também:
    http://blog.caelum.com.br/por-uma-web-mais-rapida-26-tecnicas-de-otimizacao-de-sites/

    É o link do 3o slide.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
167,992
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
366
Comments
8
Likes
48
Embeds 0
No embeds

No notes for slide

[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites

  1. 1. por uma web mais rápida: técnicas de otimização de sites
  2. 2. Sérgio Lopes sergio.lopes@caelum.com.br facebook.com/ sergio.caelum@sergio_caelum
  3. 3. Post completo sobre a palestra:http://bit.ly/n0e40x
  4. 4. Por que vocêdeve otimizar seu Site?
  5. 5. esperar é muito muitoirritante!
  6. 6. esperar é muito muitoirritante!
  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. 100ms de melhora aumentam ofaturamento da Amazon em 1%
  10. 10. Um experimento doGoogle aumentou onúmero de resultadosde 10 para 30, indode 0.4s para 0.9s.O tráfego caiu 20%.
  11. 11. 2s a mais na busca do Bingdiminuíram o faturamento em 4.3%
  12. 12. Tamanho: de 100kb para 300kb Requests: de 12 para 42 Carregamento: de 2s para 6s
  13. 13. queda de 21% no time on site, 28% nos pageviews e18% no conversion rate
  14. 14. média de9s paracarregara página
  15. 15. 75% demoram 400msou menos no servidor
  16. 16. “ Diminua o tamanhodos requests
  17. 17. #1 Habilite GZIP
  18. 18. 43% dos requestssem GZIP
  19. 19. #2 Minifique JavaScript
  20. 20. só13%comprimiram todos os JavaScripts
  21. 21. #3 Minifique CSS
  22. 22. #4 Comprima HTML
  23. 23. #5 Não redimensione imagens no HTML
  24. 24. #6 Otimize as imagens
  25. 25. 22%economizariam mais de 40%
  26. 26. #7 Pense no formato das imagens
  27. 27. PNGJPGGIF
  28. 28. PNG AlphaJPGGIF
  29. 29. PNG AlphaJPG LossyGIF
  30. 30. PNG AlphaJPG LossyGIF Animações
  31. 31. PNG8PNG Alpha PNG32JPG LossyGIF Animações
  32. 32. #8 Diminua cookies e headers
  33. 33. “ Diminuaa quantidade de requests
  34. 34. #9 Junte arquivos JavaScript
  35. 35. média de10 arquivos JavaScript
  36. 36. #10 Junte arquivos CSS
  37. 37. média de5arquivos CSS
  38. 38. #11 Use Sprites
  39. 39. metade tem 36mais de imagens
  40. 40. #12 Use Data URIs
  41. 41. <img width="160" height="50" alt="Logo Caelum"src="logo_caelum.png" />
  42. 42. <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 "/>
  43. 43. #13 Configure os headers
  44. 44. 87% fazemmais que 10requests no2º pageview
  45. 45. #14 Tire firulas do design
  46. 46. “Performance é medida pelapercepção do usuário
  47. 47. #15 Especifique o tamanho das imagens
  48. 48. #16 Coloque o JavaScript no fim
  49. 49. média até mostraralguma coisa é 4.3s
  50. 50. #17 Coloque o CSS no topo
  51. 51. #18 Adie o carregamento do que puder
  52. 52. #19 Abuse do carregamento assíncrono
  53. 53. <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>
  54. 54. #20 Otimize o First-View
  55. 55. #21 Design performático
  56. 56. N U SB Ô ! !!
  57. 57. #22 Automatize
  58. 58. #23 Use ferramentas de diagnóstico
  59. 59. #24 Pré-carregue componentes
  60. 60. #25 Escreva código eficiente
  61. 61. #26 Dispare logo o onload
  62. 62. Diminua o tamanhodos requests
  63. 63. Diminua o tamanhodos requests S Diminuaa quantidade de requests
  64. 64. Diminua Priorize o tamanho carregamentodos requests e renderização S Diminuaa quantidade de requests
  65. 65. Diminua Priorize o tamanho carregamentodos requests e renderização S S Diminua Performance éa quantidade medida pela de requests percepção do usuário
  66. 66. #1 Fácil e rápido, faça já!#2 Importante, mas não trivial#3 Desafiador e eficaz
  67. 67. Obrigado! sergio.lopes@caelum.com.br facebook.com/ sergio.caelum@sergio_caelum
  68. 68. Post completo sobre a palestra:http://bit.ly/n0e40x

×