Successfully reported this slideshow.
Your SlideShare is downloading. ×

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

Ad

por uma web
 mais rápida:
 técnicas de
 otimização
   de sites

Ad

Sérgio Lopes

 sergio.lopes
@caelum.com.br

 facebook.com/
  sergio.caelum

@sergio_caelum

Ad

Post completo
 sobre a palestra:




http://bit.ly/n0e40x

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 74 Ad
1 of 74 Ad

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

Download to read offline

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/

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/

Advertisement
Advertisement

More Related Content

Slideshows for you (19)

Advertisement
Advertisement

[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 muito irritante!
  6. 6. esperar é muito muito irritante!
  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% os downloads do Firefox.
  9. 9. 100ms de melhora aumentam o faturamento da Amazon em 1%
  10. 10. Um experimento do Google aumentou o número de resultados de 10 para 30, indo de 0.4s para 0.9s. O tráfego caiu 20%.
  11. 11. 2s a mais na busca do Bing diminuí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 e 18% no conversion rate
  14. 14. média de 9s para carregar a página
  15. 15. 75% demoram 400ms ou menos no servidor
  16. 16. “ Diminua o tamanho dos requests
  17. 17. #1 Habilite GZIP
  18. 18. 43% dos requests sem 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. PNG JPG GIF
  28. 28. PNG Alpha JPG GIF
  29. 29. PNG Alpha JPG Lossy GIF
  30. 30. PNG Alpha JPG Lossy GIF Animações
  31. 31. PNG8 PNG Alpha PNG32 JPG Lossy GIF Animações
  32. 32. #8 Diminua cookies e headers
  33. 33. “ Diminua a 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 de5 arquivos CSS
  38. 38. #11 Use Sprites
  39. 39. metade tem 36 mais 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,iVBORw0KGgoAAAANSUhEUgAAA KAAAAAyCAYAAADbYdBlAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAG7AAABuwBHnU4NQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAA62SURBVHic7 Z1/dFXVlcc/XxJ+RNBSZUoYgRADiLYUYSkgllrssFBsi9UqWimDa2zFcTLLakccwYrVWtqZWThp649ZbbUEFcV21OJSKZVUoCWIQ2EQ/G0lOogiSp0x/AjZ88c+N7l53Pf y8vLyS/Jd66yce84+5+577/ede+7e+5zIzJDUG5gPzABOBgrp3KgDtgGPAt83s/0drE83coSA3sAfgHEdrEuu+C9gUjcJuyZ64CNfpyFf3759mTZtGosWLaK6upq6ujrMr Emqra2lsrKSsrIycN3n5+v8kkZLulHSg5LWSHpV0g5JT0j6V0lzJJ0qqVe+zplPSDpO0iWSfihpTEfrkw02A9aRafLkyXbrrbfaunXr7MCBA5YtKisroz42p5K0JQkoAm4AX mmB3n8GLgXUmnPnOwEXx3Q8u6P1yUJfDqa7ycXFxW1Gun79+tmVV15pW7duzZZvh6G2tjbq72ArbsBsoCaNnoeAXcD/ZLiW54CzOvpBxq6nyxEw8cYOHz7clixZknfin XjiiVZRUWF79+7NnmkZEPWbw4X3BpYm6LgGuBoYDhTG5I8DpoS6h4D6lHb/0NEP0z4OBCwpKbGqqirbvHmz1dbW2urVq+2GG25oNfHGjx9vK1eutPr6+uzZlQVyIWAg09 oUHd8DLmpBHxOBTaHth8DAjnyQMb26NgEBmzt3bsMDrqmpscLCwpyJ179/f7vzzjvt0KFDmXiUM1pKQKAAWJWi5+PAoBxuXgHwj8B3WvMQ8pm6PAFLSkps7dq1tm 3bNtu3b5+tXbvWFixYkBP5Zs2aZbt27WqWRK1BDgS8LUXPq9rrZrdH6vIEjNLIkSNt6dKlORFv1KhR9vTTT2fiTd7QEgICp9F07nZPvm5kZ0kfGwICNmjQoBaTr7y83Pbv35 +BMvlFCwn4ZEzXt4D+rbl5nTF1NQJmdLnt3LkzU3UTFBQUsHjxYsrLy7Nu056QNAmYFiuaa2YfdJQ+3XDkxefbr18/li1bxrnnnpuP7toK34jlf21mv+kwTbrRgFY TcPDgwaxYsYIxYzq91+dLsfyTHaZFN5qgR2sajxs3jurq6k5PPkmfAQbHijZ1lC7daIqcR8DRo0dTVVXF0UcfnU992gonxPJ1wH93lCLdaIqcCDhw4EBWrFjRVcgHUBzLb7d 2DN2SdDr+8TMQeAd4Afidmb2TZfsiYCwwHncPvgFsB54ys4M56FMEfBZ408zeyiBXChxvZmsT6o4HSs1sraQR+PWNAP4IPGFme1POdzpwJtAT2Ag8ZmZ1k UyLzCx FRUVWXV19uD2kg0AWZhjgn2PX8HAm2Xwn3MuSeh/fA2Y2064A+C5wIM2zeAO4PKFdWjMM8AX8DWDAeRnO/VyQWZ9Q94tQ9zywENifotceYFyQPS0cp+r+J2B0kMmefJJs +fLleSFOvpAlAefGrmNTJtl8Jjzg9/e46+8PNI082h9GkaR2JTT1VdcDL4Z+3kh5Lv9OLCSsGQKeHavLRMAXMhBwWRZc2QNcAezNILMDOLZFBL ztttvyyZ28IEsC zohdxwGgVyb5tkrAMcBNMV1+lCDTO4wuhoeD/RQYkCIzNTzAqJ/rY3XtScB6YBFwPP6RdyuHRwm9ApwVrv3M2LUZUJE1AefMmZMnyuQXWRJwTMr 1jM0k35YJOAp4P+ixPKE +8lUfSiWQNY6qlwCvx67n/4C/svYn4N0J9ZUpP/aRKfWlNE4rns3KDDNs2DDuuOOObEQ7K7bggaURxrbHSSWVSCqXdJ+kCkmX4q/hZ4LIgBT5EcB14XCBmT2Z Un8msAG4H xgWip8ATjezd9voMjKhIqHs/lj+KTN7KV5pZq8D1eFwdFYEvP322ykqKspNxU6AMFI+Hiv6YlufU9I3cHNPBfB1oBwPgK0Ghk ZiKc3OxD8+6vC5XdTXSZI eA6q AU0Pxs 3gk9 nQz29JG l5EJ 9cDLCeWvx/IvpmlbE/72bpaA06dPZ8aMGS3UrVPigVj+65LOaqsTSTofWAJEdqoafC4EPvqekqZ pRK5NZvaRpIGS7sKJ/OVQ9wowE5hgZqvzrnz2O GhmBxLK98Xy/5umbUO7jATs06cPFRVJo2zXg5mtwsPtI/xMUt98n0fSJ4CfhMO3gclmNtTMRuBrrrd naH5y+PuBpO/iZLsCHxXfAa4CTjazh8Ko3uWRk YDz5s2Llj5 +XBBfvlkKfL8NznEWMCjkb7aYIdfMtgN/n6Htq+HvVOBmoB8+iiwEyszsDsvB+NyZkZaApaWlXH/99e2pS5vDzNYAP44 VlUv6Wp5PE62x3g88mFD/e9yWl4RnY/ mDuAmmzMxuNrN0r7O2wIDmRfKDtARctGgRffr0aS892hPX4i4j8OtfLumX4dXZYkj6iqSbYkXRgvV63JTSBOHVWZdaHrAull 8PfNuydNlliY9i+YlJApJO wBdttQsSCVhc XMz555/fXjq0K8Ir7AJ8QX6E2cBWSVOz7UfSOEmr8f1pFkqaEqo2hr9FwEUJ7T4HJM5rzGwz7uoCmAzcIyn1S zneV19JLYloijYhAP8QS+q7LaYlaZGo/GWXXUZ hYWffnyh3mNlO4HNAPCh1MLBS0m/C9hupNroiSadJ+qakZTjRvhATmRv+Pol/fIATc0ysj6E0fqCkw7X 4QnjwnReWSzonvhVI2H5jPr47w8mHd5EM8yCByC43BFgsqV/ os1TS/bghu13RxOMhyV577bXmHBCdBpHelptXoge+rHJ36n0IaS9uy9pOoxM/Nb2Geybi/thZsfp63BD+LI2+4MhdVZVGr/E09XREujxNUxecAX NS2mZcE4J7Qw7 FZA7R6JmJp ge7aN4Tsi+N7sNifS1MI3NvJHPYCDh16lRKS0ubI+3HAmZWb2YVeJjTv+CmjjiOAUYC o3BTSBzvAdcAo8zsgfBjiPpdCnwT/xARMBq38RXiI+dVzei1AQ+Z +mWKLlPwkQucxCtwcmcNc+9KOY02uh5A/5DfgxP0jwlN2wSicU4AwMMPP8wFF1zQXudvNaJpjJml nSu1oK8ewBnAecBngL8OqRB3om/FjcJbgY1m9mEz/Y0Epoc +38cf7H248/4UYJ0185EhqQyYQGM84J9xX+1jZrYjQf6k0PcW4EWLxd2lyA0E/g4n+gHcPfi4me2U9K VQtslSXHySpuO82WJmNSndRnbQr4XzbzWz2gS ZaXhs4JYmBCw uLqampqZLzf/yScButD+avIIvvPDCLkW+bnR9NCHgGWec0VF6dOMIRRMCTpo0qaP06MYRiob3 7eDBgxkyZEgm2S4PSVcnFK83s/U59ncqMNHMmrPt5R2SjgW+BfyHme1p7/ OnQ7BXfhr/CCkBas3troloIOAR8vpdjK+1iK8Ge7MV/ZXhX7ntTkDgU8APgEdw80lnw TPAX3ASfgj8TSbhBgIeQa/ffzOzRzIJSOpjZvtSygR8wmL7yZjZgyQEHE gqwA3Th5lAJB1lZh+llifI9bLkeLtmkaR/KBfQO6kuQ18CeibpErwodVF/wYx1CW4 s7x3qDqS06QUcMrNDEJsDHkEETETYEX+hpG3Ah5J+HaubibvHVkr6k 6TBoXy2pD UhP07Sm5Ku wT0r70iaFevjs5JeAPYEubMz6PJToEbS9myjdSTNl7RE0qPAXyS 9KKkkVn910GuPpNWSiiUVhHNMT+nn3pC/JVz3m5J+FrkDQ7ulONF2S7oO3LAP 3BjavIwvUor6LQxt3g363SWpJwSXyMGDB3PxhHU4Iv0tO9ebAT/H93mO0ietcSHOq/gCpk/jLqlJ+C/5I+CKIHcdcGPIzwVeCPmJof9fAJ8MN/+l2LmfD2V9cYf/ ThJ22Mc3UVqPR9VMxl+vxyTIjQrnGxWOF+FutYvwaJbngFtC3Wj8tXgmblh/Brg91N2DzyOjfp8D/hZfNrARD6ooCsQ5J8hcg09l+uLG8Tp8OjIRX6NSiE8RD gKnhDbX 4uuBS3Gj+m7c4N/wALskciBgNT5vitLx1kjAb8dkXwIutcaH8hP8VRTvL4mAEaEnEXbvp9E/Gq1cG0Sa1Xn4K/1efDeBU3F33qQEuSQCPhWrrwAqQ/47wKpYXTnu JQE4B3gr5D+Fh9T3TznXF3HPyJxwvCrlXk0Ejosd98ADKRr80aHNgpjMo8DdR6LV+QeWfg4YdxvV4xHJ4MEFNwE7JFXhI8u2ZvqoBwrl/wZtErDHglvL3N21Bx +ZUjdKOgn3+0b+2SeyuqrM+k+g6QKh7cDI8EpdBRRJGouP/L+1MM+V9C08WGMD PhL3Du1PoDHiB4tZESTNA+YAvwv6RG0mAHfHdNgKTDkSCdgSCBpC6S8Ok+5lwG +jeWCWfewGjpU0wMx2h376E3uIMWwDXjazGwEkjSd59VnW+gMf4EEVEYYC71v4QJD0CL593UnA8lA 2E7cajDWzly S9EevvfRqXhSLpcpzI5+Gj7Wg8sOPyWJt 3U3QYArzdgxCdu29f1h9GnQYxndNFGCehVNIpsTQok3CYPO+QdLp5WHw1HorUkkVBG/E52D8F8s3DF5NvSJCtAs6W1F/SsHB8VAvOlYQqYIKkqZKGAJfhhInwEL57xBT81Qg +V9sWyHcaTtqITA8AXw0fMp/Hlw4cwAn2jJm9DXyFxtEv0mGmpBHy3WqnAk9BiJKtrKxs/YSsndHSf9WF/3LfI3yl4nFv80PdGmB2TLbhONzMdfhrbBONG+vMBtaE/ Dh8ROud5vjL+Ei0P/z9ahodewG/wl95rwIXp5EbHvofHo7nE9t0HfhedIzPyX6Mf6Tsx38QQ2OyPfE5730p/T+Pv64fwzd42kDjR8ldQcc9+HbH4JsRvYxHDFUCPyLMS/ HdwdYEoh7CQ816RopaWVmZVVZWWm1tbRtSJj+ora21yspKKysriwj4PcuCgK1NEZla0b4Aj7wuyEK2Txvo35cW/kMdYh8XKeU9ww9lYkLdsRn6GwAcHR13/7vWbuQESU cBnwf+E//yz2kO1yM8uEnALbj/riXzqY5CHa7rLXSTr6MwBQ88nZcr+QD+H6qmzsUbhaCcAAAAAElFTkSuQmCC "/>
  43. 43. #13 Configure os headers
  44. 44. 87% fazem mais que 10 requests no 2º pageview
  45. 45. #14 Tire firulas do design
  46. 46. “ Performance é medida pela percepçã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é mostrar alguma 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 S B Ô ! !!
  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 tamanho dos requests
  63. 63. Diminua o tamanho dos requests S Diminua a quantidade de requests
  64. 64. Diminua Priorize o tamanho carregamento dos requests e renderização S Diminua a quantidade de requests
  65. 65. Diminua Priorize o tamanho carregamento dos 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

×