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 significa:

• Em 60 segundos = 3.4GB

Fonte: http://jaydson.org/talks/x-web-performance/

http://jaydson.org/talks/x-web-performance/



• Em 1 hora = 180GB





• 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




• Diminuir 3.2s resultou em:

• Aumento de receita deR$ 1.000.000,00 por dia




html

CSS

imagens

servidor

jquery

JS

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

 <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

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

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/



http://www.cssminifier.com/



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

http://gruntjs.com/

http://gruntjs.com/

http://gruntjs.com/

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

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



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



comprima seu js

#14

normal #14BrowserDiet.app = function() {

var foo = true;

return { bar: function() { // do something } };

};

comprimidoBrowserDiet.app=function(){return{bar:function(){}}};

#14

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

http://gruntjs.com/

http://gruntjs.com/

http://gruntjs.com/

jquery

use semprea última versão

#12

seletores#11

#11

findchildren

.class

#id

context

#11

$("#foo");

id é mais rapido

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



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



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



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

http://yslow.org/

http://yslow.org/

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ç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://browserdiet.com/pt/

http://browserdiet.com/pt/

http://github.com/zenorocha/browser-diet



“Pica voando das galáxiascriado em cativeiro”

- Bernard de Luna

2º Encontro - 2011

fim.

zenorocha.combrowserdiet.com#1

como perder peso (no browser)

Technology