web performance client side

WEB PERFORMANCE CLIENTWEB PERFORMANCE CLIENT--SIDESIDE

SITESSITESLENTOSLENTOS

RAIVA

FRUSTRAÇÃOFRUSTRAÇÃO

ABANDONOABANDONO

O QUE É?

ESCALAR UM SITE PARA ESCALAR UM SITE PARA MILHÕES DE USUÁRIOSMILHÕES DE USUÁRIOS

Receber a página

do servidor: 200ms

Carregar a página

no browser: 3,8 s

TOTAL = 4 s

Otimizandoserver time em

50%

200 ms -> 100 ms

REDUÇÃO NOTEMPO TOTAL

4 s -> 3,9 s

SÓ 2,5%

REDUÇÃO NOTEMPO TOTAL

4 s -> 3,9 s

SÓ 2,5%

DE 80 A 90% DO TEMPO

PARA CARREGAR UM SITEÉ USADO PARA BAIXAR COMPONENTES

DA PÁGINA:

IMAGENS, CSS, SCRIPTS, FLASH,

ETC.

POR QUÊ?

NÚMEROS

Otimizações em imagens tornaramOtimizações em imagens tornaram o site o site

de de 2x a 3x2x a 3xmaismais rápidorápido, , com com significante aumentosignificante aumento de de interação interação com o com o usuáriousuário

Um delay de Um delay de 400ms400ms causoucausou umauma

reduçãoredução de de 0.59%0.59% emem buscasbuscasporpor usuáriousuário

DemoraDemora de de 22 segundossegundos causoucausou umauma reduçãoredução de de

4,3%4,3% emem receitareceita porpor usuáriousuário

Redesign de 1 ano reduziu o load time de 7 para 2 segundos,

com aumento de 7 a 12% em receita e

redução de 50% em custos de hardware

Usuários que experimentam load times

mais rápidos visualizam50%maispáginas por visita

Redução de 2 para 1 segundo em load time, reduziu Exit Rate

de 15% para 10%

“When an interface is faster, you feel good.

You feel in control.

The web app isn't controlling me, I'm controlling it.”

Matt Mullenweg(Criador do Wordpress)

QUEM?

STEVE SOUDERS- Trabalha para o Google em iniciativas de performance Web e Open Source;- Ex-Yahoo e criador do plugin YSlow;- Palestrante em conferências como OSCON, Web 2.0 Expo e Velocity.

COMO?

YSLOW

PAGE SPEED

SAFARI

INICIATIVAS

YAHOOBest Practices for Speeding Up Your

Web Site

http://developer.yahoo.com/performance/rules.html

GOOGLEGOOGLELet’s make the web fasterLet’s make the web fasterhttp://code.google.com/speed/http://code.google.com/speed/

REDUZIR O NÚMERODE CONEXÕES

HTTP

AGRUPAR ARQUIVOS CSS E JS

EM ARQUIVOS ÚNICOS E CACHEADOS

RUBY ON RAILSNa view:

<%= javascript_include_tag :all %>

HTML gerado:

<script type="text/javascript“ src="/javascripts/prototype.js"></script>

<script type="text/javascript" src="/javascripts/effects.js"></script>

<script type="text/javascript" src="/javascripts/app.js"></script>

<script type="text/javascript" src="/javascripts/shop.js"></script>

<script type="text/javascript" src="/javascripts/check.js"></script>

Na view:

<%= javascript_include_tag :all, :cache => true %>

HTML gerado:

<script type="text/javascript" src="/javascripts/all.js"></script>

Na view:

<%= javascript_include_tag :all, :cache => “shop” %>

HTML gerado:

<script type="text/javascript" src="/javascripts/shop.js"></script>

Na view:

<%= stylesheet_link_tag :all, :cache => “styles” %>

HTML gerado:

<link href="/stylesheets/styles.css" media="screen" rel="stylesheet" type="text/css" />

CSS SPRITES

a.buy {

transparent url(/images/sprites.gif)

no-repeat

scroll

-358px

-268px;

}

