O documento fornece dicas para otimizar o desempenho de sites, incluindo respeitar o protocolo HTTP, usar corretamente os métodos GET e POST, definir cabeçalhos de expires, usar sprites CSS, compactar arquivos e minificar códigos.

1. Seu site voando
Maurício Linhares - @mauriciojr
sábado, 13 de novembro de 2010

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. Onde?
sábado, 13 de novembro de 2010

4. Aprenda a respeitar o
protocolo HTTP
Ler o RFC ajuda
sábado, 13 de novembro de 2010

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. 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. 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. 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. 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. 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. Use um proxy-server pra
servir o seu conteúdo
Nginx, por favor
!"#$%&
!"#$%&'
('
!"#$%&''
)'
!"#$%&''
*'
sábado, 13 de novembro de 2010

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. 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. Nginx config
location ~ ^/(images|javascripts|stylesheets)/ {
root /home/deployer/shop/current/public;
expires max;
break;
}
sábado, 13 de novembro de 2010

15. Ligue a compressão
GZIP do seu proxy
sábado, 13 de novembro de 2010

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. 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. Use CSS sprites
sábado, 13 de novembro de 2010

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. 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. 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. Faça crushing dos seus
PNGs
pngcrush for the win
sábado, 13 de novembro de 2010

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. Remova os metadados de
JPEGs
convert -strip source.jpeg destination.jpeg
ImageMagick
sábado, 13 de novembro de 2010

25. Otimizações de
JavaScript
sábado, 13 de novembro de 2010

26. Coloque Scripts no FIM
da página
sábado, 13 de novembro de 2010

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. Faça a minificação dos
seus scripts
YUI Compressor
JSMIN
JS Minifier
sábado, 13 de novembro de 2010

29. Quebre os scripts da
primeira página em 2
beforeOnload.js
afterOnload.js
sábado, 13 de novembro de 2010

30. Use requisições Ajax
para navegar no seu site
Twitter.com? Alguém?
sábado, 13 de novembro de 2010

31. Dúvidas?
É nóis que vôa, bruxão!
sábado, 13 de novembro de 2010