Métodos eficazes para reduzir a largura de banda (e, portanto, o tempo de carregamento da página)?

Quais são os métodos mais eficazes para reduzir a quantidade de largura de banda que um site precisa para renderizar uma página?

Cache agressivo? Minificando JS / CSS? Gzip? CMS? Sprites?

Alguns métodos básicos facilmente implementáveis ​​por qualquer site:

• Compacte seu HTML, CSS e Javascript com deflateou gzipse o navegador que fez a solicitação o suportar.
• Minimize seu javascript com o Google Closure Compiler
• Minimize seu css com o Compressor YUI

Um pouco mais envolvido:

• Se é improvável que uma página ou imagem seja alterada, peça ao navegador para armazená-la em cache. A maioria dos servidores da web já faz isso para arquivos estáticos; portanto, tudo o que você precisa fazer é adicioná-lo aos seus scripts dinâmicos sempre que possível.
• Mesclar seus arquivos CSS e JS em um único automaticamente . Isso é vantajoso, pois diminui as solicitações HTTP (que têm sobrecarga e que certos navegadores estúpidos - e com isso quero dizer o Internet Explorer - - limitam por padrão 2 solicitações por vez por domínio).
• Mova seus arquivos estáticos (CSS, JS, imagens, etc.) para um nome de domínio separado. Isso faz com que as informações do cookie não sejam enviadas na solicitação HTTP.

• Use sprites que são gerados automaticamente . Um sprite é uma imagem única que contém vários ícones ou outras imagens pequenas; você escolhe qual imagem mostrar com a backgroundpropriedade CSS . Exemplo .

  A vantagem é que o cliente faz menos solicitações HTTP (com sobrecarga).

Coloquei o nome em negrito "automaticamente" porque, se você está fazendo essas coisas manualmente, definitivamente não vale a pena, e isso torna a manutenção de código um pesadelo. Geralmente, fazê-lo automaticamente significa escrever um script personalizado, e é por isso que é um pouco "mais envolvido",

O Google descreveu e explicou suas recomendações para minimizar o tamanho da carga útil . Eles incluem as seguintes técnicas:

1. Habilitar a compactação
2. Remover CSS não utilizado
3. Minify JavaScript
4. Minify CSS
5. Minimizar HTML
6. Adiar o carregamento de JavaScript
7. Otimizar imagens
8. Servir imagens em escala
9. Servir recursos de um URL consistente

Essas sugestões fazem parte do projeto complementar de código aberto Firefox / Firebug chamado Page Speed . Semelhante ao plugin YSlow do Yahoo ! . O complemento Page Speed ​​real verificará muito mais otimizações do que a lista explica em detalhes. Instruções para usar a velocidade da página também são apresentadas.

As práticas recomendadas do Yahoo! Para acelerar o seu site identificam um conjunto semelhante de práticas recomendadas:

1. Minimizar solicitações HTTP
2. Use uma rede de entrega de conteúdo
3. Adicionar um Expirar ou um Cabeçalho de Controle de Cache
4. Componentes Gzip
5. Coloque as folhas de estilo no topo
6. Coloque os scripts na parte inferior
7. Evite expressões CSS
8. Tornar JavaScript e CSS externos
9. Reduzir pesquisas de DNS
10. ...

(A lista do Yahoo! Tem cerca de 35 itens, não é necessário citá-la na íntegra.)

Tanto o YSlow (link da imagem) quanto o Page Speed (link da imagem) permitem executar testes em suas páginas, sugerindo coisas que você pode fazer e mostrando o que, de suas recomendações, já está implementado.