DIVIDIR COMPONENTESENTRE DOMÍNIOS

css.static.mysite.comimg.static.mysite.com

scripts.static.mysite.com

2 CONEXÕES EM PARALELO

4 CONEXÕES EM PARALELO

8 CONEXÕES EM PARALELO

CONEXÕES PARALELAS POR BROWSER

Browser HTTP/1.1 HTTP/1.0IE 6,7 2 4IE 8 6 6Firefox 2 2 8Firefox 3 6 6Safari 3,4 4 4Chrome 1,2 6 ?Opera 9.63,10a 4 4

FIREFOXabout:confignetwork.http.max-persistent-connections-per-server

IEChave no Registro

USAR UMA CDNUSAR UMA CDNContent Delivery NetworkContent Delivery Network

YAHOO!Sites do Yahoo! que moveram seuconteúdo estático para uma CDN

tiveram uma melhora

de 20% ou maisno tempo de carregamento

do site

SERVIÇOS PÚBLICOSGoogle AJAX Libraries

YUI hosting on Yahoo! network(somente javascript)

SERVIÇOS PAGOSAmazon Cloudfront S3

Akamai

USAR CONTROLES DE CACHE

Sem isto usuários visitamum site baixando

as mesmas imagens, scripts e CSS (que raramente são atualizados) todas as vezes que acessam o site

ARQUIVOS ESTÁTICOSNÃO EXPIRAM NUNCA

AO MUDAR UM ARQUIVO,ADICIONAR UM TIMESTAMP

À QUERYSTRING OU AO NOME DE ARQUIVO

DICA: NÃO USAR TIMESTAMP NA QUERYSTRING

<link

href="/stylesheets/styles.css?20090815142059“

media="screen" rel="stylesheet" type="text/css" />

USAR TIMESTAMPNO NOME DE ARQUIVO

<link

href="/stylesheets/styles.20090815142059.css“

media="screen" rel="stylesheet" type="text/css" />

.htaccess

RewriteRule ^(.+)\.(\d{14})\.(js|css|png|gif|jpg)$ $1.$3 [L]

MAX_AGEMAX_AGE

Define Define queque o o conteúdo conteúdo

de de uma página uma página é é válido válido

porpor N N segundossegundos

CacheCache--Control: maxControl: max--age=600age=600

(se o (se o botãobotão Refresh for Refresh for usadousado, , o browser o browser baixabaixa o o conteúdo novamenteconteúdo novamente))

ETAGETAGÉ É uma chave para verificar uma chave para verificar se se uma página aindauma página ainda é a é a mesma mesma

EtagEtag: "620b360455bf03e96951d2…": "620b360455bf03e96951d2…"

LAST_MODIFIEDLAST_MODIFIEDQuando uma páginaQuando uma página

foi modificada pela última vezfoi modificada pela última vez??

GZIPAR COMPONENTESCSS, HTML, Scripts

(imagens, PDF, Flash já são compactados)

90% dos browsers atuais suportam gzip

STYLESHEETS NO TOPO DA PÁGINA

Páginas ‘parecem’ carregar mais rapidamente

HTML sendo montado serve como indicação do carregamento da página

JAVASCRIPTS NO FINAL DA PÁGINA

Scripts bloqueiam downloads paralelos

Scripts com document.write

Atributo DEFER

EVITAREXPRESSÕES CSS

background-color: expression( (new Date()).getHours()%2 ?

"#B8D4FF" : "#F08A00" );

Eventos são executados muitas vezes(gerando processamento adicional)

USAR JAVASCRIPT E CSS EXTERNAMENTE

Exceção:

Sites com poucos pageviews por sessão podem se beneficiar de usar javascript e CSS embutidos diretamente no HTML

REDUZIR QUERIES DNS

Influencia a quantidade de conexões paralelas. O ideal é usar de 2 a 4

hostnames diferentes.

Google Chrome acelera navegação fazendo pre-resolv de links

REDUZIR TAMANHO DE ARQUIVOS JS E CSS

