150
WEB PERFORMANCE CLIENT WEB PERFORMANCE CLIENT - - SIDE SIDE

Web Performance Client Side

Embed Size (px)

Citation preview

Page 1: Web Performance Client Side

WEB PERFORMANCE CLIENTWEB PERFORMANCE CLIENT--SIDESIDE

Page 2: Web Performance Client Side

SITESSITESLENTOSLENTOS

Page 3: Web Performance Client Side

RAIVA

Page 4: Web Performance Client Side

FRUSTRAÇÃOFRUSTRAÇÃO

Page 5: Web Performance Client Side

ABANDONOABANDONO

Page 6: Web Performance Client Side

O QUE É?

Page 7: Web Performance Client Side

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

Page 8: Web Performance Client Side

Receber a página

do servidor: 200ms

Carregar a página

no browser: 3,8 s

TOTAL = 4 s

Page 9: Web Performance Client Side

Otimizandoserver time em

50%

200 ms -> 100 ms

Page 10: Web Performance Client Side

REDUÇÃO NOTEMPO TOTAL

4 s -> 3,9 s

SÓ 2,5%

Page 11: Web Performance Client Side

REDUÇÃO NOTEMPO TOTAL

4 s -> 3,9 s

SÓ 2,5%

Page 12: Web Performance Client Side

DE 80 A 90% DO TEMPO

PARA CARREGAR UM SITEÉ USADO PARA BAIXAR COMPONENTES

DA PÁGINA:

IMAGENS, CSS, SCRIPTS, FLASH,

ETC.

Page 13: Web Performance Client Side

POR QUÊ?

Page 14: Web Performance Client Side

NÚMEROS

Page 15: Web Performance Client Side

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

Page 16: Web Performance Client Side

Um delay de Um delay de 400ms400ms causoucausou umauma

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

Page 17: Web Performance Client Side

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

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

Page 18: Web Performance Client Side

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

Page 19: Web Performance Client Side

Usuários que experimentam load times

mais rápidos visualizam50%maispáginas por visita

Page 20: Web Performance Client Side

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

de 15% para 10%

Page 21: Web Performance Client Side

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

Page 22: Web Performance Client Side

QUEM?

Page 23: Web Performance Client Side

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.

Page 24: Web Performance Client Side

COMO?

Page 25: Web Performance Client Side
Page 26: Web Performance Client Side

YSLOW

Page 27: Web Performance Client Side

PAGE SPEED

Page 28: Web Performance Client Side

SAFARI

Page 29: Web Performance Client Side

INICIATIVAS

Page 30: Web Performance Client Side

YAHOOBest Practices for Speeding Up Your

Web Site

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

Page 31: Web Performance Client Side

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

Page 32: Web Performance Client Side

REDUZIR O NÚMERODE CONEXÕES

HTTP

Page 33: Web Performance Client Side

AGRUPAR ARQUIVOS CSS E JS

EM ARQUIVOS ÚNICOS E CACHEADOS

Page 34: Web Performance Client Side

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>

Page 35: Web Performance Client Side

Na view:

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

HTML gerado:

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

Page 36: Web Performance Client Side

Na view:

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

HTML gerado:

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

Page 37: Web Performance Client Side

Na view:

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

HTML gerado:

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

Page 38: Web Performance Client Side

CSS SPRITES

Page 39: Web Performance Client Side
Page 40: Web Performance Client Side
Page 41: Web Performance Client Side

a.buy {

transparent url(/images/sprites.gif)

no-repeat

scroll

-358px

-268px;

}

Page 42: Web Performance Client Side

DIVIDIR COMPONENTESENTRE DOMÍNIOS

Page 43: Web Performance Client Side

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

scripts.static.mysite.com

Page 44: Web Performance Client Side

2 CONEXÕES EM PARALELO

Page 45: Web Performance Client Side

4 CONEXÕES EM PARALELO

Page 46: Web Performance Client Side

8 CONEXÕES EM PARALELO

Page 47: Web Performance Client Side

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

Page 48: Web Performance Client Side

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

Page 49: Web Performance Client Side

IEChave no Registro

Page 50: Web Performance Client Side

USAR UMA CDNUSAR UMA CDNContent Delivery NetworkContent Delivery Network

Page 51: Web Performance Client Side

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

Page 52: Web Performance Client Side

SERVIÇOS PÚBLICOSGoogle AJAX Libraries

