Extreme Web Performance

Leo BalterWPMeetupRJ 2012

https://reps.mozilla.org/u/leobalter/

Jaydson.org

http://goo.gl/IDefJ

Steve Souders

"Performance golden rule: Optimize front-end performance first, that's where 80/90% of the end-user

response time is spent."

High Performance Web Sites

80 a 90% do tempo de resposta ao usuário está no frontend!

Por que?

Google

• Velocidade do site afeta o seu ranking nas buscas (Webmaster Central Blog)

http://goo.gl/h3FX3

Amazon

• +100ms = -1% de vendas

• ~ $67 milhões/dia

• 1seg = - $2.4 bilhões por ano!

http://goo.gl/zSd8q

Shopzilla.com

• -5 segunos = + conversão (7 a 12%)

• 2x referências em sites de busca

• 50% servidores necessários

http://goo.gl/AMCx2

Tamanho também é velocidade

Terra

http://goo.gl/mecWnPsicologia da Performance

Parece mais lento quando:

• desagradável

• desconhecido

• chato

• muita coisa pra acompanhar

• nunca coloque muitos

• marcadores

• em um slide

• nunca

• é difícil de analisar

http://goo.gl/mecWnPsicologia da Performance

Efeitos da espera

• Irritação

• Estresse

• Colesterol alto

• Morte!

1 segundo

• 11% de page views

• 7% de conversão

• 16% Satisfação do consumidor

http://goo.gl/YHygR

http://goo.gl/iz5qc

Comportamento Não otimizado Otimizado

Bounce Rate 14,35% 13,38%

Páginas / Visita 11,04 15,64

Tempo médio no site 0:23:50 0:30:10

Ferramentas

• Yahoo YSlow

• Google PageSpeed

• Abas de “Rede” nos DevTools (Firefox, Chrome e Opera)

• WebPageTest

LazyLoad

• <script async src=”file.js”></script>

• YepNope.js

Unificar e Minimizar

• JavaScript

• CSS

• Imagens (Background Sprites)

Javascript

• UglifyJS

• PimpMyJs.com

• Google Closure Compiler

CSS

• Sqwish - https://github.com/ded/sqwish

• YUI CSS Compressor

Imagens

• YSlow Smush.it http://goo.gl/gk1XQ

• Photoshop / GIMP

CDN

• Pense nos cookies!

Código ruim afeta performance!

• HTML, CSS e Javascript

• Validação W3C, CSSLint e JSHint!

Wordpress

• W3 Total Cache:

• Closure Compiler (JS)

• YUI Compressor (CSS)

• HTML Tidy

Wordpress

• W3 Total Cache:

• Unifica e Minimiza tudo!

• mas...

Grunt!

• via node.js

• https://github.com/cowboy/grunt/

jQuery

• + recente = + performance

• fuja de anti padrões

Seletores jQuery$(‘#minha_id’)

$(‘div.classes’)

$(‘div’)

$(‘.classes’)

$(‘[atributo]’)

+

-

$(‘div.classes’).show();$(‘div.classes’).css(‘color’, ‘red’);$(‘div.classes’).click();

var elems = $(‘div.classes’);

elems.show();elems.css(‘color’, ‘red’);elems.click();

Tempo no console

console.time(‘minha tarefa’);

$(‘div.classes’).show();$(‘div.classes’).css(‘color’, ‘red’);$(‘div.classes’).click();

console.timeEnd(‘minha tarefa’);

JS: esquerda pra direita

$(‘#menu li a’)

CSS: direita pra esquerda

#menu li a {text-decoration: none;

}

WTF!

CSS: direita pra esquerda

.menuLink {text-decoration: none;

}

Mais rápido! (no CSS)

CSS Faz diferença!

Viagem no tempo

1 var a = Date.now(), 2 b, 3 i = 0; 4 5 while (i < 1000) { 6 ++i; 7 if (i % 100 === 0) { 8 console.log(i); 9 } 10 } 11 12 b = Date.now(); 13 14 console.log('valor de i: ' + i); 15 console.log('tempo em ms: ' + (b - a));

1002003004005006007008009001000valor de i: 1000tempo em ms: 8

user!0m0.048s

Percepções

• Toque

• Visão

• Resposta do Console