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. Tres niveles deciden hasta dónde llega la reescritura del marcado, y todo lo que el motor no puede comprimir con seguridad aparece listado bajo la salida y se deja como estaba en vez de estropearlo. Todo se ejecuta en el navegador.
Resumen
Un minificador solo merece la pena si puedes confiar en la salida y ver la ganancia. Esta herramienta cuida ambos puntos: compresión que puedes publicar sin repasarla a mano y números que muestran si valió la pena.
- 01
Tres niveles de compresión
Seguro reduce cada secuencia de espacios a uno solo y no reescribe ninguna etiqueta ni atributo, así que incluso un elemento al que el CSS le da display: inline se renderiza igual. Estándar elimina los espacios entre etiquetas junto con los atributos que HTML5 ya da por supuestos. Máximo elimina atributos vacíos o con valor por defecto, acorta el doctype y ordena atributos y clases para que el archivo comprima mejor. Las comillas de los atributos se mantienen incluso aquí: quitarlas ahorra medio punto porcentual tras gzip y produce marcado que algunos formateadores se niegan a abrir.
- 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
Nada se estropea en silencio
El motor de CSS borra las reglas anidadas y lee una declaración a la que le falta el dos puntos como si fuera un selector, lo que se lleva por delante la regla siguiente. Ambas cosas ocurren sin avisar. Cada bloque
<style>se revisa antes, y cualquiera que fuera a volver dañado se deja sin minificar, con sus reglas intactas, y se lista bajo la salida. - 04
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.
- 05
Desglose de tamaño confiable
Los tamaños original, minificado y gzip se actualizan con la entrada a ambos lados del panel, junto al porcentaje exacto ahorrado. La cifra gzip es la que se parece al tamaño que viaja por la red.
- 06
Copiar, descargar o subir
Pega desde el portapapeles o abre un archivo .html de hasta 2 MB del disco; luego copia el resultado o guárdalo: page.html vuelve como page.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 un nivel. Estándar es la opción del día a día; baja a Seguro cuando un diseño dependa del espaciado exacto, o sube a Máximo cuando quieras hasta el último byte.
- 03
Mantén “Minificar CSS” y “Minificar JS” activados para comprimir también el código embebido, conserva comentarios solo cuando haga falta y lee lo que la herramienta liste como omitido.
- 04
Revisa el desglose junto a la salida, luego 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 dar por buena.
- 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.
- Al motor de CSS se le indica que nunca siga un @import. Una hoja de estilos referenciada por URL se queda como referencia y ninguna petición sale de tu navegador.
- Cada bloque
<style>se revisa antes de que el motor lo vea, así que el CSS anidado y las declaraciones ilegibles se informan y se conservan en vez de desaparecer sin más. - El tamaño gzip se mide con la compresión integrada del navegador, así que refleja lo que enviaría un servidor real.
- 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. Y también es donde un minificador puede fallar, porque son dos lenguajes más que tiene que analizar antes de poder acortar nada. -
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.
- Lee la lista de omitidos antes de publicar. Lo que aparece ahí es byte a byte lo que pegaste, lo cual es seguro, pero también significa que esos bytes nunca se comprimieron.
- 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.
- Quédate en Estándar salvo que tengas un motivo para moverte. Seguro es el nivel a elegir cuando un diseño depende del espacio entre elementos en línea; Máximo merece una comprobación contra tus hojas de estilo, porque quitar
type="text"deja sin efecto un selector input[type="text"].
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, y nunca sigue un @import.
- 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.
- Los nombres de atributo salen en minúsculas, lo cual es correcto en HTML pero no en una plantilla de framework: el *ngIf de Angular se convierte en *ngif. Handlebars, Jinja y ERB tampoco son HTML por sí solos, así que minifica la salida renderizada en lugar del código de la plantilla.
- El marcado que el parser no puede leer en absoluto, como una etiqueta o un comentario sin cerrar, detiene la pasada y se informa. El código embebido que no puede leer no detiene nada: se lista como omitido y se deja pasar intacto, así que el documento que recibes siempre es válido.
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. Si un diseño depende del espaciado y prefieres no darle vueltas, el nivel Seguro reduce cada secuencia de espacios a uno solo y nunca elimina ninguno.
¿Qué nivel debería usar?
Estándar para casi todo: elimina los espacios entre etiquetas y los atributos que HTML5 ya da por supuestos, que es lo que hace un paso de compilación normal. Seguro es la opción prudente cuando el espaciado importa y prefieres no pensarlo. Máximo exprime el último porcentaje eliminando atributos vacíos o con valor por defecto y ordenando atributos y clases, así que conviene comprobar que nada seleccione por lo que ha quitado.
¿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. Los atributos style en línea y los manejadores de eventos pasan por los mismos motores. En una página real, el código embebido suele ser gran parte del peso, por eso mucho ahorro viene de ahí.
¿Qué significa “Omitido, sin minificar”?
Significa que un fragmento de código embebido se dejó sin minificar, con cada regla o instrucción intacta, y explica por qué. El motor de CSS no sabe leer reglas anidadas y las borra, y una declaración a la que le falta el dos puntos hace que pierda la regla siguiente, así que cualquier bloque <style> con alguno de esos problemas se conserva en vez de minificarse. Un script que el motor de JavaScript no puede analizar, incluido cualquiera que use await de nivel superior, se trata igual. No se pierde nada; simplemente esos bytes no se comprimen.
¿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.
¿Descargará las hojas de estilo que importa mi página?
No. El motor de CSS es capaz de seguir un @import y traerse su contenido, y aquí se le indica explícitamente que no lo haga. Un @import se queda en la salida tal como lo escribiste y no se hace ninguna petición por él, así que pegar una página interna nunca envía nada a la red.
¿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, y los nombres de atributo salen en minúsculas, así que una directiva como *ngIf vuelve como *ngif. 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.