seu site voando

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


Onde?


Aprenda a respeitar o protocolo HTTP

Ler o RFC ajuda


GET é PEGAR uma CÓPIA, macho

Dicionário: não cause alteraçoes no seu BANCO, mané


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?)


POST é MANDAR um mói de coisa, abestadoE isso pode causar mudanças no seu BANCO


Princípio da idempotência

Vários GETs == mesmo resultadoVários POSTs == várias linhas no banco


Google Web AcceleratorUma história épica e dramática em um único

capítulo, no seu Netscape mais próximo


Otimizações de front-end

Mais fácil do que achar um cearense que não sabe contar piada


Use um proxy-server pra servir o seu conteúdo

Nginx, por favor

!"#$%&

!"#$%&'('

!"#$%&'')'

!"#$%&''*'


Defina cabeçalhos de expires pra todo o

conteúdo estático em um futuro muito distante


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


Nginx config

location ~ ^/(images|javascripts|stylesheets)/ { root /home/deployer/shop/current/public; expires max; break;}


Ligue a compressão GZIP do seu proxy


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;


Coloque o seu CSS no início da página

Assim o IEca não fica fazendo pantim na hora de mostrar o HTML


Use CSS sprites


No CSS

<div style="background-‐image: url('a_lot_of_sprites.gif'); background-‐position: -‐260px -‐90px; width: 26px; height: 24px;"></div>


Contrate uma CDN pra servir conteúdo estático

e de usuáriosCDN == Content Delivery NetworkS3 pra todos nós que somos pobres


Junte todos os CSS e JavaScripts em um único

arquivo:cache => “todos_os_estilos”faz isso pra você no Rails


Faça crushing dos seus PNGs

pngcrush for the win


Use hosts separados pra servir conteúdo estático

assets1.meusite.com.brassets2.meusite.com.brassets3.meusite.com.brassets4.meusite.com.br


Remova os metadados de JPEGs

convert -strip source.jpeg destination.jpegImageMagick


Otimizações de JavaScript


Coloque Scripts no FIM da página


Faça o download de scripts de forma

assíncrona

document.write(“<script src=‘something.js’>”)

XHR fazendo eval no script

dom.createElement( “script” )


Faça a minificação dos seus scripts

YUI Compressor

JSMIN

JS Minifier


Quebre os scripts da primeira página em 2

beforeOnload.jsafterOnload.js


Use requisições Ajax para navegar no seu site

Twitter.com? Alguém?


Dúvidas?É nóis que vôa, bruxão!


seu site voando

Technology