YUI hosting on Yahoo! network(somente javascript)

Page 53: Web Performance Client Side
Page 54: Web Performance Client Side
Page 55: Web Performance Client Side
Page 56: Web Performance Client Side

SERVIÇOS PAGOSAmazon Cloudfront S3

Akamai

Page 57: Web Performance Client Side

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

Page 58: Web Performance Client Side
Page 59: Web Performance Client Side

ARQUIVOS ESTÁTICOSNÃO EXPIRAM NUNCA

Page 60: Web Performance Client Side

AO MUDAR UM ARQUIVO,ADICIONAR UM TIMESTAMP

À QUERYSTRING OU AO NOME DE ARQUIVO

Page 61: Web Performance Client Side

DICA: NÃO USAR TIMESTAMP NA QUERYSTRING

<link

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

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

Page 62: Web Performance Client Side

USAR TIMESTAMPNO NOME DE ARQUIVO

<link

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

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

Page 63: Web Performance Client Side

.htaccess

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

Page 64: Web Performance Client Side

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

Page 65: Web Performance Client Side

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

Page 66: Web Performance Client Side
Page 67: Web Performance Client Side

LAST_MODIFIEDLAST_MODIFIEDQuando uma páginaQuando uma página

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

Page 68: Web Performance Client Side
Page 69: Web Performance Client Side

GZIPAR COMPONENTESCSS, HTML, Scripts

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

Page 70: Web Performance Client Side

90% dos browsers atuais suportam gzip

Page 71: Web Performance Client Side

STYLESHEETS NO TOPO DA PÁGINA

Page 72: Web Performance Client Side

Páginas ‘parecem’ carregar mais rapidamente

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

Page 73: Web Performance Client Side

JAVASCRIPTS NO FINAL DA PÁGINA

Page 74: Web Performance Client Side

Scripts bloqueiam downloads paralelos

Scripts com document.write

Atributo DEFER

Page 75: Web Performance Client Side

EVITAREXPRESSÕES CSS

Page 76: Web Performance Client Side

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

"#B8D4FF" : "#F08A00" );

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

Page 77: Web Performance Client Side

USAR JAVASCRIPT E CSS EXTERNAMENTE

Page 78: Web Performance Client Side

Exceção:

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

Page 79: Web Performance Client Side

REDUZIR QUERIES DNS

Page 80: Web Performance Client Side

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

hostnames diferentes.

Page 81: Web Performance Client Side

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

Page 82: Web Performance Client Side

REDUZIR TAMANHO DE ARQUIVOS JS E CSS

(MINIFY)

Page 83: Web Performance Client Side

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

Page 84: Web Performance Client Side

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

Page 85: Web Performance Client Side

EVITAR REDIRECTSConexões desnecessárias

Page 86: Web Performance Client Side

HTTP/1.1 301 Moved Permanently

Location: http://example.com/newuri

Content-Type: text/html

Page 87: Web Performance Client Side

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

Page 88: Web Performance Client Side

REMOVER SCRIPTS DUPLICADOS

Isso acontece!

Page 89: Web Performance Client Side

CACHEAR AJAX

Page 90: Web Performance Client Side

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.

Page 91: Web Performance Client Side

EM REQUISIÇÕES AJAXUSE O MÉTODO GET

Page 92: Web Performance Client Side

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.

Page 93: Web Performance Client Side

POST LOADDE

COMPONENTES

Page 94: Web Performance Client Side

Drag-and-dropAnimações

Imagens e vídeos depois do “fold”

Page 95: Web Performance Client Side

YUI Image LoaderYUI Get utility

Page 96: Web Performance Client Side

PRE LOADDE

COMPONENTES

Page 97: Web Performance Client Side

UNCONDITIONAL PRELOAD

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

alguns componentes extras.

Page 98: Web Performance Client Side

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.

Page 99: Web Performance Client Side

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.

Page 100: Web Performance Client Side

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

digitar na caixa de busca.

Page 101: Web Performance Client Side

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

lento do que antes”

Page 102: Web Performance Client Side

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.

Page 103: Web Performance Client Side

REDUZIR A QUANTIDADE ELEMENTOS DOM

Buscar otimização de markup

Page 104: Web Performance Client Side

document.getElementsByTagName('*').length

Page 105: Web Performance Client Side

REDUZIRUSO

DE IFRAMES

Page 106: Web Performance Client Side

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.

