Construindo Aplicações Web de alta performance
O que é
80% do tempo de resposta de uma página é gasto no download de elementos do front-end, como imagens, CSS, javascript, etc.

Existem algumas regras e boas práticas que diminuem o tempo de carregamento de uma página, agilizam o desenvolvimento e manutenção, além de aliviar a carga no servidor.
Como
Antes
Estimativa de acessos
Necessidade: até onde ir?
Planejamento
Depois
Acompanhamento
Ajustes
Uso das regras e boas práticas
Testes
Ajustes
mais testes!
Durante
Menos coisas
Coisas menores
Comece cedo!
Utilize URLs relativas
em vez de
<a href="http://www.minhapagina.com.br/destino.html">meu link</a>
utilize
<a href="destino.html">meu link</a>
Quando nao for necessário saber o retorno de uma chamada HTTP, como log de algo, mude o cabeçalho de resposta para 204 - No Content
<?php
header("HTTP/1.0 204 No Content");
//executa operações que nção inetressam ao front end
?>
Utilize os Headers
Esta apresentação mostra 35 regras, recomedadas pelo Yahoo e mais algumas coletadas na internet

As regras estão divididas em sete categorias:
O que é
O que é
Essas regras se se aplicam a todos envolvidos na criação de um site:
Designers: ajudam a saber o que se pode utilizar em um site que precisa de alta performance

Desenvolvedores back end: mostram algumas técnicas e o que ele deve esperar do front end

