otimização client side

Download Otimização Client Side

If you can't read please download the document

Post on 29-Jun-2015

933 views

Category:

Technology

1 download

Embed Size (px)

TRANSCRIPT

  • 1. OTIMIZAOCLIENT-SIDE

2. quantos desistiram de visitar seu site antesde concluir o carregamento?
3. concorrncia a um clique
4. a culpa no da conexodo usurio
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 nmero de
requisies
11. 12. 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
15. 16. 17. a.edit { background-position:center -26px; }
26px


18. combinescripts e folhas de estilo
19. modularizaoxotimizao
20. Imagens embutidas


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

ExpiresDefault accessplus 10 years

utilize em todos os componentes que
no so atualizados com freqncia
28. utilize nome de arquivo com verso

ou

29. 1 visita:
0%
visitas seguintes:
mais de
50%
30. 4
estilos vo no inicio
e scripts no final
31. aproveite-se da
visualizao progressiva:
estilos vo no
32. scripts bloqueiam conexes paralelas
html
javascript
css
css
imagem
imagem
imagem
imagem
flash
33. melhor opo: jogue-os para o final
html
css
css
imagem
imagem
imagem
imagem
flash
javascript
javascript
34. 5
minimize
o javascript
35. minimizao
x
ofuscamento
36. Original:
117 KB
Ofuscamento com /packer/:
http://dean.edwards.name/packer/
38KB
Minimizao com JSMIN:
http://www.crockford.com/javascript/jsmin.html
72KB
37. 1
reduza o nmero de requisies
compacte os componentes
2
3
aproveite-se do cache
estilos vo 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