Minificador HTML

¿Qué es la minificación de HTML?

La minificación de HTML es el proceso de reducir el tamaño de un documento HTML sin cambiar cómo lo renderiza el navegador. Un minificador HTML elimina caracteres que existen únicamente para facilitar la lectura del desarrollador: espacios en blanco entre etiquetas, comentarios, etiquetas de cierre opcionales y valores de atributos redundantes. El resultado es funcionalmente idéntico al original pero más pequeño en bytes, lo que significa descargas más rápidas y un menor tiempo hasta el primer renderizado para los usuarios.

Los navegadores analizan el HTML en un árbol DOM y descartan la mayor parte del espacio en blanco durante ese proceso. Una secuencia de espacios y saltos de línea entre dos etiquetas div no tiene ningún efecto visual en la página renderizada. Los comentarios también son ignorados por el analizador. La minificación aprovecha estas reglas, eliminando lo que el analizador descartaría de todos modos para que nunca tenga que transferirse por la red.

El ahorro de la minificación de HTML varía según el documento. Las plantillas con muchos comentarios, las páginas renderizadas en el servidor con indentación profunda y la salida de CMS con estilos en línea suelen experimentar una reducción del 15-30% solo con la minificación. Para documentos pequeños el ahorro absoluto es modesto, pero en sitios de alto tráfico incluso unos pocos kilobytes por carga de página se acumulan en ahorros reales de ancho de banda a lo largo de millones de solicitudes.

¿Por qué usar este minificador HTML?

Pega tu HTML y obtén el resultado minificado al instante. Sin herramientas de compilación que instalar, sin archivos de configuración, sin cuentas.

Casos de uso del minificador HTML

Qué elimina la minificación de HTML

Un minificador HTML completo aplica varias transformaciones más allá de la eliminación de espacios en blanco. La tabla a continuación enumera las técnicas más comunes, ordenadas de las más seguras (siempre sin pérdidas) a las más agresivas (pueden causar problemas en casos extremos si se aplican sin cuidado).

Minificación vs. compresión Gzip

Los desarrolladores a veces preguntan si la minificación sigue siendo necesaria cuando el servidor ya aplica compresión Gzip o Brotli. La respuesta corta: sí, y funcionan mejor juntos.

La minificación reduce la entrada que procesa Gzip, por lo que la salida comprimida también es más pequeña. Las directrices de PageSpeed de Google recomiendan aplicar ambas. En una página típica, la minificación ahorra un 15-25% del tamaño sin procesar y Gzip comprime el resultado otro 60-80%. Combinadas, el tamaño total de transferencia puede reducirse al 10-20% del documento original sin minificar ni comprimir.

Ejemplos de código

A continuación se muestran ejemplos funcionales de minificación HTML en cuatro entornos. Cada ejemplo elimina comentarios y colapsa espacios en blanco.

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

Preguntas frecuentes