desenv-web-rp.com

Otimizações comuns para reduzir o tamanho da página HTML ou XHTML?

Quais são algumas otimizações comuns executadas para reduzir o tamanho da página HTML ou XHTML? Alguns que vêm à mente são:

  • removendo comentários,
  • removendo espaços em branco estranhos,
  • movendo estilos inline repetitivos para uma folha de estilo CSS,
  • etc.

Quais são alguns outros? Quais oferecem o maior retorno possível ou podem ser executados automaticamente por uma ferramenta ou módulo?

15
Chris W. Rea

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

Alguém vai dizer que a marcação deve ser compactada com Gzip, então é melhor eu escolher.

Aqui está uma longa explicação do que Gzip possui links para como configurá-lo em Apache e IIS .

Um artigo sobre WebReference afirma que você encontrará os seguintes ganhos de desempenho ao usar o módulo Apache mod_gzip.

Os webmasters normalmente veem um aumento de 150-160% no desempenho do servidor Web e uma redução de 70% a 80% na largura de banda HTML/XML/JavaScript utilizada, usando este módulo. No geral, a economia de largura de banda é de aproximadamente 30 a 60%

18
jessegavin

Provavelmente não vale a pena.

Eu joguei com a remoção de espaços em branco em HTML um pouco e vi apenas uma redução de tamanho de 10% na carga útil após o gzipping.

Realisticamente, a remoção de espaço em branco e avanço de linha está fazendo um trabalho que a compactação faria por nós. Estamos apenas adicionando um pouco de eficiência assistida por humanos:

 Raw compactado 
 CSS não otimizado 2.299 bytes 671 bytes 
 CSS otimizado 1.758 bytes 615 bytes 

(sim, isso diz CSS, mas as mesmas regras básicas também se aplicam ao HTML)

O problema é,

  1. O GZIP está fazendo 90% do trabalho para você, então essa é uma micro-otimização maluca. Quero dizer, talvez se você é Google ou Yahoo.
  2. Essa redução de tamanho adicional de 10% tem um custo bastante elevado de HTML completamente ilegível na "fonte de exibição"
10
Jeff Atwood

ok, um pequeno: mantenha os nomes e os atributos das tags em minúsculas e consistentes (como manda o padrão, a propósito). Aumentará a taxa de compressão em uma porcentagem ou duas.

6
Thomas Bonini

Se você é um site de volume extremamente alto, pode considerar o uso de IDs de entidade super curto e nomes de classes, pois isso reduz o tamanho da página HTML e da página CSS usada para estilizá-lo.

Além disso, tenha cuidado com a composição excessivamente estruturada do site; é fácil adicionar seções div e span quando elas não são realmente necessárias. Você também pode considerar estratégias como paginação para grandes conjuntos de resultados e resultados semelhantes.

Na realidade, essas otimizações têm um retorno extremamente limitado (e para a estratégia de paginação, possíveis desvantagens de SEO) valer a pena para sites que não estão na mesma categoria de tráfego do Google. Basta seguir recomendação de jessegavin para ativar a compactação GZip/Deflate e concluir com ela.

4
JasonBirch

Combine css, imagens e javascripts comuns em um arquivo. Isso não reduz o tamanho do arquivo, mas reduz o número de solicitações http. Para arquivos menores, a sobrecarga do http supera em muito o tempo de download. É fácil escrever um script para combinar arquivos css e javascript, para que você possa gerenciá-los mais facilmente durante o desenvolvimento, mas implantá-los em um único arquivo.

Consulte http://css-tricks.com/css-sprites para obter mais informações sobre como combinar imagens.

Além disso, consulte o Closure Compiler do Google. Eu não o usei, mas ele afirma fazer o download do javascript e correr mais rápido.

3
mcrumley

Como outros já disseram, o maior benefício vem do gzipping.

Certifique-se de usar os elementos HTML apropriados. Em vez de <div class="page-title">Hello World</div>, use <h1>Hello World</h1>.

