View
942
Download
1
Category
Preview:
Citation preview
OTIMIZAÇÃOCLIENT-SIDE
quantos desistiram de visitar seu site antes
de concluir o carregamento?
concorrência a um clique
a culpa não é da conexãodo usuário
Server-side 20%
Client-side 80%
onde é gasto o tempo de carregamento?
como funciona o carregamento?html
csscss
javascriptimagemimagem
imagemimagem
imagemimagem
javascript
1 2 3 4 5
reduza o número de requisições
1
CSS Sprites
add.png remove.png
user.png view.png
edit.png sprite.png
5 arquivos4.36 KB
1 arquivo4.27 KB
<a>
a.edit { background-position:center -26px; }
26px
<a>
combinescripts e folhas de estilo
modularizaçãox
otimização
compacte
os componentes
2
Accept-Encoding: gzip, deflate
Content-Encoding: gzip
html javascript css
AddOutPutFilterByType DEFLATE text/html text/css aplication/x-javascript
.htaccess
até
50%
aproveite-sedo cache
3
Expires: Sun, 12 Sep 2010 09:52:06 GMT
GET /imagens/logo.gif
<FilesMatch “\.(png|gif|jpg|js|css)$” >ExpiresDefault “access plus 10 years”
</FilesMatch>
.htaccess
utilize em todos os componentes que não são atualizados com freqüência
utilize nome de arquivo com versão
<link rel=“stylesheet” type=“text/css” href=“estilo.css?20090811” />
ou<link rel=“stylesheet” type=“text/css” href=“estilo.1.0.4.css” />
1ª visita:
visitas seguintes:
0%
mais de50%
estilos vão no inicioe scripts no final
4
aproveite-se da visualização progressiva:
estilos vão no <head>
scripts bloqueiam conexões paralelas
html
csscss
javascript
imagemimagem
imagemimagem
flash
melhor opção: jogue-os para o final
html
csscss
javascript
imagemimagem
imagemimagem
flash
javascript
minimizeo javascript
5
minimizaçãox
ofuscamento
Original:
117 KB
Ofuscamento com /packer/:http://dean.edwards.name/packer/
38KB
http://www.crockford.com/javascript/jsmin.htmlMinimização com JSMIN:
72KB
1
2
3
4
5 minimize o javascript
reduza o número de requisições
compacte os componentes
aproveite-se do cache
estilos vão no inicio e scripts no final
?
Alta Performance em Sites WebSteve Souders - Alta Books
Obrigado!
Andre Metzenmetzen@imasters.com.br
@metzen
Recommended