Saltar al contenido

Minificador HTML

Elimina espacios, comentarios y comillas del HTML - con informe antes/después en tu navegador.

Antes 220B → Después 162B (26% ahorrados)
<!DOCTYPE html><html><head><title>Hello</title></head><body><h1 class="greeting">Hello world</h1> <pre>
  this whitespace
  is preserved
    </pre> </body></html>

Pega HTML, obtén una versión minificada - con conteo de bytes y porcentaje ahorrado. Comentarios y espacios eliminados por defecto.

Cómo usarla

  1. Pega tu HTML

    Cualquier fragmento HTML5 o documento completo.

  2. Elige la agresividad

    Por defecto, espacios + comentarios. Modo agresivo además quita comillas redundantes y etiquetas opcionales.

  3. Copia la salida minificada

    Conteos de bytes antes/después junto a la salida.

¿Qué es?

Un minificador HTML ahorra bytes eliminando espacios y comentarios que no afectan al render. Los mayores ahorros son en HTML escrito a mano con sangría generosa; la salida generada por frameworks suele estar ya compacta. Ahorro típico: 15-30 % sobre HTML crudo antes de gzip.

Cuándo usarla

Inlinear HTML en una respuesta JSON o un template de correo donde cada byte cuenta. Optimizar a mano una página crítica tras una auditoría Lighthouse. Limpiar HTML exportado de un editor WYSIWYG que dejó un comentario en cada línea.

Errores comunes

Ejecutarlo en plantillas Jinja / Handlebars / Vue - el minificador no entiende las etiquetas de plantilla, así que {{ algo }} sobrevive pero el espacio alrededor puede desaparecer en sitios no deseados. Eliminar comentarios que la pipeline de build sí necesita (pragmas build-info, comentarios condicionales de IE). Y esperar grandes ganancias sobre salida ya gzippeada - la minificación HTML se acumula con gzip, pero gzip hace la mayor parte.

Preguntas frecuentes

¿Preserva <pre>, <textarea> y <code>?
Sí. Los espacios dentro de estas etiquetas son significativos, así que se dejan intactos. Lo mismo con los cuerpos de <script> y <style>.
¿La salida sigue siendo HTML válido?
Sí con las opciones por defecto - solo quitamos espacios donde no puedan cambiar el render. Con «quitar etiquetas opcionales» activo, la salida es más compacta pero depende de las reglas de elementos opcionales de HTML5, así que asegúrate de que tu parser sea HTML5-compatible.

Valora esta herramienta

Comparte tu experiencia para ayudar a los demás.

Más en esta categoría