Upload
levy-carneiro-jr
View
2.047
Download
5
Embed Size (px)
Citation preview
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