KeroTools

Minificar HTML em Um Clique

Reduza espaços e remova comentários do seu HTML para diminuir seu tamanho na hora.

Entrada
0 caracteres
Saída

Sua marcação fica no seu aparelho

Nada para apagar depois

Seguro para textos não publicados

Funciona em todo navegador moderno

Como funciona

  1. 1

    Cole seu HTML

    Um documento inteiro, um template de e-mail ou um fragmento que um servidor insere numa página.

  2. 2

    Leia o relatório

    Compare o tamanho minificado com o comprimido e veja os avisos antes de substituir o original.

  3. 3

    Copie a saída

    Leve para uma saída de build, um arquivo de template ou um documento embutido.

Por que usar esta ferramenta

Espaço significativo mantido

O espaço entre elementos em linha é um vão de palavra que aparece na tela, então é mantido em vez de colapsado.

pre e textarea intocados

Os dois preservam espaço por especificação, e reformatar o conteúdo deles muda o que o visitante lê.

Tags de fechamento no lugar

Removê-las aposta na recuperação de erro do parser, e esta ferramenta não faz essa aposta.

script e style tratados direito

Blocos embutidos são outras linguagens, e um texto com uma sequência de fechamento de script não é lido como marcação.

Honesto sobre o ganho

O documento costuma ser o menor dos seus três arquivos, e os números mostrados dizem isso.

Nada sai do navegador

A marcação é processada nesta página, então rascunhos e endereços de homologação não vão parar num servidor.

Espaço em HTML às vezes significa algo, e é aí que está toda a dificuldade

Em CSS e JavaScript o espaço fora de uma string não carrega significado e pode ser removido em bloco. HTML não funciona assim. Uma sequência de espaços entre dois elementos em linha colapsa para um único espaço, não para nada, e esse espaço sobrevivente é um vão de palavra que aparece na tela: tire a quebra de linha entre `<span>Total</span>` e `<span>Preço</span>` e as duas palavras grudam. O mesmo vale entre um link e o texto que vem depois, entre elementos `<a>` vizinhos numa navegação e em volta de `<img>` e `<button>`. É por isso que uma página minificada pode de repente ler “SairAjustes”, e por isso a regra segura é reduzir espaço só entre elementos de bloco, onde o navegador nunca estava desenhando vão nenhum. Decidir em que caso você está exige saber o valor de display de cada elemento, que depende do seu CSS — então uma ferramenta que só enxerga a marcação precisa ser conservadora, e esta é.

pre e textarea preservam espaço por especificação

Dois elementos tornam o espaço estrutural no sentido mais forte. Dentro de `<pre>`, cada espaço e cada quebra aparece como foi escrito, e é por isso que exemplos de código e layout em ASCII sobrevivem ali e em nenhum outro lugar; reindentar um bloco `<pre>` muda o código que o seu leitor vê, e colapsá-lo destrói o exemplo inteiro. `<textarea>` se comporta igual com o valor inicial, então o espaço no texto padrão de um formulário é conteúdo, não formatação — e o parser remove uma quebra de linha imediatamente depois da tag de abertura, o que significa que uma ferramenta que acrescenta ou tira uma muda em silêncio o que o usuário encontra no campo. O conteúdo de `<script>` e `<style>` também está fora das regras de espaço no nível da marcação, por outra razão vista adiante. Qualquer minificador que trate o documento como um fluxo uniforme de tags e texto vai acabar estragando um desses casos.

HTML é tolerante, e isso torna a minificação agressiva mais arriscada, não mais segura

HTML não tem erros de parsing no sentido que CSS e JavaScript têm. Omita `</p>`, omita `</li>`, omita `</tbody>`, tire as aspas de um atributo, e um navegador se recupera e monta uma árvore assim mesmo — a especificação define exatamente como. Minificadores exploram isso: remover tags de fechamento opcionais é economia real de bytes, e a especificação diz que é legal. O detalhe é que a recuperação só é garantidamente idêntica para marcação que já era válida. Num documento em que uma tag já está desbalanceada, ou em que um `<div>` mora dentro de um `<p>`, remover tags opcionais desloca o ponto em que o parser decide que um elemento terminou, e a árvore resultante é outra árvore — visível em geral como conteúdo pulando para fora da caixa a que pertencia. É também marcação que outras coisas leem: um fragmento com fechamentos implícitos pode quebrar um motor de templates adiante, um cliente de e-mail ou um coletor que use um parser XML mais rígido. Esta ferramenta deixa as tags de fechamento em paz, porque a economia é pequena e a falha é estrutural.

script e style embutidos são linguagens diferentes dentro do mesmo arquivo

Um bloco `<script>` ou `<style>` não é marcação, e o parser troca de modo ao entrar nele. Isso tem uma consequência específica que pega ferramentas ingênuas: dentro de um script clássico, o parser procura os caracteres literais `</script` e encerra o elemento ali, mesmo que estejam dentro de uma string JavaScript. Um código que escreve `document.write("</script>")` portanto encerra o próprio bloco, e a correção padrão é quebrar a sequência como `"<\/script>"`. Um minificador que reescreve aspas de string ou reescapa o texto sem entender isso pode criar a sequência onde ela não existia, e a página trunca dali em diante. O caso espelho é um minificador que trata o conteúdo do script como texto e reduz o espaço dentro dele, o que é inofensivo até encontrar um template literal ou uma linha não terminada em que a quebra fazia o trabalho do ponto e vírgula. Tratar esses blocos direito significa rodar uma passada real de JavaScript e CSS neles, não uma passada de marcação.

