Speaker Deck
Sign in
Sign up
for free
Como Perder Peso (no browser)
Zeno Rocha
March 09, 2013
Technology
52
9.8k
Como Perder Peso (no browser)
Presented at Rio.JS Conf
March 9, 2013
Rio de Janeiro, Brazil
Zeno Rocha
March 09, 2013
Tweet
Share
Want more?
zenorocha
0
270
zenorocha
1
160
zenorocha
0
69
reverentgeek
2
140
rmw
1
71
skipperchong
0
68
carmenhchung
5
140
keathley
4
160
productmarketing
2
220
clairelew
2
430
thoeni
1
110
jcasabona
4
200
Transcript
1
.
None
2
.
None
3
.
None
4
.
None
5
.
None
6
.
None
7
.
None
8
.
None
9
.
hoje vamos falar de performance
10
.
None
11
.
None
12
.
None
13
.
“Otimize a performance do front-end primeiro, é onde 80/90% do
tempo de resposta ao usuário é gasto.” - Steve Souders
14
.
http://googlewebmastercentral.blogspot.com.br/2010/04/using-site-speed-in-web-search-ranking.html
15
.
None
16
.
• Economizar 1kb significa: • Em 60 segundos = 3.4GB
Fonte: http://jaydson.org/talks/x-web-performance/
17
.
• Economizar 1kb significa: • Em 1 hora = 180GB
Fonte: http://jaydson.org/talks/x-web-performance/
18
.
• Economizar 1kb significa: • Em 1 dia = 4.2TB
Fonte: http://jaydson.org/talks/x-web-performance/
19
.
None
20
.
• + 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/
21
.
• 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/
22
.
• Diminuir 3.2s resultou em: • Aumento de receita de
R$ 1.000.000,00 por dia Fonte: http://www.slideshare.net/keppelen/performance-frontend-front-in-macei/
23
.
html CSS imagens servidor jquery JS
24
.
None
25
.
html
26
.
#27 evite códigos inline
27
.
inline #27 <style> .center { width: 960px; margin: 0 auto;
} </style> - requisições +tamanho
28
.
externo #27 <link rel="stylesheet" href="main.css"> + organização - tamanho +
cache
29
.
#26 estilos no topo, scripts no rodapé
30
.
#26 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Browser Diet</title> <!--
CSS --> <link rel="stylesheet" href="style.css"> </head>
31
.
#26 <body> <p>Lorem ipsum dolor sit amet.</p> <!-- JS -->
<script src="script.js"></script> </body> </html>
32
.
comprima seu html #25
33
.
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>
34
.
#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
35
.
https://code.google.com/p/htmlcompressor/
36
.
https://github.com/jney/grunt-htmlcompressor
37
.
#24 experimente async & defer
38
.
#24 script normal <script src="example.js"></script>
39
.
#24 script async <script async src="example.js"></script> +ie10
40
.
#24 script defer <script defer src="example.js"></script> +ie5
41
.
CSS
42
.
comprima seu css #23
43
.
normal #23 .center { width: 960px; margin: 0 auto; }
/* --- Structure --- */ .intro { margin: 100px; }
44
.
#23 comprimido .center{width:960px;margin:0 auto;}.intro{margin: 100px;position:relative;}
45
.
http://yui.github.com/yuicompressor/
46
.
http://www.cssminifier.com/
47
.
https://github.com/jzaefferer/grunt-css
48
.
combine vários arquivos em um só #22
49
.
#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
50
.
http://yui.github.com/yuicompressor/
51
.
http://www.cssminifier.com/
52
.
https://github.com/jzaefferer/grunt-css
53
.
não use seletor universal #21
54
.
* { margin: 0; padding: 0; border: none; text-decoration: none;
outline: 0; } #21
55
.
http://meyerweb.com/eric/tools/css/reset/
56
.
http://necolas.github.com/normalize.css/
57
.
prefira <link> ao @import #20
58
.
<link rel="stylesheet" href="style.css"> #20 vs @import url('style.css');
59
.
pense e repense seu key selector #19
60
.
key selector >> a header nav ul li a {}
#19
61
.
key selector header 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
62
.
JAVASCRIPT
63
.
códigos de terceiros? sempre assíncronos #18
64
.
async var script = document.createElement('script'), scripts = document.getElementsByTagName('script')[0]; script.async =
true; script.src = url; scripts.parentNode.insertBefore(script, #18
65
.
guarde o tamanho do array #17
66
.
ruim... var arr = new Array(1000); for (var i =
0; i < arr.length; i++) { // O tamanho do array é calculado 1000 } #17
67
.
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
68
.
http://jsperf.com/browser-diet-cache-array-length
69
.
http://jsperf.com/browser-diet-cache-array-length
70
.
evite o document.write #16
71
.
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
72
.
minimize repaints e reflows #15
73
.
ruim... var myList = document.getElementById("myList"); for (var i = 0;
i < 100; i++) { myList.innerHTML += "<span>" + i + "</span>"; } #15
74
.
var myList = ""; for (var i = 0; i
< 100; i++) { myList += "<span>" + i + "</span>"; } document.getElementById("myList").innerHTML = myList; bom! #15
75
.
http://jsperf.com/browser-diet-dom-manipulation
76
.
http://jsperf.com/browser-diet-dom-manipulation
77
.
comprima seu js #14
78
.
normal #14 BrowserDiet.app = function() { var foo = true;
return { bar: function() { // do something } }; };
79
.
comprimido BrowserDiet.app=function() {return{bar:function(){}}}; #14
80
.
http://yui.github.com/yuicompressor/
81
.
https://developers.google.com/closure/compiler/?hl=pt
82
.
https://github.com/mishoo/UglifyJS
83
.
combine vários arquivos em um só #13
84
.
#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
85
.
http://gruntjs.com/
86
.
jquery
87
.
use sempre a última versão #12
88
.
<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>
89
.
seletores #11
90
.
#11 find children .class #id context
91
.
#11 $("#foo"); id é mais rapido
92
.
http://jsperf.com/browser-diet-jquery-selectors
93
.
http://jsperf.com/browser-diet-jquery-selectors
94
.
abuse do encadeamento #10
95
.
não encadeando $("#object").addClass("foo"); $("#object").css("border-color","#f0f"); $("#object").width(200); $("#object").removeClass("bar"); #10
96
.
encadeando $("#object").addClass("foo").css("border-color", "#ccc").width(200).addClass("bar"); #10
97
.
http://jsperf.com/browser-diet-chaining
98
.
http://jsperf.com/browser-diet-chaining
99
.
use for ao invés de each #9
100
.
#9 while reverso for $.each for in
101
.
#9 for ( var i = 0, len = a.length;
i < len; i++ ) { e = a[i]; } for é mais rapido
102
.
http://jsperf.com/browser-diet-jquery-each-vs-for-loop
103
.
http://jsperf.com/browser-diet-jquery-each-vs-for-loop
104
.
não use jquery #8
105
.
jquery $('a').on('click', function() { console.log( $(this).attr('id') ); }); #8
106
.
js puro $('a').on('click', function() { console.log( this.id ); }); #8
107
.
http://jsperf.com/browser-diet-this-attr-id-vs-this-id
108
.
http://jsperf.com/browser-diet-this-attr-id-vs-this-id
109
.
imagens
110
.
css sprites #7
111
.
imagem #7
112
.
css #7 .icon-foo { background-image: url('mySprite.png'); background-position: -10px -10px; }
.icon-bar { background-image: url('mySprite.png'); background-position: -5px -5px; }
113
.
http://wearekiss.com/spritepad
114
.
http://www.spritecow.com/
115
.
http://compass-style.org/help/tutorials/spriting/
116
.
não escale as imagens direto no código #6
117
.
html #6 <img width="100" height="100" src="logo.jpg" alt="Logo">
118
.
otimize as imagens #5
119
.
#5 lossless png 8 png 24 jpg gif
120
.
servidor
121
.
habilite o caches dos arquivos #4
122
.
.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"
123
.
gzip #3
124
.
.htaccess #3 AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE
text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/javascript
125
.
bonus ^
126
.
ferramentas de análise #2
127
.
http://yslow.org/
128
.
https://developers.google.com/speed/pagespeed/insights_extensions?hl=pt-BR
129
.
http://www.webpagetest.org/
130
.
performance deve ser pensada no projeto como um todo
131
.
e não só deixar pra testar no finalzinho
132
.
lembre-se
133
.
o preguiçoso trabalha dobrado
134
.
quero aprender mais, aonde eu vou?
135
.
None
136
.
None
137
.
https://developers.google.com/speed/docs/best-practices/rules_intro
138
.
http://developer.yahoo.com/performance/rules.html
139
.
nada em português?
140
.
e se a gente juntasse...
141
.
renato mangini - google
142
.
sérgio lopes - caelum
143
.
mike taylor - opera
144
.
marcel duran - twitter
145
.
“Pica voando das galáxias criado em cativeiro” browserdiet.com/pt
146
.
“Pica voando das galáxias criado em cativeiro” - Bernard de
Luna
147
.
“Pica voando das galáxias criado em cativeiro” - Bernard de
Luna
148
.
2º Encontro - 2011
149
.
fim. zenorocha.com browserdiet.com #1
Zeno Rocha
zenorocha
reverentgeek
rmw
skipperchong
carmenhchung
keathley
productmarketing
clairelew
thoeni
jcasabona
![async var script = document.createElement('script'), scripts = document.getElementsByTagName('script')[0]; script.async =](https://files.speakerdeck.com/presentations/31ed55c06ab8013086e822000a8f982b/slide_63.jpg){kind=link}
