Seu site voando
Maurício Linhares - @mauriciojr
sábado, 13 de novembro de 2010
Quem?
Java, Ruby, Objective-C, whatever
Developer da OfficeDrop.com
Agile Coach que escreve código
Finge que é músico jogan...
Onde?
sábado, 13 de novembro de 2010
Aprenda a respeitar o
protocolo HTTP
Ler o RFC ajuda
sábado, 13 de novembro de 2010
GET é PEGAR uma
CÓPIA, macho
Dicionário: não cause alteraçoes no seu BANCO,
mané
sábado, 13 de novembro de 2010
Quando usar GET?
Visualizar informaçoes
Buscar informaçoes (usuários devem ser
capazes de fazer bookmarking)
Análise de tr...
POST é MANDAR um
mói de coisa, abestado
E isso pode causar mudanças no seu BANCO
sábado, 13 de novembro de 2010
Princípio da
idempotência
Vários GETs == mesmo resultado
Vários POSTs == várias linhas no banco
sábado, 13 de novembro de ...
Google Web Accelerator
Uma história épica e dramática em um único
capítulo, no seu Netscape mais próximo
sábado, 13 de nov...
Otimizações de front-
end
Mais fácil do que achar um cearense que não
sabe contar piada
sábado, 13 de novembro de 2010
Use um proxy-server pra
servir o seu conteúdo
Nginx, por favor
!"#$%&
!"#$%&'
('
!"#$%&''
)'
!"#$%&''
*'
sábado, 13 de nov...
Defina cabeçalhos de
expires pra todo o
conteúdo estático em um
futuro muito distante
sábado, 13 de novembro de 2010
Problemas?
Se você atualizar o arquivo, o browser não
vai ver
É necessário renomear os arquivos ou mudar
a chamada pra ele...
Nginx config
location ~ ^/(images|javascripts|stylesheets)/ {
root /home/deployer/shop/current/public;
  expires max;
  bre...
Ligue a compressão
GZIP do seu proxy
sábado, 13 de novembro de 2010
Nginx config
gzip on;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 500;
gzip_disable "MSIE [1-6].";
gzip_types ...
Coloque o seu CSS no
início da página
Assim o IEca não fica fazendo pantim na hora de
mostrar o HTML
sábado, 13 de novembro...
Use CSS sprites
sábado, 13 de novembro de 2010
No CSS
<div	
  style="background-­‐image:	
  url
('a_lot_of_sprites.gif');
	
  	
  	
  	
  background-­‐position:	
  -­‐26...
Contrate uma CDN pra
servir conteúdo estático
e de usuários
CDN == Content Delivery Network
S3 pra todos nós que somos pob...
Junte todos os CSS e
JavaScripts em um único
arquivo
:cache => “todos_os_estilos”
faz isso pra você no Rails
sábado, 13 de...
Faça crushing dos seus
PNGs
pngcrush for the win
sábado, 13 de novembro de 2010
Use hosts separados pra
servir conteúdo estático
assets1.meusite.com.br
assets2.meusite.com.br
assets3.meusite.com.br
asse...
Remova os metadados de
JPEGs
convert -strip source.jpeg destination.jpeg
ImageMagick
sábado, 13 de novembro de 2010
Otimizações de
JavaScript
sábado, 13 de novembro de 2010
Coloque Scripts no FIM
da página
sábado, 13 de novembro de 2010
Faça o download de
scripts de forma
assíncrona
document.write(“<script src=‘something.js’>”)
XHR fazendo eval no script
do...
Faça a minificação dos
seus scripts
YUI Compressor
JSMIN
JS Minifier
sábado, 13 de novembro de 2010
Quebre os scripts da
primeira página em 2
beforeOnload.js
afterOnload.js
sábado, 13 de novembro de 2010
Use requisições Ajax
para navegar no seu site
Twitter.com? Alguém?
sábado, 13 de novembro de 2010
Dúvidas?
É nóis que vôa, bruxão!
sábado, 13 de novembro de 2010
Próximos SlideShares
Carregando em…5
×

Seu site voando

2.544 visualizações

Publicada em

Melhorando a performance da sua aplicação web sem dor nem sofrimento com dicas simples e fáceis de serem implementadas em qualquer aplicação web.

Material apresentado originalmente no Maré de Agilidade Fortaleza, 2010.

Publicada em: Tecnologia
1 comentário
7 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
2.544
No SlideShare
0
A partir de incorporações
0
Número de incorporações
9
Ações
Compartilhamentos
0
Downloads
35
Comentários
1
Gostaram
7
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Seu site voando

  1. 1. Seu site voando Maurício Linhares - @mauriciojr sábado, 13 de novembro de 2010
  2. 2. Quem? Java, Ruby, Objective-C, whatever Developer da OfficeDrop.com Agile Coach que escreve código Finge que é músico jogando Rock band sábado, 13 de novembro de 2010
  3. 3. Onde? sábado, 13 de novembro de 2010
  4. 4. Aprenda a respeitar o protocolo HTTP Ler o RFC ajuda sábado, 13 de novembro de 2010
  5. 5. GET é PEGAR uma CÓPIA, macho Dicionário: não cause alteraçoes no seu BANCO, mané sábado, 13 de novembro de 2010
  6. 6. Quando usar GET? Visualizar informaçoes Buscar informaçoes (usuários devem ser capazes de fazer bookmarking) Análise de tráfego (Analytics? Alguém?) sábado, 13 de novembro de 2010
  7. 7. POST é MANDAR um mói de coisa, abestado E isso pode causar mudanças no seu BANCO sábado, 13 de novembro de 2010
  8. 8. Princípio da idempotência Vários GETs == mesmo resultado Vários POSTs == várias linhas no banco sábado, 13 de novembro de 2010
  9. 9. Google Web Accelerator Uma história épica e dramática em um único capítulo, no seu Netscape mais próximo sábado, 13 de novembro de 2010
  10. 10. Otimizações de front- end Mais fácil do que achar um cearense que não sabe contar piada sábado, 13 de novembro de 2010
  11. 11. Use um proxy-server pra servir o seu conteúdo Nginx, por favor !"#$%& !"#$%&' (' !"#$%&'' )' !"#$%&'' *' sábado, 13 de novembro de 2010
  12. 12. Defina cabeçalhos de expires pra todo o conteúdo estático em um futuro muito distante sábado, 13 de novembro de 2010
  13. 13. Problemas? Se você atualizar o arquivo, o browser não vai ver É necessário renomear os arquivos ou mudar a chamada pra eles /javascripts/jquery.js?12398766 sábado, 13 de novembro de 2010
  14. 14. Nginx config location ~ ^/(images|javascripts|stylesheets)/ { root /home/deployer/shop/current/public;   expires max;   break; } sábado, 13 de novembro de 2010
  15. 15. Ligue a compressão GZIP do seu proxy sábado, 13 de novembro de 2010
  16. 16. Nginx config gzip on; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 500; gzip_disable "MSIE [1-6]."; gzip_types text/html text/xml text/ javascript; sábado, 13 de novembro de 2010
  17. 17. Coloque o seu CSS no início da página Assim o IEca não fica fazendo pantim na hora de mostrar o HTML sábado, 13 de novembro de 2010
  18. 18. Use CSS sprites sábado, 13 de novembro de 2010
  19. 19. No CSS <div  style="background-­‐image:  url ('a_lot_of_sprites.gif');        background-­‐position:  -­‐260px  -­‐90px;        width:  26px;  height:  24px;"> </div> sábado, 13 de novembro de 2010
  20. 20. Contrate uma CDN pra servir conteúdo estático e de usuários CDN == Content Delivery Network S3 pra todos nós que somos pobres sábado, 13 de novembro de 2010
  21. 21. Junte todos os CSS e JavaScripts em um único arquivo :cache => “todos_os_estilos” faz isso pra você no Rails sábado, 13 de novembro de 2010
  22. 22. Faça crushing dos seus PNGs pngcrush for the win sábado, 13 de novembro de 2010
  23. 23. Use hosts separados pra servir conteúdo estático assets1.meusite.com.br assets2.meusite.com.br assets3.meusite.com.br assets4.meusite.com.br sábado, 13 de novembro de 2010
  24. 24. Remova os metadados de JPEGs convert -strip source.jpeg destination.jpeg ImageMagick sábado, 13 de novembro de 2010
  25. 25. Otimizações de JavaScript sábado, 13 de novembro de 2010
  26. 26. Coloque Scripts no FIM da página sábado, 13 de novembro de 2010
  27. 27. Faça o download de scripts de forma assíncrona document.write(“<script src=‘something.js’>”) XHR fazendo eval no script dom.createElement( “script” ) sábado, 13 de novembro de 2010
  28. 28. Faça a minificação dos seus scripts YUI Compressor JSMIN JS Minifier sábado, 13 de novembro de 2010
  29. 29. Quebre os scripts da primeira página em 2 beforeOnload.js afterOnload.js sábado, 13 de novembro de 2010
  30. 30. Use requisições Ajax para navegar no seu site Twitter.com? Alguém? sábado, 13 de novembro de 2010
  31. 31. Dúvidas? É nóis que vôa, bruxão! sábado, 13 de novembro de 2010

×