Desenvolvedores front end: técnicas básicas e avançadas na elaboração e construção do front end
Todas as regras, basicamente dizem:
Como
Então, explicando cada uma, por categoria:
Poucas requisições HTTP
Motivos
menos elementos = menos tempo gasto em requisições e downloads
antes
<script src="jquery.js"></script>
<script src="jquery-plugin-janela-modal.js"></script>
<script src="jquery-plugin-validacao-formulario.js"></script>
<script src="jquery-plugin-mapa.js"></script>
<script src="jquery.js"></script>
<script src="todos-plugins.js"></script>
ou
<script src="tudo-junto.js"></script>
depois
Como
combine componentes!
faça o mesmo para o CSS
use sprites para imagens CSS
Como
utilize funções no servidor para obter o código da imagem
imagem normal
evita mais uma requisição e download
<img src="imagem.jpg" />
Motivos
Imagens inline
imagem inline
<img src="data:image/jpg;base64,<?php echo base64_encode(file_get_contents('imagem.jpg'))?>" />
código gerado
<img alt="nome da imagem" src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAoHBwcIBwoICAoPCgkKDxINCgoNEhQQEBEQEBQWERISEhIRFhQXGRoZFxQfHyEhHx8qKioqKi0tLS0tLS0tLS3/2wBDAQsLCw8PDxcRERcYFBMUGB4cHBwcHiMeHh8eHiMnIiAgICAiJyUmIyMjJiUpKScnKSktLSwtLS0tLS0tLS0tLS3/wAARCAAoACgDAREAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAAAAcEBgIDCAX/xAAyEAABAwMBAwoFBQAAAAAAAAABAgMRAAQFEgcTIQYUFyJBYWWhpOMxQlFScRVygZGx/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AHLQQstl7DD2Sr2+c0NJ4AfFSldiUjtJoKOva6xvYRi1FqeCy8AqP26CPOguGA5R43P2pfslHUjg8yvgtBPwkd/YRQerQFArtrb7xv7C3k7lLSnAOzWpUHyAoF9QW7Zm883yobbQToeacS6PqANQ8wKByUBQUHam9hjYMMPqP6mk67VKIJCTwVvPokx/f80CroGVspZxE3Lwd1ZSNJaUI0syOKOPWkxJ7P8AQZFBg86hlpbzhhDaStZ7kiTQc+5fJv5XJXF++eu+sqj7U/KkfgcKCFQTcRk38Vkre/YPXYWFR9yfmSfyOFB0Ey6h5pDzZlDiQtB7lCRQacjac9x91Za93zllxneROneJKdUSJiaBf9EHi/p/eoDog8X9P71AdEHi/p/eoGBjrTmWPtbLXvObMts7yI1btITqiTExQf/Z">
uso raro, para imagens muito repetidas, em sistemas que exijam menos requisições HTTP ao servidor
mais utilizado para marcadores de listas, no css
no css, torna as mudanças mais complexas
mantém os componentes no cache evitando novo download, de CSS, imagens e Javascript
Como
Motivos
configuração no .htaccess
Configuração do servidor
ExpiresActive On
ExpiresByType img/png "acess plus 1 year"
Regra 'never expire' em componentes
estilo.css?132465987
se um elemento for alterado, adicione um parâmetro, para forçar a atualização:
Como
Motivos
js.seu-site.com  - para javascript
img.seu-site.com - imagens
cdn.google.com   - libraries javascript
muitas buscam de DNS podem demorar mais, fora o risco de um estar offline
Utilize, de preferência 2 a 4 domínios
Reduzir buscas DNS
Espalhar componentes através de domínios
domínios adicionais são úteis para forçar o download paralelo de componentes
Post-load/Lazy load  de componentes
Como
carregar apenas o necessário para a funcionalidade
separe o que for básico para navegação
carregue depois, imagens, plugins etc
utilize técnicas de Progressive Enhacement
Motivos
Preload de componentes
Motivos
Como
enquanto o usuario navega, carregue elementos que ele irá utilizar em uma ação ou em outra página
Utilize, de preferencia 2 a 4 domínios
os componentes a serem carregados após a renderização da tela, podem estar em três categorias:
incondicionais
carregam sempre, independentemente de ações. Ex.: Google carrega uma imagem de sprite, que será utilizada na página seguinte, de resultados
componentes que carregam após determinada ação do usuário. Ex.: Yahoo carrega elementos do resultado de busca, ao se digitar no campode busca
condicionais
antecipados
elementos carregados antecipadamente, independentemente do uso deles
reduzir o numero de bytes para download
aumentar a rapidez do acesso ao DOM pelo Javascript
diminuir a chance de markup incorreto
Como
Motivos
Reduzir o número de elementos no DOM
utilize markup semântico
utilize técnicas de reset no CSS
descubra a quantidade de elementos:
mantenha a quantidade abaixo de 900
no console do firebug?
document.getElementByTagName('*').length
icones de "carregando" idênticos, mas um com 30x30 e outro de 40x40. se possível, utilize o mesmo sempre
Evitar duplicatas
Motivos
diminuir o número de elementos na pagina
diminuir o número de bytes para download
Evite código em duplicidade
evite elelemntos muito semelhantes
Como
Como
se o javascript estiver no topo, ele sera carregado antes
pode-se colocar o javascript antes do </body>
ou carrega-lo junto com os elmentos da pagina, colocando a chamada via js inline
<script>
var js = document.createElement('script')
js.src = 'arquivo.js';
var h = document.getElementsByTagName('head')[0];
h.appendChild(js)
</script>
Cuide da ordem de carregamento
A sequência em que os elementos são carregados, podem alterar muito a velocidade com que o usuário percebe o tempo total
Motivos
requisições são onerosas para o navegador. Gastar tempo com um conteúdo que não existe, pode tornar a experiência do usuário ruim.
Evite Redirecionamentos
Evite 404's
Faça conteúdo Ajax cacheavel
trate as chamadas ajax como conteudo normal, com expires corretos
<applet>
<object>
<iframe>
Evite ou limite elementos pesados
Ordem de carregamento, com javascript no head
javascript é antes, e só depois as imagens
Código inserindo javascript
Ordem de carregamento, com javascript inserido
javascript é carregado ao mesmo tempo que imagens
Uso de  tecnologias web em “camadas” que permitem que todos os usuários, independente de browser e velocidade de conexão, tenham acesso as funcionalidades básicas e conteúdo de uma página.
configure no .htaccess
Motivos
Como
comprimir elementos de texto ( HTML, XML, CSS, JS, etc. )
Gzip Componentes
# gzip compression.
<IfModule mod_deflate.c>

# html, txt, css, js, json, xml, htc:
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component

# webfonts and svg:
<FilesMatch "\.(ttf|otf|eot|svg)$" >
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
permite o navegador começar a receber conteúdo enquando o servidor está processando algo
</head>
<?php flush()?>;
<body>
ative a saída do buffer logo após o cabeçalho
o navegador recebe o header e começa a buscar conteúdo, antes do processamento no servidor terminar
Motivos
Descarregar buffer cedo
Como
Utilize Get para chamadas AJAX
requisições POST ocorrem em duas etapas: Envio de header e depois dos dados
requisições GET são mais rápidas por ocorrerem em uma única etapa
Evitar imagens sem fontes ( src="")
IE, Chrome e Safari fazem requisições mesmo com 'src' vazio
Evite CSS com muitos elementos aninhados
pode deixar a renderização da tela mais lenta, além de dificultar a manutenção
Quando o HTML / DOM estiver carregado, o CSS já deve estar carregado
Coloque os estilos no topo
Sem CSS Print separado
geralmente o CSS para impressão é pequeno e não justifica um arquivo separado
/* estilos de tela */
#menu{...}
.banner{...}

