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