[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 101,757 views

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

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/

Statistics

Views

Total Views
101,757
Views on SlideShare
6,924
Embed Views
94,833

Actions

Likes
36
Downloads
234
Comments
8

29 Embeds 94,833

http://blog.caelum.com.br 94502
http://vosiro.com 125
http://candidosalesg.wordpress.com 48
http://candidosg.com 28
http://webcache.googleusercontent.com 20
http://curtajava.wordpress.com 17
http://www.jardelmorais.com 11
http://www.plugmasters.com.br 11
http://paper.li 9
https://www.google.com.br 7
http://jardelmorais.net 7
http://plus.url.google.com 7
http://twitter.com 7
http://www.google.com.br 6
http://localhost 4
http://translate.googleusercontent.com 4
http://flavors.me 3
http://us-w1.rockmelt.com 2
http://caelum.wpengine.netdna-cdn.com 2
http://www.cleancss.com 2
https://www.rebelmouse.com 2
http://pt.wikipedia.org 2
http://www.shopping.uol.com.br&_=1360342957868 HTTP 1
http://translate.google.com 1
http://plus-game.appspot.com 1
http://notify.bluecoat.com 1
http://www.moises.net.br 1
http://www.facebook.com 1
http://webcache-exp-test.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 8 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
  • Parabéns pelo excelente conteúdo! Essas dicas fazem um ótimo diferencial!
    Are you sure you want to
    Your message goes here
    Processing…
  • Perfeita a presentação, parabéns
    Are you sure you want to
    Your message goes here
    Processing…
  • Liberado o download do PDF
    Are you sure you want to
    Your message goes here
    Processing…
  • 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.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • por uma web mais rápida: técnicas de otimização de sites
  • Sérgio Lopes sergio.lopes@caelum.com.br facebook.com/ sergio.caelum@sergio_caelum
  • Post completo sobre a palestra:http://bit.ly/n0e40x
  • Por que vocêdeve otimizar seu Site?
  • esperar é muito muitoirritante!
  • esperar é muito muitoirritante!
  • 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.
  • 100ms de melhora aumentam ofaturamento da Amazon em 1%
  • Um experimento doGoogle aumentou onúmero de resultadosde 10 para 30, indode 0.4s para 0.9s.O tráfego caiu 20%.
  • 2s a mais na busca do Bingdiminuíram o faturamento em 4.3%
  • 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
  • média de9s paracarregara página
  • 75% demoram 400msou menos no servidor
  • “ Diminua o tamanhodos requests
  • #1 Habilite GZIP
  • 43% dos requestssem GZIP
  • #2 Minifique JavaScript
  • só13%comprimiram todos os JavaScripts
  • #3 Minifique CSS
  • #4 Comprima HTML
  • #5 Não redimensione imagens no HTML
  • #6 Otimize as imagens
  • 22%economizariam mais de 40%
  • #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
  • “ Diminuaa quantidade de requests
  • #9 Junte arquivos JavaScript
  • média de10 arquivos JavaScript
  • #10 Junte arquivos CSS
  • média de5arquivos CSS
  • #11 Use Sprites
  • metade tem 36mais de imagens
  • #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,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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 "/>
  • #13 Configure os headers
  • 87% fazemmais que 10requests no2º pageview
  • #14 Tire firulas do design
  • “Performance é medida pelapercepção do usuário
  • #15 Especifique o tamanho das imagens
  • #16 Coloque o JavaScript no fim
  • média até mostraralguma coisa é 4.3s
  • #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]); (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>
  • #20 Otimize o First-View
  • #21 Design performático
  • N U SB Ô ! !!
  • #22 Automatize
  • #23 Use ferramentas de diagnóstico
  • #24 Pré-carregue componentes
  • #25 Escreva código eficiente
  • #26 Dispare logo o onload
  • 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 quantidade medida pela de requests percepção do usuário
  • #1 Fácil e rápido, faça já!#2 Importante, mas não trivial#3 Desafiador e eficaz
  • Obrigado! sergio.lopes@caelum.com.br facebook.com/ sergio.caelum@sergio_caelum
  • Post completo sobre a palestra:http://bit.ly/n0e40x