More Related Content Similar to [FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - por Sérgio Lopes Similar to [FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - por Sérgio Lopes (20) [FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - por Sérgio Lopes1. por uma web técnicas de
mais rápida: otimização
de sites
4. esperar
é
muito
muito
irritante!
5. esperar
é
muito
muito
irritante!
6. 2s a mais de latência no Bing
diminuem o faturamento em 4,3%
7. Para c ada 400ms de melhora,
o tráfe go do Yahoo! aumenta 9%
8. Ao diminuir 2.2s de sua
landing page, a Mozilla
aumentou em 15% os
downloads do Firefox.
10. 1 segundo a mais no carregamento da
página custa 1.6 bilhão de dólares por ano
12. queda de
21% no time on site,
28% nos pageviews e
18% no conversion rate
18. #2 Minifique JavaScript
21. #5 Não redimensione imagens no HTML
22. #6 Otimize as imagens
23. #7 Pense no formato das imagens
26. PNG Alpha
JPG Lossy
GIF
27. PNG Alpha
JPG Lossy
GIF Animações
28. PNG8
PNG Alpha
PNG32
JPG Lossy
GIF Animações
30. #8 Diminua cookies e headers
33. }
largura de banda
(bandwidth)
latência
}
O Mito da Banda Larga
36. #9 Junte arquivos JavaScript
37. #10 Junte arquivos CSS
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. #13 Configure os headers
44. #14 Tire firulas do design
46. #15 Especifique o tamanho das imagens
47. #16 Coloque o JavaScript no fim
48. #17 Coloque o CSS no topo
51. #18 Adie o carregamento do que puder
55. #19 Abuse do carregamento assíncrono
56. <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>
57. #20 Otimize o First-View
58. #21 Design performático
60. #23 Use ferramentas de diagnóstico
61. #24 Pré-carregue componentes
65. Diminua Priorize
o tamanho carregamento
dos requests e renderização
S
Diminua
a quantidade
de requests
66. 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