Minificador de HTML
Pega tu HTML para eliminar comentarios y espacios innecesarios sin tocar <pre>, <textarea>, los scripts ni los comentarios condicionales. Consulta el tamaño antes y después, y copia o descarga el resultado.
Última actualización:
Cómo usar Minificador de HTML
- Pega tu HTML en el cuadro de entrada, o pulsa Subir .html (también puedes arrastrar un archivo al cuadro).
- Elige las opciones. Los valores por defecto son seguros para casi cualquier página; activa “Eliminar comillas opcionales de atributos” para ahorrar algunos bytes más.
- Pulsa Minificar HTML. El resultado también se actualiza en tiempo real mientras escribes.
- Comprueba el ahorro en las tarjetas Original, Minificado y Ahorrado.
- Copia o descarga el HTML minificado y úsalo en producción. Conserva tu original legible para editarlo.
Qué cambia el minificador de HTML (y qué no toca nunca)
| Entrada | Salida | Por qué es seguro |
|---|---|---|
<!-- nav --> | (eliminado) | Los comentarios nunca se muestran. |
<div>⏎␣␣<p>Hi</p>⏎</div> | <div><p>Hi</p></div> | Los espacios entre elementos de bloque no se muestran. |
<b>a</b>␣␣⏎<i>b</i> | <b>a</b>␣<i>b</i> | Se mantiene un espacio entre elementos en línea para que las palabras sigan separadas. |
class="a␣␣␣b" | class="a b" | Las listas de clases son elementos separados por espacios. |
checked="checked" | checked | En los atributos booleanos solo importa su presencia. |
<script type="text/javascript"> | <script> | JavaScript es el tipo de script por defecto en HTML5. |
<br /> | <br> | Los elementos vacíos no necesitan barra de cierre en HTML5 (SVG conserva su />). |
<pre>, <textarea> | (sin cambios) | Dentro de ellos los espacios en blanco tienen significado. |
Ejemplo práctico: cómo se calcula el ahorro
El ahorro es (bytes originales − bytes minificados) ÷ bytes originales × 100, medido en bytes UTF-8, que es lo que tu servidor envía realmente. Si una plantilla ocupa 18,400 bytes y la versión minificada 14,720 bytes, ahorras 3,680 bytes, es decir, 3,680 ÷ 18,400 = 20%.
La minificación y la compresión funcionan juntas. Gzip o Brotli reducen muy bien el texto repetido, así que un ahorro del 20% antes de comprimir suele convertirse en un ahorro del 5–10% después. Aun así merece la pena en páginas que se sirven millones de veces, y el HTML minificado también se analiza un poco más rápido.
Consejos para minificar HTML de forma segura
- Minifica como parte de tu proceso de compilación o publicación y conserva el código fuente legible en el control de versiones.
- Si usas
white-space: preen CSS para un elemento que no sea<pre>, pon ese contenido en un<pre>o desactiva la reducción de espacios. - Los scripts en línea se minifican de forma ligera y conservadora. Para paquetes de JavaScript, usa una herramienta específica como un minificador de JS en tu proceso de compilación.
- Los marcadores de plantilla como
{{ name }}se dejan intactos porque son texto normal.
Preguntas frecuentes
¿Qué hace un minificador de HTML?
Elimina los caracteres que el navegador no necesita, como los comentarios, la indentación y los saltos de línea entre etiquetas, para que el archivo sea más pequeño y se descargue más rápido. La página se ve y funciona igual.
¿Es seguro minificar HTML?
Sí, si los espacios en blanco se tratan con cuidado. Esta herramienta mantiene un único espacio entre elementos en línea y palabras, no toca el contenido de <pre> y <textarea> y nunca reescribe el contenido de las cadenas de los scripts. Prueba siempre la página minificada una vez antes de publicarla.
¿Cuánto se reducirá mi HTML?
Normalmente entre un 10 y un 25% en páginas escritas a mano, y más en plantillas con mucha indentación o páginas con muchos comentarios. Combinado con la compresión gzip o Brotli de tu servidor, el HTML minificado ahorra un poco más.
¿Qué son los comentarios condicionales?
Son comentarios como <!--[if lt IE 9]> … <![endif]--> que las versiones antiguas de Internet Explorer leen como código. Se conservan por defecto para que las alternativas para navegadores antiguos sigan funcionando; desmarca la opción para eliminarlos también.
¿Minifica el JavaScript y el CSS en línea?
Sí, de forma ligera. Elimina los comentarios y los espacios sobrantes en los bloques <style>, los atributos style y los scripts en línea. Los saltos de línea del JavaScript se mantienen donde podrían importar para la inserción automática de punto y coma. Para la máxima compresión de scripts grandes, usa un minificador de JS específico.
¿Cuándo se pueden quitar las comillas de los atributos?
HTML permite valores de atributo sin comillas cuando no contienen espacios ni ninguno de los caracteres " ' ` = < >. Con la opción activada, las comillas solo se eliminan de esos valores, por ejemplo class=card en lugar de class="card".
¿Se sube mi código a algún sitio?
No. El minificador funciona por completo en tu navegador con JavaScript, así que tu HTML nunca sale de tu computadora.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.