Upload
mauricio-linhares
View
2.316
Download
1
Embed Size (px)
DESCRIPTION
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.
Citation preview
Seu site voandoMaurí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 jogando Rock band
sábado, 13 de novembro de 2010
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áfego (Analytics? Alguém?)
sábado, 13 de novembro de 2010
POST é MANDAR um mói de coisa, abestadoE isso pode causar mudanças no seu BANCO
sábado, 13 de novembro de 2010
Princípio da idempotência
Vários GETs == mesmo resultadoVários POSTs == várias linhas no banco
sábado, 13 de novembro de 2010
Google Web AcceleratorUma história épica e dramática em um único
capítulo, no seu Netscape mais próximo
sábado, 13 de novembro de 2010
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 novembro de 2010
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 eles
/javascripts/jquery.js?12398766
sábado, 13 de novembro de 2010
Nginx config
location ~ ^/(images|javascripts|stylesheets)/ { root /home/deployer/shop/current/public; expires max; break;}
sábado, 13 de novembro de 2010
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 text/html text/xml text/javascript;
sábado, 13 de novembro de 2010
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
Use CSS sprites
sábado, 13 de novembro de 2010
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
Contrate uma CDN pra servir conteúdo estático
e de usuáriosCDN == Content Delivery NetworkS3 pra todos nós que somos pobres
sábado, 13 de novembro de 2010
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
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.brassets2.meusite.com.brassets3.meusite.com.brassets4.meusite.com.br
sábado, 13 de novembro de 2010
Remova os metadados de JPEGs
convert -strip source.jpeg destination.jpegImageMagick
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
dom.createElement( “script” )
sábado, 13 de novembro de 2010
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.jsafterOnload.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