Propaganda

Se você administra um site, já deve saber como use os formatos de imagem certos e otimize suas imagens para a web 10 ferramentas online gratuitas de imagem em lote para redimensionar, converter e otimizarVocê precisa de ferramentas de edição em lote quando tiver muitas fotos para processar e muito pouco tempo. Apresentamos os melhores redimensionadores, otimizadores ou conversores de lote disponíveis on-line. consulte Mais informação . No entanto, embora a compactação de imagem seja uma prática bem conhecida, a compactação HTML tende a ser esquecida, o que é uma pena, pois os benefícios valem a pena.

Neste artigo, abordaremos os dois métodos principais de redução de arquivos HTML, por que os arquivos HTML devem ser reduzidos e como fazê-lo.

Compressão vs. Minificação

No que diz respeito à otimização de arquivos HTML, existem dois métodos principais para isso: compressão e minificação. Soam semelhantes na superfície, mas na verdade são duas técnicas distintas, portanto, não as confunda.

Minificação

Você pode pensar em minificação como a remoção de caracteres e linhas desnecessários no código-fonte. Pense em recuo, comentários, linhas vazias, etc. Nada disso é necessário em HTML - eles existem para facilitar a leitura do arquivo. Recortar esses detalhes pode reduzir o tamanho do arquivo sem afetar nada.

Página HTML de exemplo:

Este é um cabeçalho
Envie-me e-mail em [email protected].
Este é um novo parágrafo!
Este é um novo parágrafo em negrito e itálico.

Página HTML de exemplo, reduzida:

Este é um cabeçalho
Envie-me e-mail em [email protected].
Este é um novo parágrafo!
Este é um novo parágrafo em negrito e itálico.

Tamanho original: 354. Tamanho reduzido: 272. Economia: 82 (23,16%).

Muitos desenvolvedores da Web e proprietários de sites reservam minification apenas para arquivos JS e CSS, mas essa prática desatualizada é um erro. A minificação de HTML também é importante.

Nos anos 2000, as ferramentas de minificação eram raras. Você tinha que reduzir manualmente os arquivos toda vez que algo mudava. Como os arquivos HTML são alterados com mais frequência do que os arquivos JS e CSS, era simplesmente muito entediante para minificar todas as vezes naquela época. Hoje em dia, é um ponto discutível.

Compressão

Quando os usuários visitam seu site, eles fazem isso usando o protocolo HTTP. O navegador envia uma solicitação ao servidor da Web para uma página específica, o servidor da Web encontra a página e envia o conteúdo dessa página de volta ao navegador do visitante.

Mas como o protocolo HTTP suporta compactação, seu servidor da Web pode compactar a página antes de enviá-la ao visitante (assumindo a compactação está ativada nas configurações do servidor) e o navegador do visitante pode descompactar a página de volta ao estado original.

O esquema de compactação mais comum é GZIP, que é um formato de arquivo que usa um algoritmo de compactação sem perdas Como funciona a compactação de arquivos?Como a compactação de arquivos funciona? Aprenda o básico da compactação de arquivos e a diferença entre compactação com perdas e sem perdas. consulte Mais informação chamado DEFLATE.

O algoritmo procura ocorrências repetidas de texto no arquivo HTML e substitui essas ocorrências repetidas por referências a uma ocorrência anterior. Cada referência é simplesmente dois números: quão distante está a referência e quantos caracteres estamos referenciando.

Considere uma sequência de texto como esta (exemplo extraído do site GZIP):

Blá blá blá blá blá.

O algoritmo reconhece a seguinte repetição:

B {lah b} {lah b} {lah b} {lah b} lah.

A primeira ocorrência é a nossa referência, então deixe ser:

Blá b {lah b} {lah b} {lah b} lah.

A segunda ocorrência refere-se à primeira ocorrência, com cinco caracteres atrás e cinco caracteres:

Blá b [5,5] {lah b} {lah b} lah.

Mas, neste caso, o algoritmo reconhece que a próxima ocorrência é a mesma sequência de caracteres e, portanto, estende o comprimento de referência em mais cinco:

Blá b [5,10] {lah b} lah.

E de novo:

Blá b [5,15] lah.

E o algoritmo é inteligente o suficiente para perceber que os próximos três caracteres são os três primeiros na referência, então se estende por três:

Blá b [5,18].

Agora pense em um arquivo HTML típico e em quantas repetições existe. Quase todas as tags, como, tem uma tag de fechamento correspondente, como. Além disso, muitas tags são repetidas por toda parte, como, , , etc. Os atributos também são repetidos com frequência, incluindo classe, hrefe src. É fácil ver por que a compactação GZIP é tão eficaz com HTML.

A única desvantagem é que o servidor da web precisa de um pouco mais de CPU para executar a compactação toda vez que uma página é solicitada. Mas como a CPU não é uma preocupação hoje em dia, é quase sempre melhor habilitar o GZIP do que ficar sem, mesmo se você tiver hospedagem na web básica Os melhores serviços de hospedagem na web: compartilhado, VPS e dedicadoProcurando o melhor serviço de hospedagem para suas necessidades? Aqui estão nossas melhores recomendações para o seu blog ou site. consulte Mais informação .

