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
11k
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
620
7 Habits of Highly Productive Developers
zenorocha
1
400
7 Hábitos de Desenvolvedores Altamente Produtivos
zenorocha
1
520
What's new in the Liferay Community
zenorocha
0
690
Launching Liferay Projects Faster with WeDeploy
zenorocha
1
570
How Liferay fits into the real of latest technologies
zenorocha
0
620
Estoicismo e JavaScript
zenorocha
3
1.1k
Por que ninguém se importa com seu novo projeto open source?
zenorocha
2
990
Como investir em... você!
zenorocha
1
570
Other Decks in Technology
See All in Technology
Findy Team+のSOC2取得までの道のり
rvirus0817
0
240
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
データエンジニアがこの先生きのこるには...?
10xinc
0
410
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
150
API提供者のためのMCPサーバー設計ガイド / MCP Server Design Guide for API Providers
yokawasa
0
240
避けられないI/O待ちに対処する: Rails アプリにおけるSSEとasync gemの活用 / Tackling Inevitable I/O Latency in Rails Apps with SSE and the async gem
moznion
2
1.8k
あなたのWebサービスはAIに自動テストしてもらえる?アクセシビリティツリーで読み解く、AIの『視点』
yusukeiwaki
1
3.4k
Windows で省エネ
murachiakira
0
150
kaigi_on_rails_2025_設計.pdf
nay3
8
4.1k
20250929_QaaS_vol20
mura_shin
0
110
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
21
14k
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
180
Featured
See All Featured
Faster Mobile Websites
deanohume
310
31k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Thoughts on Productivity
jonyablonski
70
4.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Agile that works and the tools we love
rasmusluckow
330
21k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
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