Web performance client-side

ESCALAR UM SITE PARA
MILHÕES DE USUÁRIOS

Receber a página
do servidor: 200 ms

Carregar a página
no browser: 3,8 s

TOTAL = 4 s

Otimizando
server time em
50%

200 ms -> 100 ms

REDUÇÃO NO
TEMPO 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.

Otimizações em imagens tornaram o site
de2x a 3x mais rápido,
com significante aumento de interação com o usuário

Um delay de 400ms causou uma
redução de 0.59% em buscas
por usuário

2 segundos causou uma redução de
Demora de

4,3% em receita por usuá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 visualizam 50% mais
pá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)

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.

YAHOO
Best Practices for Speeding Up Your
Web Site

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

GOOGLE
Let’s make the web faster
http://code.google.com/speed/

REDUZIR O NÚMERO
DE CONEXÕES
HTTP

AGRUPAR ARQUIVOS
CSS E JS
EM ARQUIVOS ÚNICOS E
CACHEADOS

RUBY ON RAILS
Na 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" />

a.buy {
transparent url(/images/sprites.gif)
no-repeat
scroll
-358px
-268px;
}

DIVIDIR COMPONENTES
ENTRE DOMÍNIOS

css.static.mysite.com
img.static.mysite.com
scripts.static.mysite.com

CONEXÕES PARALELAS POR BROWSER

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

FIREFOX
about:config
network.http.max-persistent-connections-
per-server

USAR UMA CDN
Content Delivery Network

YAHOO!
Sites do Yahoo! que moveram seu
conteúdo estático para uma CDN
tiveram uma melhora
de20% ou mais
no tempo de carregamento
do site

SERVIÇOS PÚBLICOS
Google AJAX Libraries
YUI hosting on Yahoo! network
(somente javascript)

SERVIÇOS PAGOS
Amazon Cloudfront S3
Akamai

USAR CONTROLES DE CACHE

Sem isto usuários visitam
um site baixando
as mesmas imagens, scripts e CSS
(que raramente são atualizados)
todas as vezes que acessam o site

ARQUIVOS ESTÁTICOS
NÃ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 TIMESTAMP
NO 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_AGE

Define que o
conteúdo
de uma página
é válido
por N segundos

Cache-Control: max-age=600

(se o botão Refresh for usado,
o browser baixa o conteúdo novamente)

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

Etag: "620b360455bf03e96951d2…"

LAST_MODIFIED
Quando uma página
foi modificada pela última vez?

GZIPAR COMPONENTES
CSS, 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

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

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)

JQUERY 1.3.2 (Sem compressão)

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

EVITAR REDIRECTS
Conexõ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!

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 AJAX
USE 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.

Drag-and-drop
Animações
Imagens e vídeos depois do “fold”

YUI Image Loader
YUI Get utility

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 em
google.com, mas somente nas páginas
seguintes, no resultado da busca.

CONDITIONAL PRELOAD

Baseado na ação do usuário a página faz
um “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

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.

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

SEM ERROS 404
Em scripts, css, imagens

REDUZIR TAMANHO DE
COOKIES

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 COOKIES
PARA COMPONENTES
Browser não deve enviar cookies ao
requisitar css, scripts e imagens

SMART EVENT HANDLERS
Event 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 crash
Degradação de performance
Precisa atachar eventos novamente,
caso o DOM mude

EVENT BUBBLING
Atachar eventos a um elemento-pai (um
DIV por exemplo) e capturar os eventos
de seus links

VANTAGENS
Usa menos memória
Página fica mais ágil
Fácil de usar
Eventos 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;

Dentro do HTML:
Dentro de a.css:
@import url('b.css');

Todos os browsers

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

Converter GIFs para PNG

Otimizar PNG
pngcrush image.png -rem alla -reduce -
brute result.png

Otimizar JPG
jpegtran -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

SELETOR-CHAVE
Primeiro elemento à direita.
Quanto mais abrangente, pior

DIV.content * {
}

Não qualificar regras de ID com tags ou
classes

BAD!
button#backButton { }
.menu-left#newMenuIcon { }

GOOD!
#backButton { }
#newMenuIcon { }

Não qualificar regras de Classe com tags

BAD!
span.indented { }

GOOD!
.span-indented { }

USAR ARQUIVOS JS
QUE SÓ CONTENHAM
CÓDIGO QUE SERÁ USADO
NA PÁGINA
Framework YUI

COLOQUE O TAMANHO
DAS IMAGENS NO HTML

Não colocar valores
menoresou maiores
do que o tamanho real da imagem

Imagem original 570x378 pixels

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

FAVICON.ICO
PEQUENO
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

AS EQUIPES MUDAM
OS FRAMEWORKS MUDAM
AS NECESSIDADES MUDAM

MAS O SITE
DEVE CONTINUAR COM
ALTA PERFORMANCE

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 blog
http://www.stevesouders.com/blog/

VÍDEOS
Curso - High Performance Web Sites
http://www.stevesouders.com/blog/200
9/05/20/stanford-videos-available/

Speed Up Your JavaScript
http://www.youtube.com/watch?v=mHt
dZgou0qU

EVENTOS
Velocity
http://en.oreilly.com/velocity2009

OBRIGADO!

FT-SITE
http://levycarneiro.com

Web performance client-side

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (6)

Similaire à Web performance client-side

Similaire à Web performance client-side (20)

Web performance client-side