Minificar HTML

O espaço em branco que importa e o que não importa

Em HTML, um espaço entre dois elementos inline é um espaço de verdade, e é isso que separa um minificador cuidadoso de um que quebra páginas. Remova a quebra de linha entre dois links e as palavras grudam na tela; remova o recuo dentro de um bloco pre ou de um textarea e o próprio conteúdo muda, porque ali o espaço em branco é conteúdo. Por isso, o espaço em branco só é removido onde comprovadamente não aparece na página, e fica exatamente como está onde aparece. Um minificador que tira todos os espaços do mesmo jeito gera um arquivo menor e uma página visivelmente errada.

Os comentários saem, já que servem para quem mantém o código-fonte, não para quem lê a página — com exceção dos comentários condicionais, que são instruções, não anotações. Atributos redundantes são descartados: um type="text/javascript" em um elemento script é o padrão há uma década, e method="get" em um formulário diz o que o formulário já faz.

Remover as aspas dos atributos gera HTML válido e vem desativado, de propósito. A especificação permite um valor de atributo sem aspas, desde que ele não tenha espaços nem caracteres problemáticos, e os navegadores lidam com isso perfeitamente. Os motores de template, muitas vezes, não: uma expressão Blade, Twig, Handlebars ou JSX dentro de um atributo sem aspas deixa de ser interpretada corretamente, e a falha aparece na hora do build, em um arquivo que ninguém quer ler. O ganho é pequeno e o risco não é, então é opcional.

A medida honesta do que isso ganha é depois da compressão, não antes. Os servidores enviam o HTML comprimido com gzip ou brotli, e esses algoritmos são ótimos com espaços em branco repetidos — então um documento que cai de 100 KB para 70 KB ao ser minificado pode passar só de 12 KB para 11 KB na transferência. Minificar HTML vale a pena, e é o menor dos três ganhos; a folha de estilos e o script são onde está o peso de verdade.

Quando você precisa de outra coisa

Para um site, e não um arquivo, isso deve ficar no build, não em uma aba do navegador. Todos os frameworks e geradores de sites estáticos atuais minificam o HTML no build, e fazer isso à mão significa que deixa de acontecer no momento em que alguém esquece. As bibliotecas por trás deles podem ser configuradas transformação por transformação, o que vale a pena quando uma regra específica está causando problema.

Antes de otimizar a marcação, confira quanto a página realmente pesa. Em quase todo site real, o HTML é um erro de arredondamento perto das imagens, das fontes e do JavaScript — o Lighthouse ou o próprio painel de rede do navegador mostra isso em segundos, e a resposta costuma ser que uma imagem de destaque não otimizada custa mais do que todos os bytes de marcação da página.