Otimizações para reduzir o tempo de carregamento do site

Quais são algumas otimizações importantes que podem ser feitas em um site para reduzir o tempo de carregamento?

Remova / minimize todos os estrangulamentos do lado do servidor. Para esse fim, use um perfil como Xdebug ou Zend Debugger para descobrir onde seu aplicativo está fazendo operações caras e lentas. Implementar cache sempre que possível. Use um cache OpCode. Se isso ainda não for rápido o suficiente, considere investir em mais CPU ou RAM ou SSDs (dependendo se você estiver conectado à CPU, IO ou memory)

Para otimização geral do lado do servidor / cliente, veja o Yahoo YSlow! Guia do usuário .

Basicamente, resume-se a:

  1. Minimizar solicitações HTTP
  2. Use uma rede de entrega de conteúdo
  3. Adicionar um Excerto ou um header de controle de cache
  4. Componentes Gzip
  5. Coloque StyleSheets no topo
  6. Coloque Scripts no fundo
  7. Evite expressões CSS
  8. Faça JavaScript e CSS Externo
  9. Reduzir as pesquisas de DNS
  10. Minify JavaScript e CSS
  11. Evite redirecionamentos
  12. Remover Scripts Duplicados
  13. Configurar ETags
  14. Faça o AJAX Cacheable
  15. Use GET para solicitações AJAX
  16. Reduza o número de elementos DOM
  17. No 404s
  18. Reduzir o tamanho do cookie
  19. Use domínios sem cookies para componentes
  20. Evite Filtros
  21. Não dimensione imagens em HTML
  22. Faça favicon.ico Small e Cacheable

Veja também os comentários fornecidos abaixo, pois eles contêm algumas informações úteis adicionais para outros usuários.

Antes de tentar qualquer otimização primeiro você precisa ser capaz de perfil, obtenha o FireBug para o Firefox. Então você pode executar algumas análises que irão dizer exatamente o que fazer usando o YSlow . As coisas fundamentais que você deve fazer estão listadas aqui .

definitivamente quer olhar para o cache, já que as viagens de ida para DB são caras. também, minify JS

Aqui estão algumas coisas de “melhores práticas”:

  • Cache de CSS, JavaScript, imagens, etc.
  • Minimizando arquivos de Javascript.
  • conteúdo de gzip.
  • Coloque links para arquivos JavaScript, código JavaScript e links para arquivos CSS na parte inferior da página, quando possível.
  • Carregue apenas o que é necessário.
  • Para um site existente, antes de fazer qualquer um disso, determine se seus pontos de estrangulamento estão com ferramentas como o Firebug e como outra pessoa mencionou o YSlow (eu recomendo esta ferramenta).

instale o firebug e o plugin de edição de páginas segue todas as diretrizes do pagepeed (até que seja possível) e seja feliz http://code.google.com/intl/it/speed/page-speed/

de qualquer forma, a otimização mais importante na minha experiência é reduzir o número de solicitações HTTP a um mínimo …

As opções simples que posso pensar são:

  1. Gzip (x) html, então um arquivo compactado deve chegar mais rapidamente ao usuário
  2. minify the CSS
  3. minify the JS
  4. use o cache sempre que possível
  5. use uma rede de entrega de conteúdo
  6. use uma ferramenta, como o yslow para identificar pontos de estrangulamento e outras sugestões

Há dois lados sobre os quais você pode se preocupar, ao otimizar:

  • O lado do servidor: o que importa é gerar a saída rápida
  • O lado do cliente: o que importa é obter tudo o que precisa ser exibido mais rapidamente.

Nota: nós, como desenvolvedores, muitas vezes pensamos em otimizar o lado do servidor primeiro … O que na maioria dos casos representa apenas menos de 10% do tempo de carregamento da página!

Do lado do servidor, geralmente você quer:

  • perfil, para determinar o que é longo
  • otimize suas consultas SQL e reduza seu número
  • use cache

Para mais informações, você pode dar uma olhada na resposta que dei há algum tempo a esta questão: otimizando sites baseados em Kohana para velocidade e escalabilidade

Do lado do cliente, os maiores ganhos geralmente são alcançados por:

  • Reduzindo o número de solicitações HTTP – a maneira mais fácil de reduzir o número de arquivos JS / CSS / imagens, combinando vários arquivos em um
  • Compressão de CSS / JS / HTML, usando, por exemplo, o mod_deflate do Apache.

Sobre isso, há muitas coisas excelentes no Desempenho excepcional do Yahoo : eles lançaram muitas boas práticas e ferramentas, como o yslow .

Recentemente fizemos isso em nosso site. Aqui descrevemos nove técnicas que pareciam ter o maior impacto com a menor dificuldade: http://mentormate.com/blog/easy-ways-speed-website-load-time/

A primeira otimização é: Decida se é lento e, se não, não incomoda.

Isso é mais complicado do que parece, porque não é como testar um aplicativo ou jogo de mesa. Um jogo é lento se você jogar no hardware de destino, a taxa de frameworks é muito baixa. Isso é muito fácil de medir.

Um site é mais complicado, porque você, como desenvolvedor, provavelmente está usando um sistema de teste local com uma rede muito rápida. Mesmo quando você usa seus servidores de ensaios / testes de sistema, você provavelmente ainda está na rede local. Mesmo os seus servidores de produção são, com toda a probabilidade, no mesmo continente.

O mesmo provavelmente não é verdade para muitos usuários.

Portanto, as opções que existem são:

  • Descubra perguntando a seus usuários, se eles acham que é lento
  • Simule um ambiente de alta latência e teste você mesmo (ou sua equipe de QA)
  • Advinhação

O último não é recomendado.

Uma opção que o livro de desempenho de Sites da Web Yahoo (que sim, é um livro que você pode comprar) não menciona muito é HTTPS. A maioria dos aplicativos da web que manipulam dados importantes são executados principalmente ou totalmente através de HTTPS, o que altera bastante as regras do jogo. Lembre-se de fazer todos os testes com ele habilitado.

eu escrevi algumas coisas, veja:

Otimização do teste de velocidade da página do Google

Como já mencionado, você pode usar a extensão Yslow ou PageSpeed ​​firefox. Mas você também pode usar o GTmetrix , um serviço on-line que examina sua página com ambas as ferramentas.

Características que eu gosto / uso:

  • Presença suave, limpa e utilizável
  • comparação com outra página. É realmente interessante ver onde estão seus amigos / concorrentes.

(Por sinal, não estou relacionado com o gtmetrix!)

Para reduzir o tráfego de rede, você pode minificar arquivos estáticos, como CSS e Javascript, e usar a compression gzip no conteúdo gerado. Você também pode tentar usar ferramentas como optipng para reduzir o tamanho das imagens.

No entanto, o primeiro passo a seguir é realmente analisar o que está demorando o tempo todo – seja ele que envia os bits pela rede ou, de fato, gera o conteúdo para enviar. Não há nenhum motivo para tornar seus arquivos CSS 10% menores se demorar um minuto para gerar cada página HTML.

Não use espaço em branco no código.

O balanceamento de carga ajudaria a reduzir o tempo de carregamento imenso.