Minificador HTML

O que é Minificação de HTML?

A minificação de HTML é o processo de reduzir o tamanho de um documento HTML sem alterar a forma como o navegador o renderiza. Um minificador de HTML remove caracteres que existem apenas para facilitar a leitura pelo desenvolvedor: espaços em branco entre tags, comentários, tags de fechamento opcionais e valores de atributos redundantes. A saída é funcionalmente idêntica à fonte, porém menor em bytes, o que significa downloads mais rápidos e menor tempo até o primeiro paint para os usuários.

Os navegadores analisam o HTML em uma árvore DOM e descartam a maior parte dos espaços em branco durante esse processo. Uma sequência de espaços e quebras de linha entre duas tags div não tem nenhum efeito visual na página renderizada. Os comentários também são ignorados pelo parser. A minificação aproveita essas regras, removendo o que o parser descartaria de qualquer forma, para que nunca precise ser transferido pela rede.

A economia obtida com a minificação de HTML varia conforme o documento. Templates com muitos comentários, páginas renderizadas no servidor com indentação profunda e saída de CMS com estilos inline frequentemente apresentam uma redução de tamanho de 15 a 30% apenas com a minificação. Para documentos pequenos, a economia absoluta é modesta, mas em sites de alto tráfego até alguns kilobytes por carregamento de página se acumulam em uma economia real de banda em milhões de requisições.

Por que Usar Este Minificador de HTML?

Cole seu HTML e obtenha a saída minificada instantaneamente. Sem ferramentas de build para instalar, sem arquivos de configuração, sem cadastros.

Casos de Uso do Minificador de HTML

O que a Minificação de HTML Remove

Um minificador de HTML completo aplica várias transformações além da remoção de espaços em branco. A tabela abaixo lista as técnicas mais comuns, ordenadas da mais segura (sempre sem perdas) até a mais agressiva (pode quebrar casos extremos se aplicada sem critério).

Minificação vs. Compressão Gzip

Desenvolvedores às vezes perguntam se a minificação ainda é necessária quando o servidor já aplica compressão Gzip ou Brotli. A resposta curta: sim, e eles funcionam melhor juntos.

A minificação reduz a entrada que o Gzip processa, então a saída comprimida também é menor. As diretrizes PageSpeed do Google recomendam aplicar ambos. Em uma página típica, a minificação economiza 15 a 25% do tamanho bruto e o Gzip comprime o resultado em outros 60 a 80%. Combinados, o tamanho total de transferência pode cair para 10 a 20% do documento original não minificado e não comprimido.

Exemplos de Código

Abaixo estão exemplos funcionais de minificação de HTML em quatro ambientes. Cada exemplo remove comentários e colapsa espaços em branco.

import { minify } from 'html-minifier-terser'

const html = `
  <div class="card">
    <!-- user profile -->
    <p>  Hello, world!  </p>
  </div>
`

const result = await minify(html, {
  collapseWhitespace: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeEmptyAttributes: true,
})
// → '<div class="card"><p>Hello, world!</p></div>'

import htmlmin

html = """
<div class="card">
  <!-- user profile -->
  <p>  Hello, world!  </p>
</div>
"""

result = htmlmin.minify(html, remove_comments=True, remove_empty_space=True)
# → '<div class="card"><p>Hello, world!</p></div>'

package main

import (
    "fmt"
    "github.com/tdewolff/minify/v2"
    "github.com/tdewolff/minify/v2/html"
)

func main() {
    m := minify.New()
    m.AddFunc("text/html", html.Minify)

    input := `<div class="card">
  <!-- user profile -->
  <p>  Hello, world!  </p>
</div>`

    result, _ := m.String("text/html", input)
    fmt.Println(result)
    // → <div class=card><p>Hello, world!</div>
}

# Install globally
npm install -g html-minifier-terser

# Minify a file
html-minifier-terser --collapse-whitespace --remove-comments input.html -o output.html

# Pipe from stdin
cat index.html | html-minifier-terser --collapse-whitespace --remove-comments

# With all common optimizations
html-minifier-terser \
  --collapse-whitespace \
  --remove-comments \
  --remove-redundant-attributes \
  --remove-empty-attributes \
  --minify-css true \
  --minify-js true \
  input.html -o output.min.html

Perguntas Frequentes