Minificador de HTML

HTML mais leve, páginas mais rápidas

O HTML escrito por pessoas (ou gerado por construtores de páginas) é cheio de recuos, quebras de linha e comentários. Os navegadores não precisam de nada disso. O minificador de HTML remove os caracteres desnecessários e a página continua funcionando igual; ele também mostra os caracteres do HTML antes e os caracteres do HTML minificado depois, para você ver quanto economizou.

HTML mais leve é baixado mais rápido, principalmente em redes móveis, e é o primeiro arquivo que o navegador precisa antes de começar a mostrar alguma coisa.

Minifique uma cópia para produção e mantenha seu código original e legível para editar.

Como usar o minificador de HTML

1. Cole seu código HTML.
2. Envie para minificar.
3. Compare a quantidade de caracteres.
4. Copie o HTML minificado e teste a página antes de publicar.

Exemplos

Uma página pequena

Entrada:

<!DOCTYPE html>
<html>
  <head>
    <title> My page </title>
  </head>
  <body>
    <!-- main nav -->
    <p class="intro">
      Hello   <b>world</b>
    </p>
  </body>
</html>

Resultado:

<!DOCTYPE html><html><head><title>My page</title><body><p class=intro>Hello <b>world</b>

Os espaços e o comentário somem, as aspas de intro são removidas e as tags de fechamento que o HTML permite omitir (como </p>, </body> e </html>) são eliminadas. Os navegadores mostram a página igual.

Usos comuns

• Reduzir o peso de páginas HTML estáticas e landing pages.
• Comprimir modelos de e-mail HTML (alguns clientes de e-mail cortam mensagens grandes).
• Reduzir trechos e widgets HTML incorporados em outros sites.
• Preparar versões de produção quando você não tem uma ferramenta de build.
• Reduzir modelos de e-mail HTML antes do envio, depois de testá-los nos principais apps de e-mail.

Dicas e coisas para saber

• Guarde o arquivo original e legível. Código minificado é difícil de editar.
• Os espaços dentro de <pre> e <textarea> importam; confira essas partes depois de minificar.
• O Gmail corta e-mails com mais de uns 102 KB, então minificar e-mails HTML grandes pode mantê-los completos.
• A compressão do servidor (gzip ou Brotli) se soma à minificação para transferências ainda menores.
• Minifique também seus estilos e scripts com o minificador de CSS e o minificador de JS.

Casos especiais e limitações

• Tags de fechamento opcionais são removidas, o que é HTML válido mas pode confundir ferramentas que esperam todas as tags fechadas, como alguns construtores de e-mail ou analisadores XML. Teste antes de usar o resultado nelas.
• Os espaços dentro de <pre> e <textarea> são mantidos, porque ali eles têm significado.
• Tags de template (como {{ }} ou <?php ?>) podem ser alteradas. Minifique o HTML final já gerado, não os templates.
• CSS e JavaScript embutidos também são minificados, então confira se a página continua funcionando.

Perguntas frequentes

O que a minificação de HTML faz?

Ela remove os caracteres de que os navegadores não precisam, como espaços extras, quebras de linha e comentários, e assim o arquivo fica menor.

Minificar pode quebrar minha página?

Raramente, mas conteúdo sensível a espaços e scripts embutidos podem ser afetados. Sempre teste a versão minificada.

HTML minificado ajuda no SEO?

Indiretamente. Páginas mais rápidas melhoram a experiência do usuário e as Core Web Vitals. Os buscadores leem HTML minificado sem problema.

Quanto menor meu HTML vai ficar?

Depende de quantos espaços e comentários ele tem. Em HTML escrito à mão, é comum economizar de 10% a 30%.

Devo minificar o HTML que meu CMS gera?

Normalmente um plugin de cache ou de desempenho faz isso na hora. Use esta ferramenta para páginas estáticas, templates já gerados e HTML de e-mails.

Ferramentas relacionadas

• Minificador de CSS: Minifique seu CSS removendo todos os caracteres desnecessários.
• Minificador de JS: Minifique seu JS removendo todos os caracteres desnecessários.
• Removedor de tags HTML: Remova facilmente todas as tags HTML de um bloco de texto.
• Conversor de entidades HTML: Codifique ou decodifique entidades HTML de qualquer texto.
• Calculadora de tamanho de texto: Obtenha o tamanho de um texto em bytes (B), kilobytes (KB) ou megabytes (MB).