(MINIFY)

(function(){

var

// Will speed up references to window, and allows munging its name.

window = this,

// Will speed up references to undefined, and allows munging its name.

undefined,

// Map over jQuery in case of overwrite

_jQuery = window.jQuery,

// Map over the $ in case of overwrite

_$ = window.$,

jQuery = window.jQuery = window.$ = function( selector, context ) {

// The jQuery object is actually just the init constructor 'enhanced'

return new jQuery.fn.init( selector, context );

},

(…)

JQUERY 1.3.2 (Sem compressão)

(function(){var l=this,g,y=l.jQuery,p=l.$,o=l.jQuery=l.$=function(E,F){return new o.fn.init(E,F)},

JQUERY 1.3.2 (Compressão)

EVITAR REDIRECTSConexões desnecessárias

HTTP/1.1 301 Moved Permanently

Location: http://example.com/newuri

Content-Type: text/html

Opening http://www.somesite.com

HTTP request sent, awaiting response…

302 Found

Location: http://www.somesite.com/default.html

HTTP request sent, awaiting response...

200 OK

REMOVER SCRIPTS DUPLICADOS

Isso acontece!

CACHEAR AJAX

Exemplo:

Usuário baixa lista de contatos no Gmail.

Se esta lista não muda frequentemente, esta resposta Ajax deve estar cacheada

no browser.

E devidamente identificada com um serial na URL, para diferenciar quando

houver uma atualização na lista de contatos.

EM REQUISIÇÕES AJAXUSE O MÉTODO GET

Ao usar XMLHttpRequest, o método POST faz 2 conexões TCP para

enviar dados.Já o método GET faz somente 1 conexão.

POST LOADDE

COMPONENTES

Drag-and-dropAnimações

Imagens e vídeos depois do “fold”

YUI Image LoaderYUI Get utility

PRE LOADDE

COMPONENTES

UNCONDITIONAL PRELOAD

Assim que o evento “onLoad” é disparado, sua página começa a baixar

alguns componentes extras.

Google.com: uma sprite imageé carregada no “onLoad”.

Esta imagem não é usada emgoogle.com, mas somente nas páginas

seguintes, no resultado da busca.

CONDITIONAL PRELOAD

Baseado na ação do usuário a página fazum “chute” para onde o usuário deverá ir em seguida, e carrega previamente os

componentes necessários.

Search.yahoo.com: você pode ver como alguns componentes extras são requisitados depois que você começa a

digitar na caixa de busca.

ANTICIPATED PRELOAD“O novo site é legal, mas está mais

lento do que antes”

Usuários visitando site novo com empty cache.

Pré-carregar componentes ainda no site antigo, enquanto o browser está ocioso,

requisitando imagens e scripts que serão usados no layout novo.

REDUZIR A QUANTIDADE ELEMENTOS DOM

Buscar otimização de markup

document.getElementsByTagName('*').length

REDUZIRUSO

DE IFRAMES

O evento “onLoad” só é disparado quando o browser termina de carregar todos os iframes, e os componentes

dentro destes iframes.

Até lá, o browser mostra o ícone de “ocupado”, e o usuário tem a sensação

de site mais lento.

IFRAMEScompartilham o pool de conexões do browser, deixando o site mais lento

SEM ERROS 404SEM ERROS 404EmEm scripts, scripts, csscss,, imagensimagens

REDUZIR TAMANHO DECOOKIES

Eliminar quando não for necessário

Reduzir tamanho

Somente para informações estritamente necessárias (dados da sessão devem

ficar no banco de dados)

DOMÍNIOS SEM COOKIESPARA COMPONENTES

Browser não deve enviar cookies ao requisitar css, scripts e imagens

SMART EVENT HANDLERSEvent Handling

vs.Event Delegation

EVENT HANDLING

Atachar eventos a vários links

dentro de um DIV

PROBLEMAS

Muitos eventos atachados Memory Leaks

Possibilidade alta de crashDegradação de performance

Precisa atachar eventos novamente, caso o DOM mude

EVENT BUBBLINGEVENT BUBBLING

Atachar eventos Atachar eventos a um a um elementoelemento--paipai (um (um DIV DIV por exemplopor exemplo) e ) e capturar os eventoscapturar os eventos

de de seusseus linkslinks

VANTAGENS

Usa menos memóriaPágina fica mais ágil

Fácil de usarEventos centralizados em um único

trecho de código (manutenção)

// event delegation

var setup = function() {

document.onclick = function(e) {

e = e || window.event;

var t = e.target || e.srcElement;

// Pegando um link dentro de uma lista

if (t.nodeName.toLowerCase() === 'a‘ &&

t.parentNode.getElementsByTagName('ul').length>0) {

doSomethingElse();

}

return false;

}

};

window.onload = setup;

NÃO USAR NÃO USAR @IMPORT@IMPORT

<link rel='stylesheet' href='a.css'>

<style>

@import url('a.css');

</style>

<link rel='stylesheet' href='a.css'>

<style>

@import url('b.css');

</style>

IE 6,7,8

Dentro do HTML:

<link rel='stylesheet' href='a.css'>

Dentro de a.css:

@import url('b.css');

Todos os browsers

<link rel='stylesheet' href='a.css'>

<link rel='stylesheet' href='b.css'>

Downloads em paralelo(em todos os browsers)

OTIMIZAÇÃO DE IMAGENS

Verificar se GIFs estão usando tamanho de paleta de cores adequada

Converter GIFs para PNG

Otimizar PNGpngcrush image.png -rem alla -reduce -

brute result.png

Otimizar JPGjpegtran -copy none -optimize -perfect

src.jpg dest.jpg

OTIMIZAÇÃO DE

CSS SPRITES

Arranjar imagens horizontalmente geralmente resulta em arquivos

menores

Manter cores similares dentro do sprite, idealmente dentro de 256 cores, para

usar PNG8

SELETORESCSS

EFICIENTES

DIV.content * {

}

SELETOR-CHAVEPrimeiro elemento à direita.Quanto mais abrangente, pior

BAD!

button#backButton { }

.menu-left#newMenuIcon { }

GOOD!

#backButton { }

#newMenuIcon { }

Não qualificar regras de ID com tags ouclasses

BAD!

span.indented { }

GOOD!

.span-indented { }

Não qualificar regras de Classe com tags

USAR ARQUIVOS JSQUE SÓ CONTENHAM

CÓDIGO QUE SERÁ USADONA PÁGINAFramework YUI

COLOQUE O TAMANHO DAS IMAGENS NO HTML

Não colocar valores

menores oumaioresdo que o tamanho real da imagem

<img height=“70“ width=“45" src="img/foto.jpg“ />

Imagem original 570x378 pixels

<img height=“70“ width=“45" src="img/foto.jpg“ />

Imagem original 570x378 pixels

FAVICON.ICOPEQUENO

E CACHEÁVEL

Sem 404

Manter pequeno, até 1KB

Expires setado (mas não 10 anos à frente). Ao precisar mudar o ícone, você

não poderá renomeá-lo

QUANDO?

SEMPRE!

AS EQUIPES MUDAMOS FRAMEWORKS MUDAMAS NECESSIDADES MUDAM

MAS O SITE DEVE CONTINUAR COM ALTA PERFORMANCE

LIVROS

High Performance Web Sites:Essential Knowledge for Front-End Engineers

(Steve Souders)

Even Faster Web Sites: Performance Best Practices for Web Developers

(Steve Souders)

BLOGS

High Performance Web Sites bloghttp://www.stevesouders.com/blog/

VÍDEOS

Curso - High Performance Web Siteshttp://www.stevesouders.com/blog/200

9/05/20/stanford-videos-available/

Speed Up Your JavaScripthttp://www.youtube.com/watch?v=mHt

dZgou0qU

EVENTOS

Velocityhttp://en.oreilly.com/velocity2009

DÚVIDAS?

OBRIGADO!

FT-SITEhttp://levycarneiro.com