27 Otimize Performance Front-end

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/

• 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 de
R$ 1.000.000,00 por dia


html jquery
imagens
JS
CSS
servidor

inline
<style>
.center {
width: 960px;
margin: 0 auto;
}
</style>

- requisições
+tamanho #27

externo
<link rel="stylesheet" href="main.css">

+ organização
- tamanho
+ cache #27

estilos no topo,
scripts no rodapé
#26

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

normal
#25
<p>Lorem ipsum dolor sit amet.</p>


<ul>
<li><a href="#"></a></li>
</ul>

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

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

normal
#23
.center {
width: 960px;
margin: 0 auto;
}

/* --- Structure --- */

.intro { margin: 100px; }

comprimido
#23
.center{width:960px;margin:0
auto;}.intro{margin:
100px;position:relative;}

http://yui.github.com/yuicompressor/

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

vs
<link rel="stylesheet" href="component.css">

<link rel="stylesheet" href="all.css">

#21
não use
seletor
universal

#21
* {
margin: 0;
padding: 0;
border: none;
text-decoration: none;
outline: 0;
}

http://meyerweb.com/eric/tools/css/reset/

http://necolas.github.com/normalize.css/

#20
<link rel="stylesheet" href="style.css">

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

códigos de #18
terceiros?
sempre
assíncronos

async
#18
var script = document.createElement('script'),
scripts =
document.getElementsByTagName('script')[0];

script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script,

guarde o
tamanho
do array
#17

ruim...
#17
var arr = new Array(1000);

for (var i = 0; i < arr.length; i++) {
// O tamanho do array é calculado 1000
}

bom!
#17
var arr = new Array(1000);

for (var i = 0, len = arr.length; i < len; i++) {
// O tamanho só é calculado 1 vez e armazenado
}

http://jsperf.com/browser-diet-cache-array-length

html5 boilerplate
#16
<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>

minimize
repaints
e reflows
#15

ruim...
var myList = document.getElementById("myList");

for (var i = 0; i < 100; i++) {
myList.innerHTML += "<span>" + i + "</span>";
}

#15

bom!
var myList = "";

for (var i = 0; i < 100; i++) {
myList += "<span>" + i + "</span>";
}

document.getElementById("myList").innerHTML =
myList;

#15

http://jsperf.com/browser-diet-dom-manipulation

normal
#14
BrowserDiet.app = function() {

var foo = true;

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

};

comprimido
#14
BrowserDiet.app=function()
{return{bar:function(){}}};

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>

vs
<script src="framework.js"></script>

<script src="all.js"></script>

#12
use sempre
a última
versão

#12
<script src="http://code.jquery.com/jquery-latest.js"></script>

vs
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

find #id
children
.class
context #11

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

#11

http://jsperf.com/browser-diet-jquery-selectors

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

while reverso
for
$.each

for in #9

for é mais rapido
for ( var i = 0, len = a.length; i < len; i++ ) {
e = a[i];
}

#9

http://jsperf.com/browser-diet-jquery-each-vs-for-loop

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

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://compass-style.org/help/tutorials/spriting/

não escale
as imagens
direto no
código #6

html
<img width="100" height="100"
src="logo.jpg" alt="Logo">

#6

lossless jpg
png 8
png 24
gif #5

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 #4 - Habilite o cache dos arquivos

.htaccess
#3
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript

https://developers.google.com/speed/pagespeed/insights_extensions?hl=pt-BR

performance deve ser
pensada no projeto
como um todo

e não só deixar pra
testar no finalzinho

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

“Pica voando das galáxias
criado em cativeiro”

browserdiet.com

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

“Pica voando das galáxias
criado em cativeiro”
- Bernard de Luna

fim.

zenorocha.com
#1 browserdiet.com

27 Otimize Performance Front-end

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a 27 Otimize Performance Front-end

Semelhante a 27 Otimize Performance Front-end (20)

Mais de Zeno Rocha

Mais de Zeno Rocha (6)

27 Otimize Performance Front-end