Guía de uso
Esta herramienta sirve para minificar HTML: elimina comentarios, sangrías y espacios repetidos para que la misma página pese menos. No toca lo que se ve: el texto y los espacios entre elementos en línea se conservan, y el contenido de pre y textarea queda tal cual. Los bloques <style>, <script> y JSON-LD incrustados se reducen en la misma pasada, sin salir de tu navegador.
Cómo minificar HTML en cuatro pasos
- Pega el HTML final, el que genera tu servidor, en el campo de entrada.
- Lanza la minificación con el botón de ejecutar o con el atajo Ctrl + Enter.
- Comprueba bajo la salida cuántos caracteres y bytes ocupa ahora.
- Copia o descarga el resultado y abre la página una vez en el navegador antes de publicarla.
Qué elimina y qué respeta el minificador
La regla general es sencilla: se elimina lo que el navegador ignora y se respeta lo que llega a la pantalla.
| Elemento | Resultado |
|---|---|
| Comentarios normales | Se eliminan |
Comentarios condicionales y los que empiezan por <!--! | Se conservan |
| Sangrías y saltos de línea junto a etiquetas de bloque | Desaparecen por completo |
Espacio entre elementos en línea (a, strong, span...) | Se reduce a uno, nunca se pierde |
| Espacio de no separación | Se mantiene |
| Espacios dentro de una etiqueta | alt = "Logo" pasa a alt="Logo"; el valor entre comillas no cambia |
pre y textarea | Intactos, carácter por carácter |
| CSS y JavaScript incrustados | Minificados; los nombres de variables no se acortan |
| Datos estructurados JSON-LD | Reescritos como JSON compacto |
Si un bloque de script o de estilo no se puede analizar, se deja como estaba en lugar de generar código a medio minificar.
Un ejemplo con precios
Imagina este fragmento, escrito en varias líneas con sangría: un comentario <!-- oferta -->, la etiqueta <p class = "precio">, luego <strong>19,90 €</strong> <del>24,90 €</del> y el cierre </p>. Tras minificarlo queda en una sola línea: <p class="precio"><strong>19,90 €</strong> <del>24,90 €</del></p>. El comentario y la sangría desaparecen, pero el espacio entre los dos precios sigue ahí, porque sin él se leería "19,90 €24,90 €".
Cuánto se ahorra depende del código de partida. En nuestra prueba, un fragmento de 738 caracteres con comentarios, sangría y una hoja de estilos incrustada quedó en 591. Un HTML que ya es compacto se reducirá mucho menos.
Casos en los que conviene revisar el resultado
- Cajas con
display: inline-block: el salto de línea entre dosdivse ve como un pequeño hueco. Al minificar se elimina y las cajas quedan pegadas. Si tu diseño depende de ese hueco, defínelo congapomargin. - Elementos con
white-space: preque no son una etiquetapre: sus espacios también se reducen. Usa una etiquetaprereal para el texto preformateado. - Plantillas con código de servidor: minifica el HTML que genera la plantilla, no el archivo de la plantilla.
- Comentarios que funcionan como marcas: algunos editores por bloques y plugins guardan su estructura en comentarios. Minifica solo lo que se sirve al visitante, nunca el contenido que vas a volver a editar.
¿Minificar o comprimir?
Las dos cosas. La compresión gzip o Brotli del servidor ya reduce muy bien los espacios repetidos, así que la diferencia real en la transferencia es menor que la del archivo en bruto. Aun así, minificar compensa en páginas de aterrizaje con mucho código incrustado, en fragmentos HTML guardados en una base de datos y en correos HTML, donde se cita con frecuencia que algunos clientes recortan los mensajes de más de unos 100 KB. Lo explicamos con más detalle en qué es minificar código.
Privacidad y herramientas relacionadas
La minificación se ejecuta con JavaScript en tu pestaña: el código que pegas no se envía al servidor y la página solo suma un contador de uso anónimo. Para volver a hacer legible un HTML minificado, usa la herramienta para formatear HTML; para archivos de script independientes tienes minificar JavaScript. El resto está en herramientas para desarrolladores.