Minificador de HTML

HTML más liviano, páginas más rápidas

El HTML escrito por personas (o generado por constructores de páginas) está lleno de sangrías, saltos de línea y comentarios. Los navegadores no necesitan nada de eso. El minificador de HTML quita los caracteres innecesarios y la página sigue funcionando igual; además muestra los caracteres HTML antes y los caracteres del HTML minificado después, para que veas cuánto ahorraste.

El HTML más liviano se descarga más rápido, sobre todo en redes móviles, y es el primer archivo que el navegador necesita antes de empezar a mostrar algo.

Minifica una copia para producción y conserva tu código original y legible para editarlo.

Cómo usar el minificador de HTML

1. Pega tu código HTML.
2. Envía para minificarlo.
3. Compara la cantidad de caracteres.
4. Copia el HTML minificado y prueba la página antes de publicarla.

Ejemplos

Una página pequeña

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>

Desaparecen los espacios y el comentario, se quitan las comillas de intro y se eliminan las etiquetas de cierre que el HTML permite omitir (como </p>, </body> y </html>). Los navegadores la muestran igual.

Usos comunes

• Reducir el peso de páginas HTML estáticas y páginas de aterrizaje.
• Comprimir plantillas de correo HTML (algunos clientes de correo recortan los mensajes grandes).
• Achicar fragmentos y widgets HTML que se incrustan en otros sitios.
• Preparar versiones de producción cuando no tienes una herramienta de build.
• Achicar plantillas de correo HTML antes de enviarlas, después de probarlas en las principales apps de correo.

Consejos y cosas que conviene saber

• Conserva el archivo original y legible. El código minificado es difícil de editar.
• Los espacios dentro de <pre> y <textarea> importan; revisa esas partes después de minificar.
• Gmail recorta los correos de más de unos 102 KB, así que minificar los correos HTML grandes puede mantenerlos completos.
• La compresión del servidor (gzip o Brotli) se suma a la minificación para transferencias todavía más chicas.
• Minifica también tus estilos y scripts con el minificador de CSS y el minificador de JS.

Casos especiales y limitaciones

• Se quitan las etiquetas de cierre opcionales, lo que es HTML válido pero puede confundir a herramientas que esperan que todas las etiquetas estén cerradas, como algunos constructores de correos o analizadores XML. Prueba antes de usar el resultado ahí.
• Los espacios dentro de <pre> y <textarea> se conservan, porque ahí tienen significado.
• Las etiquetas de plantillas (como {{ }} o <?php ?>) pueden alterarse. Minifica el HTML final ya generado, no las plantillas.
• El CSS y el JavaScript en línea también se minifican, así que revisa que la página siga funcionando.

Preguntas frecuentes

¿Qué hace la minificación de HTML?

Quita los caracteres que los navegadores no necesitan, como espacios extra, saltos de línea y comentarios, y así el archivo queda más chico.

¿Minificar puede romper mi página?

Rara vez, pero el contenido sensible a los espacios y los scripts en línea pueden verse afectados. Prueba siempre la versión minificada.

¿El HTML minificado ayuda al SEO?

De forma indirecta. Las páginas más rápidas mejoran la experiencia del usuario y las Core Web Vitals. Los buscadores leen sin problema el HTML minificado.

¿Cuánto más chico quedará mi HTML?

Depende de cuántos espacios y comentarios tenga. En HTML escrito a mano es común ahorrar entre un 10 % y un 30 %.

¿Debo minificar el HTML que genera mi CMS?

Por lo general lo hace al vuelo un plugin de caché o de rendimiento. Usa esta herramienta para páginas estáticas, plantillas ya generadas y HTML de correos.

Herramientas relacionadas

• Minificador de CSS: Minifica tu CSS quitando todos los caracteres innecesarios.
• Minificador de JS: Minifica tu JS quitando todos los caracteres innecesarios.
• Eliminador de etiquetas HTML: Quita fácilmente todas las etiquetas HTML de un bloque de texto.
• Convertidor de entidades HTML: Codifica o decodifica entidades HTML de cualquier texto.
• Calculadora de tamaño de texto: Obtén el tamaño de un texto en bytes (B), kilobytes (KB) o megabytes (MB).