Como Perder Peso (no browser)

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 signiﬁca: • Em 60 segundos = 3.4GB
Fonte: http://jaydson.org/talks/x-web-performance/

• Economizar 1kb signiﬁca: • Em 1 hora = 180GB

• Economizar 1kb signiﬁca: • Em 1 dia = 4.2TB

• + 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

#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>  <link rel="stylesheet" href="style.css"> </head>

#26 <body> <p>Lorem ipsum dolor sit amet.</p> 
<script src="script.js"></script> </body> </html>

comprima seu html #25

normal #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>

#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

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.cssminiﬁer.com/

https://github.com/jzaeﬀerer/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://www.cssminiﬁer.com/

https://github.com/jzaeﬀerer/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

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

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

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

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

seletores #11

#11 find children .class #id context

#11 $("#foo"); id é mais rapido

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

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

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

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?

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

2º Encontro - 2011

fim. zenorocha.com browserdiet.com #1

Como Perder Peso (no browser)

Como Perder Peso (no browser)

More Decks by Zeno Rocha

Other Decks in Technology

Featured

Transcript