OTIMIZAÇÃOCLIENT-SIDE<br />
quantos desistiram de visitar seu site antesde concluir o carregamento?<br />
concorrência a um clique<br />
a culpa não é da conexãodo usuário<br />
onde é gasto o tempo de carregamento?<br />
como funciona o carregamento?<br />html<br />css<br />css<br />javascript<br />imagem<br />imagem<br />imagem<br />imagem<...
GET /index.html<br />Host:		meusite.com<br />Accept:		text/html,application/xhtml+xml<br />Accept-Language:	pt-br,pt;q=0.8...
Firebug<br />Google Page Speed<br />Yahoo YSlow<br />
1<br />2<br />3<br />4<br />5<br />
1<br />reduza o número de <br />requisições<br />
CSS Sprites<br />
add.png<br />remove.png<br />5 arquivos<br />4.36 KB<br />1 arquivo<br />4.27 KB<br />user.png<br />view.png<br />edit.png...
a.edit { background-position:center -26px; }<br />26px<br />&lt;a&gt;<br />&lt;a&gt;<br />
combinescripts e folhas de estilo<br />
modularizaçãoxotimização<br />
Imagens embutidas<br />&lt;imgalt=“Imagem Embutida” src=“data:image/gif;base64,R01GODlhDAAMALMLAPN8FFBiYvWWlvrJKy/FvcPewsO...
2<br />compacte<br />os componentes<br />
Accept-Encoding: gzip, deflate<br />Content-Encoding: gzip<br />
html<br />javascript<br />css<br />.htaccess<br />AddOutPutFilterByType DEFLATE text/html text/css aplication/x-javascript...
até<br />50%<br />
3<br />aproveite-se<br />do cache<br />
GET /imagens/logo.gif<br />Expires: Sun, 12 Sep 2010 09:52:06 GMT<br />
.htaccess<br />&lt;FilesMatch “.(png|gif|jpg|js|css)$” &gt;<br />ExpiresDefault “accessplus 10 years”<br />&lt;/FilesMatch...
utilize nome de arquivo com versão<br />&lt;link rel=“stylesheet” type=“text/css” href=“estilo.css?20090811” /&gt;<br />ou...
1ª visita:<br />0%<br />visitas seguintes:<br />mais de<br />50%<br />
4<br />estilos vão no inicio<br />e scripts no final<br />
aproveite-se da <br />visualização progressiva:<br />estilos vão no &lt;head&gt;<br />
scripts bloqueiam conexões paralelas<br />html<br />javascript<br />css<br />css<br />imagem<br />imagem<br />imagem<br />...
melhor opção: jogue-os para o final<br />html<br />css<br />css<br />imagem<br />imagem<br />imagem<br />imagem<br />flash...
5<br />minimize<br />o javascript<br />
minimização<br />x<br />ofuscamento<br />
Original:<br />117 KB<br />Ofuscamento com /packer/:<br />http://dean.edwards.name/packer/<br />38KB<br />Minimização com ...
1<br />reduza o número de requisições<br />compacte os componentes<br />2<br />3<br />aproveite-se do cache<br />estilos v...
Upcoming SlideShare
Loading in...5
×

Otimização Client Side

