Web Performance Client Side
-
Upload
levy-carneiro-jr -
Category
Technology
-
view
2.047 -
download
5
Transcript of Web Performance Client Side
![Page 1: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/1.jpg)
WEB PERFORMANCE CLIENTWEB PERFORMANCE CLIENT--SIDESIDE
![Page 2: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/2.jpg)
SITESSITESLENTOSLENTOS
![Page 3: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/3.jpg)
RAIVA
![Page 4: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/4.jpg)
FRUSTRAÇÃOFRUSTRAÇÃO
![Page 5: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/5.jpg)
ABANDONOABANDONO
![Page 6: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/6.jpg)
O QUE É?
![Page 7: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/7.jpg)
ESCALAR UM SITE PARA ESCALAR UM SITE PARA MILHÕES DE USUÁRIOSMILHÕES DE USUÁRIOS
![Page 8: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/8.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/9.jpg)
Otimizandoserver time em
50%
200 ms -> 100 ms
![Page 10: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/10.jpg)
REDUÇÃO NOTEMPO TOTAL
4 s -> 3,9 s
SÓ 2,5%
![Page 11: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/11.jpg)
REDUÇÃO NOTEMPO TOTAL
4 s -> 3,9 s
SÓ 2,5%
![Page 12: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/12.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/13.jpg)
POR QUÊ?
![Page 14: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/14.jpg)
NÚMEROS
![Page 15: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/15.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/16.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/17.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/18.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/19.jpg)
Usuários que experimentam load times
mais rápidos visualizam50%maispáginas por visita
![Page 20: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/20.jpg)
Redução de 2 para 1 segundo em load time, reduziu Exit Rate
de 15% para 10%
![Page 21: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/21.jpg)
“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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/22.jpg)
QUEM?
![Page 23: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/23.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/24.jpg)
COMO?
![Page 25: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/25.jpg)
![Page 26: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/26.jpg)
YSLOW
![Page 27: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/27.jpg)
PAGE SPEED
![Page 28: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/28.jpg)
SAFARI
![Page 29: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/29.jpg)
INICIATIVAS
![Page 30: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/30.jpg)
YAHOOBest Practices for Speeding Up Your
Web Site
http://developer.yahoo.com/performance/rules.html
![Page 31: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/31.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/32.jpg)
REDUZIR O NÚMERODE CONEXÕES
HTTP
![Page 33: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/33.jpg)
AGRUPAR ARQUIVOS CSS E JS
EM ARQUIVOS ÚNICOS E CACHEADOS
![Page 34: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/34.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/35.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/36.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/37.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/38.jpg)
CSS SPRITES
![Page 39: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/39.jpg)
![Page 40: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/40.jpg)
![Page 41: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/41.jpg)
a.buy {
transparent url(/images/sprites.gif)
no-repeat
scroll
-358px
-268px;
}
![Page 42: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/42.jpg)
DIVIDIR COMPONENTESENTRE DOMÍNIOS
![Page 43: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/43.jpg)
css.static.mysite.comimg.static.mysite.com
scripts.static.mysite.com
![Page 44: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/44.jpg)
2 CONEXÕES EM PARALELO
![Page 45: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/45.jpg)
4 CONEXÕES EM PARALELO
![Page 46: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/46.jpg)
8 CONEXÕES EM PARALELO
![Page 47: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/47.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/48.jpg)
FIREFOXabout:confignetwork.http.max-persistent-connections-per-server
![Page 49: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/49.jpg)
IEChave no Registro
![Page 50: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/50.jpg)
USAR UMA CDNUSAR UMA CDNContent Delivery NetworkContent Delivery Network
![Page 51: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/51.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/52.jpg)
SERVIÇOS PÚBLICOSGoogle AJAX Libraries
YUI hosting on Yahoo! network(somente javascript)
![Page 53: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/53.jpg)
![Page 54: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/54.jpg)
![Page 55: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/55.jpg)
![Page 56: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/56.jpg)
SERVIÇOS PAGOSAmazon Cloudfront S3
Akamai
![Page 57: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/57.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/58.jpg)
![Page 59: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/59.jpg)
ARQUIVOS ESTÁTICOSNÃO EXPIRAM NUNCA
![Page 60: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/60.jpg)
AO MUDAR UM ARQUIVO,ADICIONAR UM TIMESTAMP
À QUERYSTRING OU AO NOME DE ARQUIVO
![Page 61: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/61.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/62.jpg)
USAR TIMESTAMPNO NOME DE ARQUIVO
<link
href="/stylesheets/styles.20090815142059.css“
media="screen" rel="stylesheet" type="text/css" />
![Page 63: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/63.jpg)
.htaccess
RewriteRule ^(.+)\.(\d{14})\.(js|css|png|gif|jpg)$ $1.$3 [L]
![Page 64: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/64.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/65.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/66.jpg)
![Page 67: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/67.jpg)
LAST_MODIFIEDLAST_MODIFIEDQuando uma páginaQuando uma página
foi modificada pela última vezfoi modificada pela última vez??
![Page 68: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/68.jpg)
![Page 69: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/69.jpg)
GZIPAR COMPONENTESCSS, HTML, Scripts
(imagens, PDF, Flash já são compactados)
![Page 70: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/70.jpg)
90% dos browsers atuais suportam gzip
![Page 71: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/71.jpg)
STYLESHEETS NO TOPO DA PÁGINA
![Page 72: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/72.jpg)
Páginas ‘parecem’ carregar mais rapidamente
HTML sendo montado serve como indicação do carregamento da página
![Page 73: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/73.jpg)
JAVASCRIPTS NO FINAL DA PÁGINA
![Page 74: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/74.jpg)
Scripts bloqueiam downloads paralelos
Scripts com document.write
Atributo DEFER
![Page 75: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/75.jpg)
EVITAREXPRESSÕES CSS
![Page 76: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/76.jpg)
background-color: expression( (new Date()).getHours()%2 ?
"#B8D4FF" : "#F08A00" );
Eventos são executados muitas vezes(gerando processamento adicional)
![Page 77: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/77.jpg)
USAR JAVASCRIPT E CSS EXTERNAMENTE
![Page 78: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/78.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/79.jpg)
REDUZIR QUERIES DNS
![Page 80: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/80.jpg)
Influencia a quantidade de conexões paralelas. O ideal é usar de 2 a 4
hostnames diferentes.
![Page 81: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/81.jpg)
Google Chrome acelera navegação fazendo pre-resolv de links
![Page 82: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/82.jpg)
REDUZIR TAMANHO DE ARQUIVOS JS E CSS
(MINIFY)
![Page 83: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/83.jpg)
(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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/84.jpg)
(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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/85.jpg)
EVITAR REDIRECTSConexões desnecessárias
![Page 86: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/86.jpg)
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
![Page 87: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/87.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/88.jpg)
REMOVER SCRIPTS DUPLICADOS
Isso acontece!
![Page 89: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/89.jpg)
CACHEAR AJAX
![Page 90: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/90.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/91.jpg)
EM REQUISIÇÕES AJAXUSE O MÉTODO GET
![Page 92: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/92.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/93.jpg)
POST LOADDE
COMPONENTES
![Page 94: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/94.jpg)
Drag-and-dropAnimações
Imagens e vídeos depois do “fold”
![Page 95: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/95.jpg)
YUI Image LoaderYUI Get utility
![Page 96: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/96.jpg)
PRE LOADDE
COMPONENTES
![Page 97: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/97.jpg)
UNCONDITIONAL PRELOAD
Assim que o evento “onLoad” é disparado, sua página começa a baixar
alguns componentes extras.
![Page 98: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/98.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/99.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/100.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/101.jpg)
ANTICIPATED PRELOAD“O novo site é legal, mas está mais
lento do que antes”
![Page 102: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/102.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/103.jpg)
REDUZIR A QUANTIDADE ELEMENTOS DOM
Buscar otimização de markup
![Page 104: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/104.jpg)
document.getElementsByTagName('*').length
![Page 105: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/105.jpg)
REDUZIRUSO
DE IFRAMES
![Page 106: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/106.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/107.jpg)
IFRAMEScompartilham o pool de conexões do browser, deixando o site mais lento
![Page 108: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/108.jpg)
SEM ERROS 404SEM ERROS 404EmEm scripts, scripts, csscss,, imagensimagens
![Page 109: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/109.jpg)
REDUZIR TAMANHO DECOOKIES
![Page 110: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/110.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/111.jpg)
DOMÍNIOS SEM COOKIESPARA COMPONENTES
Browser não deve enviar cookies ao requisitar css, scripts e imagens
![Page 112: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/112.jpg)
SMART EVENT HANDLERSEvent Handling
vs.Event Delegation
![Page 113: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/113.jpg)
EVENT HANDLING
Atachar eventos a vários links
dentro de um DIV
![Page 114: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/114.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/115.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/116.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/117.jpg)
// 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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/118.jpg)
NÃO USAR NÃO USAR @IMPORT@IMPORT
![Page 119: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/119.jpg)
<link rel='stylesheet' href='a.css'>
![Page 120: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/120.jpg)
<style>
@import url('a.css');
</style>
![Page 121: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/121.jpg)
<link rel='stylesheet' href='a.css'>
<style>
@import url('b.css');
</style>
IE 6,7,8
![Page 122: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/122.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/123.jpg)
<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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/124.jpg)
OTIMIZAÇÃO DE IMAGENS
![Page 125: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/125.jpg)
Verificar se GIFs estão usando tamanho de paleta de cores adequada
Converter GIFs para PNG
![Page 126: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/126.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/127.jpg)
![Page 128: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/128.jpg)
OTIMIZAÇÃO DE
CSS SPRITES
![Page 129: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/129.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/130.jpg)
SELETORESCSS
EFICIENTES
![Page 131: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/131.jpg)
DIV.content * {
}
SELETOR-CHAVEPrimeiro elemento à direita.Quanto mais abrangente, pior
![Page 132: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/132.jpg)
BAD!
button#backButton { }
.menu-left#newMenuIcon { }
GOOD!
#backButton { }
#newMenuIcon { }
Não qualificar regras de ID com tags ouclasses
![Page 133: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/133.jpg)
BAD!
span.indented { }
GOOD!
.span-indented { }
Não qualificar regras de Classe com tags
![Page 134: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/134.jpg)
USAR ARQUIVOS JSQUE SÓ CONTENHAM
CÓDIGO QUE SERÁ USADONA PÁGINAFramework YUI
![Page 135: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/135.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/136.jpg)
<img height=“70“ width=“45" src="img/foto.jpg“ />
Imagem original 570x378 pixels
![Page 137: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/137.jpg)
<img height=“70“ width=“45" src="img/foto.jpg“ />
Imagem original 570x378 pixels
![Page 138: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/138.jpg)
FAVICON.ICOPEQUENO
E CACHEÁVEL
![Page 139: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/139.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/140.jpg)
QUANDO?
![Page 141: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/141.jpg)
SEMPRE!
![Page 142: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/142.jpg)
AS EQUIPES MUDAMOS FRAMEWORKS MUDAMAS NECESSIDADES MUDAM
MAS O SITE DEVE CONTINUAR COM ALTA PERFORMANCE
![Page 143: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/143.jpg)
LIVROS
![Page 144: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/144.jpg)
High Performance Web Sites:Essential Knowledge for Front-End Engineers
(Steve Souders)
![Page 145: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/145.jpg)
Even Faster Web Sites: Performance Best Practices for Web Developers
(Steve Souders)
![Page 146: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/146.jpg)
BLOGS
High Performance Web Sites bloghttp://www.stevesouders.com/blog/
![Page 147: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/147.jpg)
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](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/148.jpg)
EVENTOS
Velocityhttp://en.oreilly.com/velocity2009
![Page 149: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/149.jpg)
DÚVIDAS?
![Page 150: Web Performance Client Side](https://reader033.fdocumentos.com/reader033/viewer/2022052303/5563294ed8b42a61348b4e1a/html5/thumbnails/150.jpg)
OBRIGADO!
FT-SITEhttp://levycarneiro.com