Como minificar HTML, CSS e JavaScript

A resposta curta

Minificar é uma limpeza de espaços e comentários. Uma folha de estilos escrita com uma propriedade por linha, comentários e indentação de quatro espaços vira uma única linha compacta que o navegador interpreta do mesmo jeito. Nada muda no que aparece na tela; só diminui a quantidade de bytes enviada pela rede.

A ferramenta abaixo trabalha com HTML, CSS e JavaScript. Escolha a Linguagem, coloque a Ação em Minificar, cole o código ou abra um arquivo, e o resultado aparece à direita com o tamanho antes e depois e quanto ficou menor. Copie ou baixe como arquivo. O seu código é processado no navegador e não é enviado para nenhum servidor.

O que a minificação remove e o que ela precisa manter

Um minificador só é seguro se entende a linguagem bem o bastante para saber quais caracteres têm significado. Remover o espaço errado quebra o código sem aviso, por isso as regras mudam de uma linguagem para outra.

Algumas ferramentas vão além dos espaços. Bundlers de JavaScript como Terser ou esbuild também renomeiam variáveis locais para uma letra só e eliminam código inalcançável; ferramentas de CSS como cssnano ou Lightning CSS encurtam cores (#ffffff para #fff) e juntam regras. Isso economiza mais, mas é uma transformação do seu código, não só uma limpeza, e deve ficar em um processo de build testado. O minificador desta página para de propósito nos comentários e espaços, e é por isso que dá para usá-lo com segurança em qualquer trecho, mesmo sem testes automatizados.

• CSS: comentários e quebras de linha saem, mas o espaço em um seletor descendente como .menu a precisa ficar, e calc(1px + 2px) exige os espaços em volta do + e do sinal de menos. Comentários de licença que começam com /*! costumam ser mantidos.
• JavaScript: comentários e indentação saem, mas strings, template literals e expressões regulares não podem ser alterados. Em código sem ponto e vírgula, uma quebra de linha pode encerrar um comando, então algumas quebras de linha precisam ficar.
• HTML: os espaços entre elementos de bloco saem e sequências de espaços viram um só, mas o espaço único entre dois links dentro de uma frase é visível e precisa ficar. O conteúdo de pre e textarea é mantido exatamente como está.

Quanto a minificação economiza?

A economia depende de como o arquivo foi escrito. Arquivos com muitos comentários e indentação generosa são os que mais encolhem. Estas são faixas típicas para código escrito à mão, antes da compressão do servidor:

Minificar ou usar gzip? Faça os dois

Servidores e CDNs normalmente comprimem arquivos de texto com gzip ou Brotli antes de enviá-los, o que já reduz CSS e JavaScript em algo entre 60 e 80 por cento. A compressão é muito boa em espremer espaços repetidos, então o ganho extra da minificação é menor depois da compressão do que antes, muitas vezes na faixa de 5 a 20 por cento do tamanho comprimido.

Ainda assim vale a pena. Arquivos minificados são interpretados um pouco mais rápido, comentários com anotações internas nunca chegam ao público e a economia se soma a cada visualização de página. Ferramentas como Lighthouse e PageSpeed Insights apontam há muito tempo CSS e JavaScript não minificados justamente por isso. Confira também se a compressão está mesmo ligada: nas ferramentas de desenvolvedor do navegador, abra o painel Rede (Network), clique em um arquivo CSS e procure o cabeçalho de resposta content-encoding com gzip ou br.

Formas de minificar, de um arquivo a um site inteiro

O método certo depende de com que frequência o código muda.

• Um arquivo ou um trecho: cole na ferramenta acima. Serve para scripts inline em um CMS, uma folha de estilos de template de e-mail, um widget que você entrega a um cliente ou para ver quanto um arquivo ganharia.
• Um site com etapa de build: deixe o bundler cuidar disso. Vite, webpack, Parcel e esbuild minificam os builds de produção por padrão, então normalmente não é preciso nenhuma configuração extra além de rodar o comando de build de produção.
• Um site sem etapa de build: muitas plataformas de CMS e plugins de cache, como os do WordPress, têm uma opção de minificar, e algumas CDNs oferecem minificação automática. Teste as páginas depois de ativar, porque uma minificação agressiva de HTML ou JavaScript é a causa mais comum de layout ou script quebrado depois de ligar essa opção.
• Frameworks do lado do servidor: ASP.NET, Django e Rails têm pipelines de assets ou pacotes que minificam na hora da publicação.

Quando o código minificado quebra, e como resolver

A maior parte dos problemas vem de um código original que depende de algo que o minificador altera, ou de um minificador agressivo demais. Estes são os suspeitos de sempre:

• Falta de ponto e vírgula junto com um minificador de JavaScript agressivo: uma linha que começa com ( ou [ acaba grudada na linha anterior. Mantenha as quebras de linha (como esta ferramenta faz) ou acrescente os pontos e vírgulas.
• Dois arquivos concatenados depois de minificados: se o primeiro não termina com ponto e vírgula, o segundo pode ser lido como uma chamada de função. Termine cada arquivo direito ou deixe um bundler juntá-los.
• Hacks de CSS e sintaxe incomum: hacks antigos para navegadores que dependem de espaçamento exato podem parar de funcionar. Remova os hacks de que você não precisa mais.
• Código que lê o próprio texto ou os nomes de funções: minificadores que renomeiam quebram esse código, os que só tiram espaços não.
• Erros de sintaxe no código fonte: um minificador não consegue corrigi-los. A ferramenta desta página aponta strings, comentários e tags não fechados com linha e coluna, então corrija o original primeiro.

Boas práticas

Nunca edite arquivos minificados diretamente. Mantenha o código fonte legível no controle de versão e trate a cópia minificada como um resultado do build, que pode ser gerado de novo a qualquer momento. Se precisar ler o arquivo minificado de outra pessoa, mude a Ação para Formatar na mesma ferramenta para recuperar uma indentação legível.

Se você usa uma ferramenta de build, gere source maps para produção. Eles permitem que as ferramentas de desenvolvedor do navegador mostrem as linhas originais na hora de depurar, enquanto os usuários continuam baixando o arquivo pequeno.