Transcript
Page 1: Otimização Client Side

OTIMIZAÇÃOCLIENT-SIDE

Page 2: Otimização Client Side

quantos desistiram de visitar seu site antes

de concluir o carregamento?

Page 3: Otimização Client Side

concorrência a um clique

Page 4: Otimização Client Side

a culpa não é da conexãodo usuário

Page 5: Otimização Client Side

Server-side 20%

Client-side 80%

onde é gasto o tempo de carregamento?

Page 6: Otimização Client Side

como funciona o carregamento?html

csscss

javascriptimagemimagem

imagemimagem

imagemimagem

javascript

Page 7: Otimização Client Side

1 2 3 4 5

Page 8: Otimização Client Side

reduza o número de requisições

1

Page 9: Otimização Client Side
Page 10: Otimização Client Side
Page 11: Otimização Client Side

CSS Sprites

Page 12: Otimização Client Side

add.png remove.png

user.png view.png

edit.png sprite.png

5 arquivos4.36 KB

1 arquivo4.27 KB

Page 13: Otimização Client Side
Page 14: Otimização Client Side
Page 15: Otimização Client Side

<a>

a.edit { background-position:center -26px; }

26px

<a>

Page 16: Otimização Client Side

combinescripts e folhas de estilo

Page 17: Otimização Client Side

modularizaçãox

otimização

Page 18: Otimização Client Side

compacte

os componentes

2

Page 19: Otimização Client Side

Accept-Encoding: gzip, deflate

Content-Encoding: gzip

Page 20: Otimização Client Side

html javascript css

AddOutPutFilterByType DEFLATE text/html text/css aplication/x-javascript

.htaccess

Page 21: Otimização Client Side

até

50%

Page 22: Otimização Client Side

aproveite-sedo cache

3

Page 23: Otimização Client Side

Expires: Sun, 12 Sep 2010 09:52:06 GMT

GET /imagens/logo.gif

Page 24: Otimização Client Side

<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

Page 25: Otimização Client Side

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

Page 26: Otimização Client Side

1ª visita:

visitas seguintes:

0%

mais de50%

Page 27: Otimização Client Side

estilos vão no inicioe scripts no final

4

Page 28: Otimização Client Side

aproveite-se da visualização progressiva:

estilos vão no <head>

Page 29: Otimização Client Side

scripts bloqueiam conexões paralelas

html

csscss

javascript

imagemimagem

imagemimagem

flash

Page 30: Otimização Client Side

melhor opção: jogue-os para o final

html

csscss

javascript

imagemimagem

imagemimagem

flash

javascript

Page 31: Otimização Client Side

minimizeo javascript

5

Page 32: Otimização Client Side

minimizaçãox

ofuscamento

Page 33: Otimização Client Side

Original:

117 KB

Ofuscamento com /packer/:http://dean.edwards.name/packer/

38KB

http://www.crockford.com/javascript/jsmin.htmlMinimização com JSMIN:

72KB

Page 34: Otimização Client Side

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

Page 35: Otimização Client Side

?

Page 36: Otimização Client Side

Alta Performance em Sites WebSteve Souders - Alta Books

Page 37: Otimização Client Side

Obrigado!

Andre [email protected]

@metzen


Top Related