E o óbvio: não use tabelas para o layout! Use um sistema de grade simples como 960.gs (ou role sua própria versão leve). Pode haver uma grande diferença entre o tamanho do HTML, especialmente com tabelas aninhadas. Comparar:

<table cellpadding="3" cellspacing="0" border="0">
<tbody>
    <tr>
        <td width="200">...</td>
        <td width="600">...</td>
    </tr>
</tbody>
</table>

e

<div class="colSmall">...</div>
<div class="colLarge">...</div>
3
DisgruntledGoat

Se você estiver usando um site ASP.NET, tenha cuidado com o ViewState . Ele pode gerar campos ocultos muito grandes na página, sobrecarregando-o frequentemente enquanto não é necessário (já me ocorreu que o ViewState é mais pesado que o restante da página).
É especialmente verdade se você usar o AJAX, pois o ViewState será enviado para frente e para trás a cada solicitação, diminuindo a velocidade do seu site e aumentando o volume de tráfego.

A solução é no código .net embora.

2
Julien N

Outros já disseram isso, mas eles ainda não chegaram a esse ponto o suficiente: apertar.

  1. Praticamente nenhum esforço ou desvantagens.
  2. Na minha experiência limitada, reduz o tamanho do HTML entre 60% e 90%.

Todos os outros ajustes que você pode fazer no HTML exigem mais esforço/manutenção e quase não têm efeito em comparação com apenas fechar e esquecer. Eles simplesmente não valem o tempo, a menos que você seja o Google. Você não é o Google.

(Como outros já mencionaram, quanto mais consistente for o seu HTML, mais efeito o gzipping terá, pois - de acordo com meu entendimento limitado - o gzipping procura por seqüências idênticas no seu arquivo e substitui cada instância repetida por um pequeno código referente ao Portanto, práticas de autoria, como manter seus atributos na mesma ordem e manter todos os seus invólucros iguais, podem ajudar o gzipping a fazer seu trabalho.)

Ah - e se você estiver minimizando automaticamente seu HTML em algum momento do processo de criação/veiculação, isso não exige muito mais esforço/manutenção. Alguns minificadores de HTML estão listados aqui:

https://stackoverflow.com/questions/728260/html-minification

1
Paul D. Waite

Existem várias ferramentas gratuitas de análise e otimização de desempenho da web . Você pode compilar sua própria grande lista de verificação a partir dos relatórios que eles geram.

Aqui estão alguns pontos parafraseados de uma Avaliação de desempenho do Zoompf -

  • Evite conteúdo gerado dinamicamente (imagem). Considere desenhar ou redimensionar uma imagem offline como um arquivo de imagem estática.
  • Evite usar tags de imagem sem dimensões.
  • O Google Analytics (e anúncios) oferece suporte ao carregamento assíncrono de seu arquivo JavaScript. Caso você os use, você pode optar por carregá-los de forma assíncrona.
1
mvark

Uma estratégia comumente esquecida é remover todos os códigos HTML desnecessários da página.

Para qualquer projeto, você terá que decidir qual dessas estratégias empregar com base na (X) versão HTML que você está usando e na maneira como o site será usado.

(Aparentemente, não posso postar mais de um hiperlink por resposta, já que sou um novo usuário, portanto, esses URLs precisarão ser copiados e colados ... Espero que seja kosher.)

  • No HTML4 e HTML5, para muitos elementos, a tag de fechamento não é necessária. A tag de abertura para o elemento body também não é necessária. Vejo:

meiert.com/pt/blog/20080601/optional-tags-in-html-4/

code.google.com/speed/articles/optimizing-html.html

  • O protocolo (http :) parte dos URLs HTTP pode ser omitido.

meiert.com/pt/blog/20090218/performance-and-rfc-2396/

  • Com tags como <br>, você pode simplesmente deixar de fora a barra usada na sintaxe XHTML (<br />), a menos que você realmente precise usar XHTML.

  • Aqui estão alguns exemplos de pequenas estruturas de documentos HTML:

meiert.com/pt/blog/20080429/best-html-template/

html5doctor.com/html-5-boilerplates/

1
dzollman