Como funciona o HTML compactado e por que você pode precisar dele

Como funciona o HTML compactado e por que você pode precisar dele

Se você administra um site, já deve saber como use os formatos de imagem certos e otimizar suas imagens para a web. No entanto, embora a compactação de imagens seja uma prática bem conhecida, a compactação de HTML tende a ser negligenciada, o que é uma pena, porque os benefícios valem a pena.





Neste artigo, examinaremos os dois métodos principais para reduzir arquivos HTML, por que os arquivos HTML devem ser reduzidos e como fazer isso.



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 . Eles parecem semelhantes na superfície, mas na verdade são duas técnicas distintas, então não os confunda.





Minificação

Você pode pensar na minimização como a remoção de caracteres e linhas desnecessários no código-fonte. Pense em indentação, comentários, linhas vazias, etc. Nada disso é necessário em HTML - eles existem para tornar o arquivo mais fácil de ler. Cortar esses detalhes pode reduzir o tamanho do arquivo sem afetar nada.

Amostra de página HTML:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

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

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



Na década de 2000, as ferramentas de minificação eram raras. Você tinha que reduzir os arquivos manualmente sempre que algo mudava. Como os arquivos HTML mudam com mais frequência do que os arquivos JS e CSS, era simplesmente tedioso demais reduzi-los todas as vezes naquela época. Hoje em dia, é um ponto discutível.

Compressão

Quando os usuários visitam seu site, eles o fazem 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 oferece suporte à compactação, seu servidor da web pode compactar a página antes de enviá-la ao visitante (supondo que a compactação esteja ativada nas configurações do servidor) e, em seguida, o navegador do visitante pode descompactar a página de volta ao seu estado original.

O esquema de compressão mais comum é GZIP , que é um formato de arquivo que usa um algoritmo de compressão sem perdas chamado DEFLATE.

O algoritmo procura ocorrências repetidas de texto no arquivo HTML e, em seguida, substitui essas ocorrências repetidas por referências a uma ocorrência anterior. Cada referência é simplesmente dois números: a que distância está a referência e a quantos caracteres estamos nos referindo.

Considere uma string de texto como esta (exemplo tirado do site GZIP):

Blah blah blah blah blah.

O algoritmo reconhece a seguinte repetição:

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

A primeira ocorrência é nossa referência, então deixe como está:

Blah b{lah b}{lah b}{lah b}lah.

A segunda ocorrência refere-se à primeira ocorrência, que está cinco caracteres atrás e cinco caracteres de comprimento:

Blah 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, por isso estende o comprimento de referência em mais cinco:

Blah b[5,10]{lah b}lah.

E de novo:

Blah 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 caracteres na referência, então ele se estende por três:

Blah b[5,18].

Agora pense em um arquivo HTML típico e em quantas repetições existem nele. Quase todas as tags, como

, tem uma tag de fechamento correspondente, como

. Além disso, muitas tags são repetidas ao longo, como

,

,

,

  • , etc. Os atributos também são repetidos com frequência, incluindo

    class

    ,

    href

    , e

    src

    . É fácil ver por que a compactação GZIP é tão eficaz com HTML.

    A única desvantagem é que o servidor web precisa de um pouco mais de CPU para executar a compressão toda vez que uma página é solicitada. Mas como a CPU não é uma grande preocupação hoje em dia, quase sempre é melhor habilitar o GZIP do que ficar sem, mesmo se você tiver hospedagem na web de nível básico.

    Por que você deve compactar e reduzir

    Existem dois benefícios principais, ambos cruciais no cenário atual da web pesada 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 por cento com configurações básicas. Com configurações avançadas opcionais, um arquivo HTML pode ser reduzido em outros 3 a 7 por cento, para uma redução potencial de até 10 por cento. 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 para 45 KB, resultando em uma redução total de 50 KB. E digamos que seu website atenda a uma média de 1.000 visitantes todos os dias, sendo que cada visita tem em média dez páginas. A minificação de HTML sozinha reduz o uso de largura de banda em 50 MB por dia (1,5 GB por mês).

    Compressão + Minificação

    Como você pode ver, a minimização de HTML é útil por si só, especialmente à medida que seu site fica maior, os arquivos ficam maiores e o tráfego aumenta. Observe que Diretrizes do Google PageSpeed Recomendo minimizar o HTML, portanto, se você for cético, deixe que isso o convença do contrário.

    quantos dados o streaming usa

    Mas o que é ótimo sobre a otimização de HTML é que você não precisa escolher entre minificação ou compactação. Você pode fazer as duas coisas! Na verdade, você deve faz ambos.

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

    E além da economia de largura de banda, cada página carrega muito mais rápido porque o navegador do usuário final só precisa baixar 13,5 KB contra 50 KB por página.

    Como compactar e reduzir 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ê possui um site WordPress, tudo que você precisa fazer é instalar um plug-in e você pode colher os benefícios da compactação e da 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 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 de largura de banda.

    Se você só quer a minimização, recomendamos o Minificar HTML plugar. É simples, suporta HTML / CSS / JS e permite que você ajuste um pouco o método de minificação (por exemplo, se 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), então você pode manter dois conjuntos de arquivos HTML: um conjunto de 'fonte', que não é minimizado para edição fácil, e um conjunto 'reduzido', que você cria sempre que faz uma alteração em um arquivo de origem.

    Para minimizar, use uma destas ferramentas:

    Esta é uma técnica viável se você se afastou de CMSs como o WordPress e agora usa geradores de sites estáticos.

    Habilitar compactação GZIP

    As etapas para habilitar a compactação GZIP podem diferir dependendo do software de servidor da web que você está usando. Visto que o Apache é a opção mais popular, vamos cobrir como habilitá-lo usando .htaccess.

    Conecte-se ao seu servidor web usando FTP e, em seguida, crie um arquivo chamado

    .htaccess

    no diretório raiz. Edite o arquivo .htaccess para ter as seguintes configurações:


    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^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 ^Content-Encoding:.*gzip.*


    SetOutputFilter DEFLATE

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

    Para obter o máximo de eficiência, você também deve aprenda como verificar, limpar e otimizar seu CSS .

    Compartilhado Compartilhado Tweet O email Você deve atualizar para o Windows 11 imediatamente?

    O Windows 11 estará disponível em breve, mas você deve atualizar o mais rápido possível ou esperar algumas semanas? Vamos descobrir.

    Leia a seguir     Tópicos relacionados
    • Programação
    • HTML
    • Desenvolvimento web
    Sobre o autor Joel Lee(1524 artigos publicados)

    Joel Lee é o Editor-chefe da MakeUseOf desde 2018. Ele tem um B.S. em Ciência da Computação e mais de nove anos de experiência profissional em redação e edição.

    Mais de Joel Lee

    Assine a nossa newsletter

    Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

    Clique aqui para se inscrever