Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Como Perder Peso (no browser)
Search
Zeno Rocha
March 09, 2013
Technology
52
10k
Como Perder Peso (no browser)
Presented at Rio.JS Conf
March 9, 2013
Rio de Janeiro, Brazil
Zeno Rocha
March 09, 2013
Tweet
Share
More Decks by Zeno Rocha
See All by Zeno Rocha
The Next Generation of Developer-First Products
zenorocha
1
420
7 Habits of Highly Productive Developers
zenorocha
1
280
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
310
What's new in the Liferay Community
zenorocha
0
560
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
450
How Liferay fits into the real of latest technologies
zenorocha
0
400
Estoicismo e JavaScript
zenorocha
3
880
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
760
Como investir em... você!
zenorocha
1
470
Other Decks in Technology
See All in Technology
React 19を概念から理解する
uhyo
19
6.1k
SREがいない”今いる場所”で 「SRE」について聞いて、考えてみた
maimyyym
1
210
240524「開発生産性を、もっと誇れる組織へ」という方針を 9ヶ月前に掲げたCTOの振り返り
msykd
PRO
0
430
Evolutionary Architecture - Discovering Boundaries @DevTalks 24
victorrentea
1
260
HeadlessなUIライブラリを利用する価値
plaidtech
PRO
10
2.1k
iOS'te Tipografi
seyfoyun
0
110
AWS でのクラウド時代のログ活用
itotsum
1
120
Platform Engineering on Serverless
_kensh
3
430
OpenFOAM(自宅ではじめる流体解析)
kamakiri1225
0
150
仕事の対話を AI でハックする考え方とプロセス 〜 AI と協働できる人材へ 〜
yoshizaki
11
3.5k
.NET 8 New Features with Code Examples
_mertmetin
0
190
プロダクトの不具合傾向分析と改善活動について
masayuki_yamad
0
210
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Designing for Performance
lara
603
67k
Faster Mobile Websites
deanohume
300
30k
In The Pink: A Labor of Love
frogandcode
138
21k
Rails Girls Zürich Keynote
gr2m
91
13k
Code Review Best Practice
trishagee
56
16k
Bash Introduction
62gerente
605
210k
How to name files
jennybc
65
94k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2.1k
The Invisible Side of Design
smashingmag
294
49k
Designing for humans not robots
tammielis
247
25k
Raft: Consensus for Rubyists
vanstee
133
6.3k
Transcript
None
None
None
None
None
None
None
None
hoje vamos falar de performance
None
None
None
“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
None
• 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/
None
• + 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 de
R$ 1.000.000,00 por dia Fonte: http://www.slideshare.net/keppelen/performance-frontend-front-in-macei/
html CSS imagens servidor jquery JS
None
html
#27 evite códigos inline
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 experimente async & 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; }
#23 comprimido .center{width:960px;margin:0 auto;}.intro{margin: 100px;position:relative;}
http://yui.github.com/yuicompressor/
http://www.cssminifier.com/
https://github.com/jzaefferer/grunt-css
combine vários arquivos em 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
http://yui.github.com/yuicompressor/
http://www.cssminifier.com/
https://github.com/jzaefferer/grunt-css
não use seletor 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 e repense seu key selector #19
key selector >> a header nav ul li a {}
#19
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
JAVASCRIPT
códigos de terceiros? sempre assíncronos #18
async var script = document.createElement('script'), scripts = document.getElementsByTagName('script')[0]; script.async =
true; script.src = url; scripts.parentNode.insertBefore(script, #18
guarde o tamanho do 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 o document.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
minimize repaints e 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 #14 BrowserDiet.app = function() { var foo = true;
return { bar: function() { // do something } }; };
comprimido BrowserDiet.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ários arquivos em 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
http://gruntjs.com/
jquery
use sempre a ú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 find children .class #id context
#11 $("#foo"); id é mais rapido
http://jsperf.com/browser-diet-jquery-selectors
http://jsperf.com/browser-diet-jquery-selectors
abuse do encadeamento #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 for ao invés de each #9
#9 while reverso for $.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 use jquery #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://wearekiss.com/spritepad
http://www.spritecow.com/
http://compass-style.org/help/tutorials/spriting/
não escale as imagens direto no código #6
html #6 <img width="100" height="100" src="logo.jpg" alt="Logo">
otimize as imagens #5
#5 lossless png 8 png 24 jpg gif
servidor
habilite o caches dos arquivos #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
.htaccess #3 AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE
text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/javascript
bonus ^
ferramentas de análise #2
http://yslow.org/
https://developers.google.com/speed/pagespeed/insights_extensions?hl=pt-BR
http://www.webpagetest.org/
performance deve ser pensada no projeto como um todo
e não só deixar pra testar no finalzinho
lembre-se
o preguiçoso trabalha dobrado
quero aprender mais, aonde eu vou?
None
None
https://developers.google.com/speed/docs/best-practices/rules_intro
http://developer.yahoo.com/performance/rules.html
nada em português?
e se a gente juntasse...
renato mangini - google
sérgio lopes - caelum
mike taylor - opera
marcel duran - twitter
“Pica voando das galáxias criado em cativeiro” browserdiet.com/pt
“Pica voando das galáxias criado em cativeiro” - Bernard de
Luna
“Pica voando das galáxias criado em cativeiro” - Bernard de
Luna
2º Encontro - 2011
fim. zenorocha.com browserdiet.com #1