936

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
936
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Otimização Client Side

  1. 1. OTIMIZAÇÃOCLIENT-SIDE<br />
  2. 2. quantos desistiram de visitar seu site antesde concluir o carregamento?<br />
  3. 3. concorrência a um clique<br />
  4. 4. a culpa não é da conexãodo usuário<br />
  5. 5. onde é gasto o tempo de carregamento?<br />
  6. 6. como funciona o carregamento?<br />html<br />css<br />css<br />javascript<br />imagem<br />imagem<br />imagem<br />imagem<br />imagem<br />imagem<br />javascript<br />
  7. 7. GET /index.html<br />Host: meusite.com<br />Accept: text/html,application/xhtml+xml<br />Accept-Language: pt-br,pt;q=0.8,en-us;q=0.5,en;q=0.3<br />Accept-Encoding: gzip,deflate<br />Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7<br />Cache-Control: max-age=0<br />HTTP/1.1 200 OK<br />Date: Sat, 05 Sep 2009 17:53:21 GMT<br />Expires: Thu, 19 Nov 1981 08:52:00 GMT<br />Vary: Accept-Encoding,User-Agent<br />Content-Encoding: gzip<br />Content-Length: 16614<br />Content-Type: text/html<br />
  8. 8. Firebug<br />Google Page Speed<br />Yahoo YSlow<br />
  9. 9. 1<br />2<br />3<br />4<br />5<br />
  10. 10. 1<br />reduza o número de <br />requisições<br />
  11. 11.
  12. 12.
  13. 13. CSS Sprites<br />
  14. 14. add.png<br />remove.png<br />5 arquivos<br />4.36 KB<br />1 arquivo<br />4.27 KB<br />user.png<br />view.png<br />edit.png<br />sprite.png<br />
  15. 15.
  16. 16.
  17. 17. a.edit { background-position:center -26px; }<br />26px<br />&lt;a&gt;<br />&lt;a&gt;<br />
  18. 18. combinescripts e folhas de estilo<br />
  19. 19. modularizaçãoxotimização<br />
  20. 20. Imagens embutidas<br />&lt;imgalt=“Imagem Embutida” src=“data:image/gif;base64,R01GODlhDAAMALMLAPN8FFBiYvWWlvrJKy/FvcPewsO0VVfajo+w6O/z15estLv/8AAAAAAAAAAAAACH5BAEAAAsALAAAAAAAmwAAzcElZyryTUgknHd9xGV+qKsYirKkwDYiKDBiatt2H1KBlQRFIJAIKywRgmH=” /&gt;<br />&lt;spanclass=”imagem_embutida”&gt;&lt;/span&gt;<br />span.imagem_embutida { background-image: url(data:image/gif;base64,R01GODlhDAAMALMLAPN8FFBiYvWWlvrJKy/FvcPewsO0VVfajo+w6O/z15estLv/8AAAAAAAAAAAAACH5BAEAAAsALAAAAAAAmwAAzcElZyryTUgknHd9xGV+qKsYirKkwDYiKDBiatt2H1KBlQRFIJAIKywRgmH=);<br />
  21. 21. 2<br />compacte<br />os componentes<br />
  22. 22. Accept-Encoding: gzip, deflate<br />Content-Encoding: gzip<br />
  23. 23. html<br />javascript<br />css<br />.htaccess<br />AddOutPutFilterByType DEFLATE text/html text/css aplication/x-javascript<br />
  24. 24. até<br />50%<br />
  25. 25. 3<br />aproveite-se<br />do cache<br />
  26. 26. GET /imagens/logo.gif<br />Expires: Sun, 12 Sep 2010 09:52:06 GMT<br />
  27. 27. .htaccess<br />&lt;FilesMatch “.(png|gif|jpg|js|css)$” &gt;<br />ExpiresDefault “accessplus 10 years”<br />&lt;/FilesMatch&gt;<br />utilize em todos os componentes que <br />não são atualizados com freqüência<br />
  28. 28. utilize nome de arquivo com versão<br />&lt;link rel=“stylesheet” type=“text/css” href=“estilo.css?20090811” /&gt;<br />ou<br />&lt;link rel=“stylesheet” type=“text/css” href=“estilo.1.0.4.css” /&gt;<br />
  29. 29. 1ª visita:<br />0%<br />visitas seguintes:<br />mais de<br />50%<br />
  30. 30. 4<br />estilos vão no inicio<br />e scripts no final<br />
  31. 31. aproveite-se da <br />visualização progressiva:<br />estilos vão no &lt;head&gt;<br />
  32. 32. scripts bloqueiam conexões paralelas<br />html<br />javascript<br />css<br />css<br />imagem<br />imagem<br />imagem<br />imagem<br />flash<br />
  33. 33. melhor opção: jogue-os para o final<br />html<br />css<br />css<br />imagem<br />imagem<br />imagem<br />imagem<br />flash<br />javascript<br />javascript<br />
  34. 34. 5<br />minimize<br />o javascript<br />
  35. 35. minimização<br />x<br />ofuscamento<br />
  36. 36. Original:<br />117 KB<br />Ofuscamento com /packer/:<br />http://dean.edwards.name/packer/<br />38KB<br />Minimização com JSMIN:<br />http://www.crockford.com/javascript/jsmin.html<br />72KB<br />
  37. 37. 1<br />reduza o número de requisições<br />compacte os componentes<br />2<br />3<br />aproveite-se do cache<br />estilos vão no inicio e scripts no final<br />4<br />minimize o javascript<br />5<br />
  38. 38. ?<br />
  39. 39. Alta Performance em Sites Web<br />Steve Souders - Alta Books<br />
  40. 40. Obrigado!<br />Andre Metzen<br />metzen@imasters.com.br<br />@metzen<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×