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?

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 há necessidade de citá-la na íntegra.)

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

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

Aqui está uma explicação longa do que é o Gzip com links sobre como configurá-lo no Apache e no IIS .

Um artigo no 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 da 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%

Provavelmente não vale a pena.

Eu brinquei um pouco com a remoção de espaços em branco no HTML e vi apenas uma redução de 10% no tamanho da 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 Compressed
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"

ok, um pequeno: mantenha os nomes e 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.

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 a recomendação de jessegavin para ativar a compactação GZip / Deflate e concluir com ela.

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, confira o Closure Compiler do Google. Eu não o usei, mas ele afirma fazer o download do javascript e correr mais rápido.

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>

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 com frequência 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 está no código .net .

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.

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 versão (X) HTML que está usando e a 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/

Outros já disseram isso, mas simplesmente não chegaram a esse ponto o suficiente: gzipping.

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 dificilmente 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 o seu HTML for, 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:

/programming/728260/html-minification