/* estilos de impressao */
@media print{
#menu{display:none;}
.banner{display:none;}
}
utilizam muito processamento no IE
p{
max-width:800px;
width:expression(document.body.clientWidth > 800? "800px": "auto" );
}
Evite expressões CSS
no IE o @import tem o efeito de <link> no rodapé da página
Utilize <link> ao invés de @import
Evitar filtros no CSS
O filtro mais comum é AlphaImageLoader, usado para forçar o suporte à transparência no IE6
consome muito processamento, podendo travar o navegador
o filtro é aplicado a cada utilização de uma imagem
#id-do-elemento {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='images/nome-da-imagem.png', sizingMethod='scale');
}
Se for necessário, aplique o filtro somente ao IE6
#id-elemento{
background-image:url(pasta/imagem-com-sombra.png);
_background-image:url(pasta/imagem-SEM-sombra.png);/* Apenas IE6 */
}
Evite código duplicado
utilize funções genéricas
amplie funções para que executem mais funções
Coloque o javascript no rodapé
scripts no <head> bloqueiam downloads de elementos em paralelo
uma alternativa é inserir via script
Remova scripts duplicados
Comprimir Javascript e CSS
utilize programas online ou desktop para minizar CSS e javascript. Ex.:
antes
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
alert('Load was performed.');
}
});
$.ajax({url:'ajax/test.html',success:function(data){$('.result').html(data);alert('Load was performed.');}});
depois
Na prática, tenha o YUI Compressor  em seu computador, ou digite CCS / JS compress no Google
Minimizando e utilizando GZIP, o tamanho pode dimininuir em até 70%
compressores:
YUI Compressor ( http://developer.yahoo.com/yui/compressor/ ) - desktop em linha de comando - miniza e otimiza o script
JS Compress ( http://jscompress.com/ ) - online
JSMin http://www.crockford.com/javascript/jsmin.html
img - http://optipng.sourceforge.net/
em vez de
Diminua o acesso ao DOM
buscas no DOM constantes tornam a página lenta
var novoTexto = '';
for( var cont = 0; cont < 100; cont++ ){
novoTexto += cont;
$('#elemento').text(novoTexto);

}
var novoTexto = '';
for( var cont = 0; cont < 100; cont++ ){
novoTexto += cont;
}
$('#elemento').text(novoTexto);
utilize
Otimize Imagens
Utilize a ferramenta do Yahoo http://www.smushit.com
Teste diversos níveis de qualidade da imagem
Remova cores não utilizadas
Utilize PNG sem camadas, em produção
Remova metadata do JPEG
Prefira PNG8 aos GIFs
Escolha o formato mais adequado
através do firebug
enviando todas as imagens atraves do site
combine cores semelhantes
evite imagens muito grandes: inviável para dispositivos móveis
mantenha o número de cores baixo, para que seja possível utilizar PNG8
sprites horizontais tendem a ser menores
Antes de criar um sprite, avalie
Otimize os sprites CSS
Número de páginas que o utilizarão
O site é modular, reaproveitando elementos?
A manutenção é constante?
Não dirtorça imagens no HTML
Faça o favicon.ico pequeno e cacheavel
cookies grandes podem ser lentos para processar/transferir
cookies grandes podem travar o navegador
cookies diferenciam domínios com e sem www
evite componentes que venham com cookies
Utilize cookies pequenos
Otimize para dispositivos móveis
mantenha os componentes com menos do que 25k
para os dispositivos que suportarem, ofereça uma versão com todos elmentos combinados, diminuindo multiplos downloads
É um plugin para o firebug, do firefox, que avalia algumas praticas mostradas
YSlow
100%
80%
60%
40%
YSlow
Cada regra tem um peso e um número de pontos a cada descumprimento
Cada item começa com o valor de 100 pontos, que vão sendo descontados a cada falha.
Os pontos seguem a tabela a seguir:
Poucas requisições HTTP
Uso de CDN
Uso de Expire Header
Gzip Componentes
CSS no topo
Scripts no rodapé
Sem CSS Expressions
JS e CSS externos
Pocas buscas de DNS
Javascript comprimido
Evitar redirects
Sem JS duplicado
Uso de Etags
AJAX com cache
DOM compacto
evitar 404's
Cookies pequenos
Cookies livres
Filtros CSS
YSlow
8
6
10
8
4
4
3
4
3
4
4
4
2
-4 (4JS) / -4 (2CSS) / -3 (6IMG)
-10
-11 a cada que expirar antes de 2 dias
-11 a cada maior que 500 bytes
-10 a cada um fora do head
-5 a cada um fora do local
-2 a cada ocorrência
sem penalização
-5 para cada além de 4
-10 para cada, incluindo inline
-10 para cada
-5 para cada
-11 por não usar
-5 para cada menor que 1 hora
-10 a cada 250 além de 900
-5 cada
-10 cada além de 1kb
-5 cada componente com cookie
-5 cada ou -2 se só IE (hack)
bloco.png
horizontal.png
vertical.png
O mesmo conjunto de ícones,
em três disposições diferentes.
O tamanho da imagem varia 90%
crie CDNs próprios ou
utilize CDN externos (Google, Microsoft)
Use uma Rede de Fornecimento de Conteúdo ( CDN )
Como
Motivos
utiliza conteúdo que já pode estar no cache
alivia carga no servidor
Download paralelo de componentes
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script>
Configurar Etags
configure no .htaccess
se estiver utilizando expire header longos, nao é necessário
Motivos
Como
Etags fornecem um nome único para cada elemento, facilitando o controle de cache
<ifModule mod_headers.c>
Header unset ETag
</ifModule>
FileETag None
YSlow
Recomendação
Peso
Pontuação/Critério
O plugin verifica cada critério e dá a media de todos, com os pesos, mostrando os erros e dando recomendações sobre como melhorar, ou mesmo com link direto para ferramentas.
As notas, vão de A a F, de acordo com faixas de pontuação ( A = 90 a 100, B = 80 a 89, C = 70 a 79, D = 60 a 69, E = 50 a 59 e F = 0 a 49)
Procure atingir a nota A ou B, e mesmo que já tenha ela, verifique quais melhorias podem ser implementadas.
YSlow
Instale o plugin, e navegue pelas opções, para conhecê-lo!
Estude tabém as outras abas do FireBug:
http://developer.yahoo.com/yslow/
http://getfirebug.com/
http://getfirebug.com/wiki/index.php/Console_API
Conheça também sobre o 'console' do firebug e sua API, para testar, e medir o desempenho do javascript usado:
Conclusão
Todas as regras são opcionais, algumas são comuns, e aplicadas diariamente por todos desenvolvedores front-end, outras são específicas e requerem mais conhecimento técnico e planejamento.

Com o tempo e experiência, fica mais fácil decidir quando e quais regras aplicar, mas junto com a experiencia vem a facilidade de uso e muitas delas, mesmo as mais complicadas, se tornam práticas do dia a dia.

Agora, é só estudar e aplicar as regras em seu próximo projeto!
http://developer.yahoo.com/performance/rules.html
http://developer.yahoo.com/yslow/help/menu.html
http://code.google.com/intl/pt-BR/speed/articles/
http://www.tableless.com.br/
http://www.w3.org/

e muitas horas usando e sofrendo em sites lentos...
Referências
Autor
Luiz Eduardo Tanure
desenvolvedor front-end ra Rede Bandeirantes

dúvidas? sugestões? não concorda com algo?

letanure@gmail.com
alguns proxys podem ignorar o parâmetro, mantendo o cache
DNS = Domain Name System
Sistema de Nomes de Domínios
sistema para resolver nomes de domínios em endereços de rede ( vincula um endereço URL  a um IP )
redirects retornam header com o código 301 ou 302, mudando a URL , o que força uma nova requisição HTTP, tornando o site mais lento.
CDN são redes que distribuem conteúdo, como Javascript, CSS, Vídeos, etc.
Desta forma muitos usuário e sites, buscam conteúdo confiável do mesmo local.
Buffer é a região da memória do computador, que armazena os resultados de um programa, enquanto o programa não termina, ou não ordenado a mostrar o resultato para o usuário
na verdade, não evite. Simplesmente, não use nunca!
Utilize imagens diferentes, para cada navegador, evitando o uso do filtro
Utilize programas como o Stripper para remover
metadados do jpg
Metadata são dados ocultos em imagens,
que podem conter informações como modêlo da câmera, autor, ano, tamanho, descrição, etc