HTML é o arquivo em que a minificação compra menos

Vale dizer com todas as letras, porque muda onde vale gastar esforço. Dos três arquivos de texto que uma página carrega, o documento costuma ser o menor, e é o que em geral você não consegue cachear — uma folha de estilo e um bundle levam impressão digital e ficam guardados um ano, enquanto o HTML é buscado novo em quase toda visita. Isso soa como argumento para encolhê-lo, e em parte é, mas os números são modestos: marcação comprime extremamente bem porque repete os mesmos nomes de tag e os mesmos padrões de atributo centenas de vezes, então gzip ou Brotli no servidor já tira quase tudo que um minificador tiraria. Os ganhos reais num documento são estruturais — menos blocos de dados embutidos, nenhuma imagem base64 gigante colada no fonte, nenhum estado renderizado no servidor despejado numa tag script. Se o seu HTML é realmente grande, minificar não é a solução; descobrir o que tem dentro geralmente é.

O que a marcação de uma página entrega, e por que isso pede processamento local

A marcação é a mais silenciosamente reveladora dos três arquivos. Ela carrega o próprio texto, incluindo títulos e nomes de produto de um lançamento que ainda não aconteceu, e comentários em HTML são onde times deixam as notas mais francas — um número de chamado, um host de homologação, um lembrete de que uma seção fica escondida até o jurídico aprovar, o nome da agência que escreveu o template. Ela carrega campos de formulário ocultos, identificadores de analytics, às vezes um token CSRF e muitas vezes um endereço de e-mail que não está publicado em nenhum outro lugar. Colar uma página real num minificador hospedado entrega tudo isso a um terceiro em troca da redução de bytes que você acabou de ler ser a menor das três. Aqui tudo acontece na página que você está lendo: abra as ferramentas de desenvolvedor antes de colar e verá a contagem de requisições ficar onde estava.

Erros comuns que vale evitar

  • Reduzir o espaço entre elementos em linha. Esse espaço é um vão de palavra que aparece na tela, então tirá-lo gruda duas palavras mesmo que a marcação continue parecendo certa.
  • Reformatar o conteúdo de `pre` ou `textarea`. Os dois preservam espaço por especificação, então reindentar muda o exemplo de código ou o texto padrão do formulário.
  • Remover tags de fechamento opcionais para economizar bytes. A recuperação só é garantidamente idêntica em marcação já válida, e em qualquer coisa desbalanceada o parser encerra os elementos em outro lugar.
  • Deixar uma passada no nível da marcação tocar o conteúdo de `script`. O literal `</script` encerra o elemento até dentro de uma string JavaScript, então reescapar pode truncar a página.
  • Esperar que a minificação resolva um documento grande. Marcação comprime muito bem, então o servidor já levou quase tudo — a causa real costuma ser um bloco de dados embutido.

Comparação

ItemEsta ferramentaMinificadores onlineUm pipeline de build
Marcação enviada a um servidorNuncaGeralmente simNão
Mantém os vãos em linhaSempreVariaConfigurável
Deixa pre e textarea em pazSimVariaGeralmente
Remove tags de fechamento opcionaisNãoCom frequênciaConfigurável
Tamanho comprimido mostradoSimRaramenteCom um plugin
PreçoGrátisGrátis / planos pagosGrátis

Recursos

Remoção de comentários

Notas de desenvolvimento e marcas de seção saem; comentários condicionais que ainda fazem algo ficam.

Colapso seguro de espaços

Sequências de espaço são reduzidas só entre elementos de bloco, onde nunca houve vão nenhum na tela.

Arrumação de atributos

Atributos type redundantes e valores vazios saem onde a especificação do HTML já os faz padrão.

Tratamento de aspas visível

Aspas de atributo só saem quando o valor não pode precisar delas, e nunca no último atributo.

Os dois tamanhos reportados

Bruto e gzip, porque a compressão do servidor já leva quase tudo que a minificação tira da marcação.

Documentos grandes suportados

Uma página renderizada de qualquer tamanho minifica sem upload nem teto.

Nada para instalar

Sem ferramenta de build, sem runtime, sem dependências — funciona na página web.

Compatível com árabe e RTL

Interface completa em oito idiomas, incluindo árabe da direita para a esquerda.

Seguro por padrão

Servido por HTTPS, sem rastreio de conteúdo e sem envio a terceiros.

Quem usa

Desenvolvedores front-end

Reduzir um template que não passa por um passo de build.

Desenvolvedores de e-mail

Colocar um template abaixo do limite de tamanho de um cliente sem quebrar o layout em tabelas.

Desenvolvedores de backend

Arrumar um fragmento renderizado no servidor antes de devolvê-lo à página.

Quem embute um documento

Compactar marcação que precisa ser embutida onde há um teto de tamanho rígido.

Perguntas Frequentes

Não. Tudo roda localmente no seu navegador — seu texto nunca é enviado, armazenado ou compartilhado.

Sim — totalmente grátis, sem conta e sem limites.