Page 107: Web Performance Client Side

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

Page 108: Web Performance Client Side

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

Page 109: Web Performance Client Side

REDUZIR TAMANHO DECOOKIES

Page 110: Web Performance Client Side

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)

Page 111: Web Performance Client Side

DOMÍNIOS SEM COOKIESPARA COMPONENTES

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

Page 112: Web Performance Client Side

SMART EVENT HANDLERSEvent Handling

vs.Event Delegation

Page 113: Web Performance Client Side

EVENT HANDLING

Atachar eventos a vários links

dentro de um DIV

Page 114: Web Performance Client Side

PROBLEMAS

Muitos eventos atachados Memory Leaks

Possibilidade alta de crashDegradação de performance

Precisa atachar eventos novamente, caso o DOM mude

Page 115: Web Performance Client Side

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

Page 116: Web Performance Client Side

VANTAGENS

Usa menos memóriaPágina fica mais ágil

Fácil de usarEventos centralizados em um único

trecho de código (manutenção)

Page 117: Web Performance Client Side

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

Page 118: Web Performance Client Side

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

Page 119: Web Performance Client Side

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

Page 120: Web Performance Client Side

<style>

@import url('a.css');

</style>

Page 121: Web Performance Client Side

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

<style>

@import url('b.css');

</style>

IE 6,7,8

Page 122: Web Performance Client Side

Dentro do HTML:

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

Dentro de a.css:

@import url('b.css');

Todos os browsers

Page 123: Web Performance Client Side

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

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

Downloads em paralelo(em todos os browsers)

Page 124: Web Performance Client Side

OTIMIZAÇÃO DE IMAGENS

Page 125: Web Performance Client Side

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

Converter GIFs para PNG

Page 126: Web Performance Client Side

Otimizar PNGpngcrush image.png -rem alla -reduce -

brute result.png

Otimizar JPGjpegtran -copy none -optimize -perfect

src.jpg dest.jpg

Page 127: Web Performance Client Side
Page 128: Web Performance Client Side

OTIMIZAÇÃO DE

CSS SPRITES

Page 129: Web Performance Client Side

Arranjar imagens horizontalmente geralmente resulta em arquivos

menores

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

usar PNG8

Page 130: Web Performance Client Side

SELETORESCSS

EFICIENTES

Page 131: Web Performance Client Side

DIV.content * {

}

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

Page 132: Web Performance Client Side

BAD!

button#backButton { }

.menu-left#newMenuIcon { }

GOOD!

#backButton { }

#newMenuIcon { }

Não qualificar regras de ID com tags ouclasses

Page 133: Web Performance Client Side

BAD!

span.indented { }

GOOD!

.span-indented { }

Não qualificar regras de Classe com tags

Page 134: Web Performance Client Side

USAR ARQUIVOS JSQUE SÓ CONTENHAM

CÓDIGO QUE SERÁ USADONA PÁGINAFramework YUI

Page 135: Web Performance Client Side

COLOQUE O TAMANHO DAS IMAGENS NO HTML

Não colocar valores

menores oumaioresdo que o tamanho real da imagem

Page 136: Web Performance Client Side

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

Imagem original 570x378 pixels

Page 137: Web Performance Client Side

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

Imagem original 570x378 pixels

Page 138: Web Performance Client Side

FAVICON.ICOPEQUENO

E CACHEÁVEL

Page 139: Web Performance Client Side

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

Page 140: Web Performance Client Side

QUANDO?

Page 141: Web Performance Client Side

SEMPRE!

Page 142: Web Performance Client Side

AS EQUIPES MUDAMOS FRAMEWORKS MUDAMAS NECESSIDADES MUDAM

MAS O SITE DEVE CONTINUAR COM ALTA PERFORMANCE

Page 143: Web Performance Client Side

LIVROS

Page 144: Web Performance Client Side

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

(Steve Souders)

Page 145: Web Performance Client Side

Even Faster Web Sites: Performance Best Practices for Web Developers

(Steve Souders)

Page 146: Web Performance Client Side

BLOGS

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

Page 147: Web Performance Client Side

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

Page 148: Web Performance Client Side

EVENTOS

Velocityhttp://en.oreilly.com/velocity2009

Page 149: Web Performance Client Side

DÚVIDAS?

Page 150: Web Performance Client Side

OBRIGADO!

FT-SITEhttp://levycarneiro.com