Por que você deve compactar e minimizar

Existem dois benefícios principais, os quais são cruciais no cenário atual da web para dispositivos móveis.

Carregamentos de página mais rápidos

Em média, um minificador de HTML pode reduzir o tamanho de um arquivo em cerca de 3% com as configurações básicas. Com configurações avançadas opcionais, um arquivo HTML pode ser reduzido em outros 3 a 7%, para uma possível redução de até 10%. Isso se traduz diretamente em tempos de carregamento de página mais rápidos.

Menos largura de banda usada

Digamos que você tenha 10 arquivos, cada um reduzido de 50 KB a 45 KB, para uma redução total de 50 KB. Digamos que seu site atenda a uma média de 1.000 visitantes por dia, em que cada visita tem uma média de dez páginas. Somente a minificação HTML reduz o uso da largura de banda em 50 MB por dia (1,5 GB por mês).

Compressão + Minificação

Como você pode ver, a minificação de HTML é útil por si só, especialmente quando o site aumenta, os arquivos aumentam e o tráfego aumenta. Observe que Diretrizes do PageSpeed ​​do Google recomendamos a redução do HTML, portanto, se você é cético, convence-o de outra maneira.

Mas o melhor da otimização de HTML é que você não precisa escolher minificação ou compactação. Você pode fazer as duas coisas! De fato, você devemos faz ambos.

Em média, você pode esperar que a compactação GZIP reduza um arquivo HTML em 70 a 90%. Usando o exemplo acima com uma estimativa de compactação conservadora, os arquivos HTML minificados iriam de 45 KB a 13,5 KB cada, para uma redução total de 365 KB. Comparado a não-compactado / descompactado, a largura de banda do seu site agora é reduzida em 365 MB por dia (11 GB por mês).

Além da economia de largura de banda, cada página é carregada drasticamente mais rapidamente porque o navegador do usuário final precisa baixar apenas 13,5 KB versus 50 KB por página.

Como compactar e minimizar HTML

Felizmente, nenhum dos dois é muito difícil atualmente e você não precisa de muito conhecimento técnico para configurá-los.

Plugins WordPress

Se você executa um site WordPress, tudo que você precisa fazer é instalar um plug-in e poderá colher os benefícios da compactação e minificação.

A maioria dos plug-ins de cache faz mais do que simplesmente armazenar páginas em cache. Por exemplo, Cache mais rápido do WP e Cache Total W3 ambos têm configurações de um clique que permitem ativar a minificação de HTML e a compactação GZIP, entre outros recursos que aceleram ainda mais o carregamento da página e reduzem o uso da largura de banda.

Se vocês só deseja minificação, recomendamos o Minimizar HTML plugar. É simples, suporta HTML / CSS / JS e permite ajustar um pouco o método de minificação (por exemplo, se você deseja remover http: e https: de URLs).

Minificadores estáticos de HTML

Se seus arquivos HTML forem estáticos (ou seja, não gerados dinamicamente por um CMS ou estrutura da web), você poderá manter dois conjuntos de arquivos HTML: um conjunto de "origem", que não é minificado para facilitar a edição, e um conjunto "minificado", criado sempre que você faz uma alteração em um arquivo de origem.

Para reduzir, use uma destas ferramentas:

• HTMLCompressor
• Minificador HTML
• Minificador HTML (diferente do acima)

Essa é uma técnica viável se você se afastou dos CMSs como o WordPress e agora usa geradores de sites estáticos 7 razões para abandonar seu CMS e considerar um gerador de site estáticoPor muitos anos, publicar um site foi difícil para muitos usuários. CMSs como o WordPress mudaram isso, mas ainda podem ser confusos. Outra alternativa é um gerador de site estático. consulte Mais informação .

Ativar compactação GZIP

As etapas para ativar a compactação GZIP podem diferir dependendo do software do servidor da web que você está usando. Como o Apache é a opção mais popular, abordaremos como ativá-lo usando .htaccess.

Conecte-se ao seu servidor da Web usando FTP e crie um arquivo chamado .htaccess no diretório raiz. Edite o arquivo .htaccess para ter as seguintes configurações:

 mod_gzip_on Sim mod_gzip_dechunk Sim arquivo mod_gzip_item_include. (html? | txt | css | js | php | pl) $ mod_gzip_item_include manipulador ^ cgi-script $ mod_gzip_item_include mime ^ text /.* mod_gzip_item_include mime ^ application / x-javascript. * mod_gzip_item_exclude mime ^ image /.* mod_gzip_item_exclude rspheader ^ Codificação de conteúdo:. * Gzip. *
 SetOutputFilter DEFLATE. 

Não tem certeza se a compactação está funcionando no seu site? Teste com esta ferramenta.

Para obter as melhores eficiências, você também deve Aprenda sobre como verificar, limpar e otimizar seu CSS 11 ferramentas úteis para verificar, limpar e otimizar arquivos CSSDeseja melhorar seu código CSS? Esses verificadores e otimizadores de CSS ajudarão a melhorar o código, a sintaxe e a reduzir as páginas da Web. consulte Mais informação .