como perder peso (no browser)
Post on 02-Jul-2015
4.053 Views
Preview:
DESCRIPTION
TRANSCRIPT
hoje vamos falar de performance
“Otimize a performance do front-end primeiro, é onde 80/90% do tempo de resposta ao usuário é gasto.”
- Steve Souders
http://googlewebmastercentral.blogspot.com.br/2010/04/using-site-speed-in-web-search-ranking.html
• Economizar 1kb significa:
• Em 60 segundos = 3.4GB
Fonte: http://jaydson.org/talks/x-web-performance/
• Economizar 1kb significa:
• Em 1 hora = 180GB
Fonte: http://jaydson.org/talks/x-web-performance/
• Economizar 1kb significa:
• Em 1 dia = 4.2TB
Fonte: http://jaydson.org/talks/x-web-performance/
• + 15.000.000 de acessos por dia
• De 3mb para 267kb
• De 7.5s para 4.3s
Fonte: http://www.slideshare.net/keppelen/performance-frontend-front-in-macei/
• Diminuir 3.2s resultou em:
• Redução de custo em servidores de R$ 16.000,00 por dia
Fonte: http://www.slideshare.net/keppelen/performance-frontend-front-in-macei/
• Diminuir 3.2s resultou em:
• Aumento de receita deR$ 1.000.000,00 por dia
Fonte: http://www.slideshare.net/keppelen/performance-frontend-front-in-macei/
html
CSS
imagens
servidor
jquery
JS
html
#27evitecódigosinline
inline
#27
<style>.center { width: 960px; margin: 0 auto;}</style>
- requisições+tamanho
externo
#27
<link rel="stylesheet" href="main.css">
+ organização- tamanho+ cache
#26
estilos no topo,scripts no rodapé
#26<!doctype html><html><head>
<meta charset="UTF-8"> <title>Browser Diet</title>
<!-- CSS --> <link rel="stylesheet" href="style.css">
</head>
#26<body>
<p>Lorem ipsum dolor sit amet.</p>
<!-- JS --> <script src="script.js"></script>
</body></html>
comprima seu html
#25
normal #25<p>Lorem ipsum dolor sit amet.</p>
<!-- My List --><ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li></ul>
#25<p>Lorem ipsum dolor sit amet.</p><ul><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li></ul>
comprimido
https://code.google.com/p/htmlcompressor/
https://github.com/jney/grunt-htmlcompressor
#24
experimenteasync & defer
#24
script normal<script src="example.js"></script>
#24
script async<script async src="example.js"></script>
+ie10
#24
script defer<script defer src="example.js"></script>
+ie5
CSS
comprima seu css
#23
normal #23.center { width: 960px; margin: 0 auto;}
/* --- Structure --- */
.intro { margin: 100px; }
#23comprimido.center{width:960px;margin:0 auto;}.intro{margin:100px;position:relative;}
http://yui.github.com/yuicompressor/
https://github.com/jzaefferer/grunt-css
combine váriosarquivosem um só#22
#22<link rel="stylesheet" href="structure.css"><link rel="stylesheet" href="banner.css"><link rel="stylesheet" href="layout.css"><link rel="stylesheet" href="component.css">
<link rel="stylesheet" href="all.css">
vs
não useseletor
universal
#21
* { margin: 0; padding: 0; border: none; text-decoration: none; outline: 0;}
#21
http://meyerweb.com/eric/tools/css/reset/
http://necolas.github.com/normalize.css/
prefira <link> ao @import
#20
<link rel="stylesheet" href="style.css">
#20
vs@import url('style.css');
pense erepense seu key selector
#19
key selector >> aheader nav ul li a {}
#19
key selectorheader nav ul li * { /* Péssimo */ }header nav ul li a { /* Muito Ruim */ }nav a { /* Ruim */ }nav a.nav-link { /* Bom */ }nav .nav-link { /* Ótimo */ }.nav-link { /* Excelente */ }
#19
JAVASCRIPT
códigos de terceiros?sempre assíncronos
#18
asyncvar script = document.createElement('script'), scripts = document.getElementsByTagName('script')[0];
script.async = true;script.src = url;scripts.parentNode.insertBefore(script,
#18
guarde otamanhodo array
#17
ruim...var arr = new Array(1000);
for (var i = 0; i < arr.length; i++) { // O tamanho do array é calculado 1000}
#17
bom!var arr = new Array(1000);
for (var i = 0, len = arr.length; i < len; i++) { // O tamanho só é calculado 1 vez e armazenado}
#17
http://jsperf.com/browser-diet-cache-array-length
http://jsperf.com/browser-diet-cache-array-length
evite odocument.write#16
html5 boilerplate<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
#16
minimizerepaintse reflows#15
ruim...var myList = document.getElementById("myList");
for (var i = 0; i < 100; i++) { myList.innerHTML += "<span>" + i + "</span>";}
#15
var myList = "";
for (var i = 0; i < 100; i++) { myList += "<span>" + i + "</span>";}
document.getElementById("myList").innerHTML = myList;
bom!
#15
http://jsperf.com/browser-diet-dom-manipulation
http://jsperf.com/browser-diet-dom-manipulation
comprima seu js
#14
normal #14BrowserDiet.app = function() {
var foo = true;
return { bar: function() { // do something } };
};
comprimidoBrowserDiet.app=function(){return{bar:function(){}}};
#14
http://yui.github.com/yuicompressor/
https://developers.google.com/closure/compiler/?hl=pt
https://github.com/mishoo/UglifyJS
combine váriosarquivosem um só#13
#13<script src="navbar.js"></script><script src="component.js"></script><script src="page.js"></script><script src="framework.js"></script>
<script src="all.js"></script>
vs
jquery
use semprea última versão
#12
<script src="http://code.jquery.com/jquery-latest.js"></script>
#12
vs<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
seletores#11
#11
findchildren
.class
#id
context
#11
$("#foo");
id é mais rapido
http://jsperf.com/browser-diet-jquery-selectors
http://jsperf.com/browser-diet-jquery-selectors
abuse doencadeamento
#10
não encadeando$("#object").addClass("foo");$("#object").css("border-color","#f0f");$("#object").width(200);$("#object").removeClass("bar");
#10
encadeando$("#object").addClass("foo").css("border-color", "#ccc").width(200).addClass("bar");
#10
http://jsperf.com/browser-diet-chaining
http://jsperf.com/browser-diet-chaining
use forao invésde each
#9
#9
while reversofor
$.each
for in
#9
for ( var i = 0, len = a.length; i < len; i++ ) { e = a[i];}
for é mais rapido
http://jsperf.com/browser-diet-jquery-each-vs-for-loop
http://jsperf.com/browser-diet-jquery-each-vs-for-loop
não usejquery
#8
jquery$('a').on('click', function() { console.log( $(this).attr('id') );});
#8
js puro$('a').on('click', function() { console.log( this.id );});
#8
http://jsperf.com/browser-diet-this-attr-id-vs-this-id
http://jsperf.com/browser-diet-this-attr-id-vs-this-id
imagens
css sprites#7
imagem #7
css #7.icon-foo { background-image: url('mySprite.png'); background-position: -10px -10px;}
.icon-bar { background-image: url('mySprite.png'); background-position: -5px -5px;}
http://compass-style.org/help/tutorials/spriting/
não escaleas imagensdireto nocódigo #6
html
#6
<img width="100" height="100" src="logo.jpg" alt="Logo">
otimize asimagens#5
#5
losslesspng 8
png 24
jpg
gif
servidor
habilite ocaches dosarquivos#4
.htaccess #4
ExpiresActive On ExpiresByType image/gif "access plus 6 months" ExpiresByType image/jpeg "access plus 6 months" ExpiresByType image/png "access plus 6 months" ExpiresByType text/css "access plus 6 months" ExpiresByType text/javascript "access plus 6 months"
gzip#3
#4 - Habilite o cache dos arquivos
.htaccess #3
AddOutputFilterByType DEFLATE text/htmlAddOutputFilterByType DEFLATE text/plainAddOutputFilterByType DEFLATE text/xmlAddOutputFilterByType DEFLATE text/cssAddOutputFilterByType DEFLATE application/javascript
bonus^
ferramentasde análise
#2
https://developers.google.com/speed/pagespeed/insights_extensions?hl=pt-BR
performance deve ser pensada no projeto
como um todo
e não só deixar pra testar no finalzinho
lembre-se
o preguiçosotrabalha dobrado
quero aprender mais,aonde eu vou?
https://developers.google.com/speed/docs/best-practices/rules_intro
http://developer.yahoo.com/performance/rules.html
nada emportuguês?
e se a gentejuntasse...
renato mangini- google
sérgio lopes- caelum
mike taylor- opera
marcel duran- twitter
“Pica voando das galáxiascriado em cativeiro”
browserdiet.com
http://github.com/zenorocha/browser-diet
“Pica voando das galáxiascriado em cativeiro”
- Bernard de Luna
“Pica voando das galáxiascriado em cativeiro”
- Bernard de Luna
2º Encontro - 2011
fim.
zenorocha.combrowserdiet.com#1
top related