desenv-web-rp.com

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?

12
Mark Henderson

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

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

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 propriedade CSS background. 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",

10
Thomas Bonini

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

  1. Ativar a compactação
  2. Remover CSS não utilizado
  3. Minify JavaScript
  4. Minify CSS
  5. Minify 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-fonte aberto Firefox/Firebug chamado Page Speed ​​ . Semelhante ao plugin do Yahoo! 'S YSlow . 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.

Melhores práticas para acelerar seu site identifique 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 há necessidade de citá-la na íntegra.)

Ambos YSlow (link da imagem) e Velocidade da página (link da imagem) permitirão que você execute testes em suas páginas, sugerindo coisas que você pode fazer e mostrar o que, de suas recomendações, já está implementado.

5
Bryson