Minificador de HTML
Cada byte de HTML que descarga una visita es un byte que el navegador espera antes de construir la página, y la mayoría del marcado trae sobrantes que un paso de compilación debería limpiar: indentación, comentarios y espacios entre etiquetas. Esta herramienta los elimina con una sola pegada. Como las páginas reales suelen incluir estilos y scripts, también comprime el CSS dentro de <style> y el JavaScript dentro de <script>, reduce todo el documento y muestra lado a lado el tamaño original, el minificado y el gzip para que el ahorro sea claro. Solo pliega espacios cuando es seguro, nunca cuando cambiaría el renderizado, y todo se ejecuta en el navegador.
- Pliega espacios y comentarios entre etiquetas solo cuando no cambia cómo se renderiza la página
- No solo trata el marcado: también minifica el CSS dentro de <style> y el JavaScript dentro de <script>
- Muestra juntos los tamaños original, minificado y gzip para juzgar el resultado por lo que enviaría un servidor
- Se ejecuta por completo en el navegador, así que el marcado pegado, incluido trabajo sin publicar, permanece en tu equipo
Resumen
Un minificador solo merece la pena si puedes confiar en la salida y ver la ganancia. Esta herramienta cuida ambos puntos: compresión segura para publicar y números que muestran si valió la pena.
- 01
Marcado plegado de forma segura
Elimina espacios y saltos de línea entre etiquetas, pero deja intacto el contenido donde el espacio importa. El texto dentro de pre y textarea, y los espacios entre elementos en línea que afectan el diseño, se conservan para que la página renderizada no cambie.
- 02
CSS y JS embebidos también se minifican
Una página real rara vez es solo marcado. El CSS dentro de cada bloque <style> y el JavaScript dentro de cada bloque <script> se minifican en el mismo paso, sin pasar esos bytes por herramientas separadas.
- 03
Comentarios eliminados, condicionales conservados
Los comentarios HTML se eliminan por defecto porque nunca aparecen en la página renderizada, pero los comentarios condicionales se conservan porque tienen significado. Si los necesitas para depurar, puedes conservar todos con un interruptor.
- 04
Desglose de tamaño confiable
Los tamaños original, minificado y gzip se actualizan con la entrada, junto al porcentaje exacto ahorrado. La cifra gzip es la que se parece al tamaño que viaja por la red.
- 05
Opciones bajo tu control
Los espacios se pliegan siempre, pero minificar CSS y JS embebidos, o conservar comentarios, son opciones separadas para decidir hasta dónde comprimir.
- 06
Copiar, descargar o subir
Pega desde el portapapeles o abre un archivo .html del disco; luego copia el resultado o guárdalo como min.html. Todo el flujo tarda segundos y no toca el servidor.
Cómo usarla
Convierte una página legible en una versión mínima lista para producción en pocos pasos, con el ahorro siempre visible.
- 01
Pega el HTML en el panel de entrada o usa “Subir” para cargar un archivo .html desde el disco.
- 02
Elige las opciones. Mantén “Minificar CSS” y “Minificar JS” activados para comprimir también el código embebido, y conserva comentarios solo cuando haga falta.
- 03
Revisa el desglose junto a la salida para confirmar la ganancia: tamaño original, minificado, gzip y porcentaje ahorrado.
- 04
Copia el HTML minificado o descárgalo como archivo min.html, y úsalo en la página o paso de compilación que sirve el marcado de producción.
Detalles
Detalles que hacen que la salida sea segura para publicar y fácil de confiar.
- Se basa en html-minifier-terser: analiza el marcado y minifica CSS y JS embebidos con optimizadores maduros, no con sustituciones de texto a ciegas.
- El tamaño gzip se mide con la compresión integrada del navegador, así que refleja lo que enviaría un servidor real.
- La minificación se actualiza mientras escribes y al cambiar opciones, sin tener que pulsar un botón antes de ver el resultado.
- Los errores de análisis se muestran en su sitio con el mensaje, en lugar de producir una salida rota o vacía en silencio.
- No se sube ni se registra nada. El HTML pegado, incluido trabajo sin publicar, permanece en el navegador y desaparece al cerrar la pestaña.
Casos de uso
Reducir HTML a lo esencial merece la pena en estos casos.
-
Publicar una página más rápida
Un marcado más pequeño llega antes al navegador y desbloquea antes el análisis, lo que ayuda a First Contentful Paint y a Core Web Vitals, métricas que también pesan para buscadores.
-
Paso de compilación sin empaquetador
En un sitio estático, una landing page o una plantilla de correo sin empaquetador, pega el HTML aquí para obtener una compresión parecida a la de un flujo de compilación.
-
Documento crítico en línea
Cuando entregas un único archivo HTML autocontenido con CSS y JS en línea, minificar los tres juntos marca la diferencia entre una carga ligera y una inflada.
-
Recortar marcado generado
La salida de un motor de plantillas, un CMS o un constructor de correos suele salir sin minificar. Pásala por aquí para recuperar bytes antes de que llegue a las personas usuarias.
Ver también
¿Necesitas leerlo en lugar de reducirlo?Embellecedor de HTML expande marcado minificado en un documento legible; si solo trabajas con hojas de estilo,Minificador de CSS comprime CSS del mismo modo.
Qué hace realmente minificar HTML
Minificar no es ofuscar y no es lo mismo que comprimir con gzip. Elimina caracteres que el navegador no necesita mientras mantiene idéntico el resultado renderizado. Estos son los cambios y por qué son seguros.
-
Espacios entre etiquetas
La indentación y los saltos de línea que hacen legible el marcado suelen ser ignorados por el navegador, por eso se pliegan. Las excepciones son los espacios dentro de pre y textarea, y los espacios entre elementos en línea que pueden afectar el diseño; esos se conservan.
-
Comentarios
Los comentarios HTML están escritos para personas y nunca se renderizan, así que se eliminan por completo. Los comentarios condicionales son la excepción porque apuntan a navegadores concretos, y se conservan.
-
Código embebido
Los estilos y scripts viven dentro del HTML, así que un minificador que solo tocara el marcado dejaría gran parte del peso intacto. Comprimir el CSS en <style> y el JS en <script> es lo que vuelve realmente más pequeña una página real.
-
Es seguro, no una pérdida visual
La minificación solo elimina lo que el navegador no necesita para renderizar la misma página. No es ofuscación: el marcado sigue funcionando igual, solo deja de estar formateado para lectura humana.
-
Por qué gzip es el número importante
Los servidores envían HTML comprimido con gzip o brotli, y esos formatos ya pliegan espacios repetidos. Minificar sigue ayudando porque elimina partes que la compresión de transporte no puede conocer y entrega una entrada más limpia, pero conviene juzgar el ahorro por el tamaño gzip, no por los bytes sin comprimir.
-
Minifica para producción, conserva el origen legible
El HTML minificado es incómodo de editar, así que pertenece a la salida de compilación, no al repositorio. Mantén la plantilla legible como fuente y minifica como último paso antes de publicar.
Buenas prácticas
Hábitos para mantener el HTML minificado pequeño y sin sorpresas.
- Minifica como último paso de la compilación y despliega el resultado. No edites a mano HTML minificado ni lo confirmes como fuente de verdad.
- Mide la ganancia con la cifra gzip, porque eso es lo que el servidor transfiere realmente. Un gran ahorro en bytes sin comprimir puede quedar en poco al aplicar compresión.
- En producción, mantén “Minificar CSS” y “Minificar JS” activados para que el código embebido se comprima junto con el marcado y no quede como la parte más pesada del archivo.
- Sirve el archivo minificado con gzip o brotli activado y una duración de caché razonable. La minificación y la compresión de transporte se suman; no se sustituyen.
- Vigila los puntos sensibles al espacio: si un diseño depende del espacio entre elementos en línea, confirma que siga viéndose bien tras minificar, porque ese espacio tiene significado.
Limitaciones
Qué hace esta herramienta y qué deja para otros pasos.
- Minifica un único documento HTML junto con el CSS y JS embebidos. No descarga hojas de estilo, scripts ni imágenes enlazadas.
- No transpila JavaScript moderno, no añade prefijos de proveedor al CSS ni rebaja código para navegadores antiguos. Para eso conviene usar una herramienta de compilación.
- Lenguajes de plantillas como Handlebars, Jinja o ERB no son HTML por sí solos; minifica la salida renderizada en lugar del código de la plantilla.
- Un error de sintaxis detiene la minificación y se informa, no se esquiva; una entrada muy rota no producirá una salida parcial.
Preguntas frecuentes
Preguntas frecuentes sobre minificar HTML, qué cambia y cuándo usarlo.
¿Minificar cambia cómo se renderiza mi página?
No. La minificación solo elimina caracteres que el navegador no necesita, como espacios entre etiquetas y comentarios que nunca se renderizan. Los espacios que afectan el diseño, como el texto dentro de pre o la separación entre elementos en línea, se conservan, así que la página renderizada se ve igual antes y después.
¿También minifica el CSS y JavaScript dentro del HTML?
Sí. El CSS dentro de cada bloque <style> y el JavaScript dentro de cada bloque <script> se minifican junto con el marcado, cada uno con su interruptor para desactivarlo. En una página real, el código embebido suele ser gran parte del peso, por eso mucho ahorro viene de ahí.
¿Qué diferencia hay entre minificar y gzip?
Trabajan juntos. Minificar edita el HTML y elimina contenido que un compresor no puede saber que es innecesario. Gzip o brotli comprimen después lo que envías y pliegan repeticiones en la red. Conviene usar ambos: primero minificar para dar una entrada limpia y luego dejar que el servidor comprima. Juzga la ganancia real con la cifra gzip que se muestra aquí.
¿Cuánto más pequeño quedará mi HTML?
Depende de cómo esté escrito el origen. Un marcado con mucho formato, estilos en línea y scripts grandes puede reducirse bastante; una página ya compacta ahorrará menos. Al contar gzip, el porcentaje baja porque la compresión ya recuperaba parte de los espacios, y por eso la cifra gzip es la más honesta.
¿Debo confirmar el HTML minificado en el repositorio?
No. El HTML minificado es un artefacto de compilación, no código fuente. Confirma la plantilla o documento legible que editan tú y tu equipo, y genera el archivo minificado como último paso antes de servirlo. Subir la salida minificada vuelve difíciles las revisiones y las fusiones.
¿Puedo minificar plantillas como Handlebars o Jinja?
No directamente. Esta herramienta minifica HTML estándar, que es lo que recibe un navegador. Sintaxis de plantillas como {{ }} o {% %} no es HTML válido por sí sola; minifica la salida renderizada o usa una herramienta hecha para tu lenguaje de plantillas.
¿Mi HTML se sube a algún sitio?
No. Todo se ejecuta en el navegador. El HTML que pegas, cualquier archivo que subas y el resultado se procesan localmente, nunca se transmiten ni se almacenan, y desaparecen al cerrar la pestaña. Incluso el marcado privado o sin publicar permanece seguro.
Herramientas relacionadas
Sigue explorando el resto del conjunto de herramientas de datos y formato.