Minificar HTML _

Cómo funciona la minificación de HTML

El minificador recorre tu entrada con una pequeña máquina de estados que distingue regiones de preservación (<pre>, <textarea>, <script>, <style>) de regiones editables donde el espacio en blanco y los comentarios se pueden colapsar de forma segura.

1. Tokenizar bloques de preservación. El escáner lee el carácter de entrada uno por uno y cambia a un estado de preservación cuando encuentra una etiqueta de apertura <pre>, <textarea>, <script> o <style>. Todo lo que hay dentro de esas etiquetas se conserva byte a byte hasta el cierre correspondiente.
2. Colapsar espacios en blanco editables. En las regiones editables, el escáner colapsa cada secuencia de espacios, tabulaciones y saltos de línea a un único espacio y luego recorta los espacios en blanco iniciales y finales alrededor de los límites de las etiquetas. El texto visible se redistribuye de la misma manera que lo renderiza el navegador.
3. Eliminar comentarios. Los bloques <!-- ... --> se eliminan cuando el interruptor está activado. Los comentarios condicionales de IE (<!--[if IE]> ... <![endif]-->) sobreviven cuando el interruptor de preservación condicional está activado, porque los clientes de correo heredados todavía dependen de ellos.
4. Colapsar atributos booleanos. Las formas verbosas como checked="checked", disabled="disabled" y required="required" se reducen al nombre de atributo simple. La especificación HTML5 trata la forma simple como semánticamente idéntica, por lo que el DOM renderizado no cambia.
5. Informar deltas de bytes. Tanto el texto original como el minificado se miden con new TextEncoder().encode(...).byteLength, el mismo recuento de bytes UTF-8 que un CDN o servidor HTTP ve en la red. La tira de métricas muestra el tamaño original, el tamaño minificado, los bytes ahorrados y el porcentaje ahorrado.

Por qué minificar HTML

• Carga de páginas más rápida. El HTML más pequeño llega al navegador antes y el analizador termina antes. En redes móviles, los bytes ahorrados se traducen directamente en un First Contentful Paint más rápido y una mejor puntuación de rendimiento en Lighthouse.
• Menores facturas de egress de CDN. CloudFront, Cloudflare y Fastly cobran por gigabyte de egress. Una reducción del 20 por ciento en HTML a través de millones de vistas mensuales se acumula en ahorros reales en la factura, antes de que aterrice cualquier optimización de imágenes o scripts.
• Diffs de pull request más limpios. El HTML estático precompilado confirmado en un repositorio se vuelve ruidoso cuando cada ajuste de plantilla redistribuye la sangría. El HTML minificado en la carpeta dist produce diffs de PR más ajustados que se centran en cambios de contenido reales en lugar de cambios de espacios en blanco.
• Incrustaciones y fragmentos más pequeños. Las plantillas de correo electrónico, los fragmentos de widgets de terceros y el HTML almacenado dentro de configuraciones JSON o YAML se benefician del mismo recorte de bytes. Las incrustaciones minificadas mantienen los correos transaccionales por debajo de los límites de tamaño de los ESP y reducen los paquetes de widgets.

Aplicaciones comunes

La minificación de HTML aparece al final de casi todos los pipelines de compilación de sitios estáticos o JAMstack, además de algunos contextos de tiempo de ejecución donde los bytes importan más que la legibilidad del código fuente.

• Pasos de compilación de sitios estáticos: Eleventy, Hugo, Astro y Next.js ejecutan el HTML a través de un minificador antes de escribir en la carpeta dist para que el paquete desplegado sea más pequeño que el código fuente.
• Correos electrónicos transaccionales: los ESP (SendGrid, Postmark, Mailgun) limitan el tamaño del cuerpo HTML y la expansión de CSS en línea aumenta ese recuento rápidamente. Minificar el cuerpo antes de enviarlo mantiene el mensaje por debajo del límite.
• Widgets incrustados: los widgets de terceros y los fragmentos de chat enviados como HTML en línea se benefician de cada byte recortado porque la página host tiene que descargarlos en cada visita.

Un ejemplo práctico

Pega un fragmento de formulario verboso de 500 bytes con sangría de dos espacios, tres saltos de línea entre filas, un bloque de comentarios HTML al principio y un <input type="checkbox" checked="checked" />. Con todas las opciones activadas, la salida se colapsa a unos 300 bytes — aproximadamente un ahorro del 40 por ciento — mientras que el árbol DOM renderizado permanece igual que el original.

¿La minificación romperá mi HTML?

No, cuando se usa con los interruptores predeterminados. El minificador preserva el contenido de las etiquetas <pre>, <textarea>, <script> y <style> literalmente, deja los comentarios condicionales de IE intactos cuando ese interruptor está activado y solo colapsa los espacios en blanco que el analizador HTML5 ya clasifica como insignificantes. El árbol DOM renderizado es igual que el original. Los interruptores agresivos (remove-empty-attributes) pueden cambiar el comportamiento de los fragmentos que usan intencionalmente value="" o alt="", así que revisa la salida si los activas.

¿Minifica el CSS y JS en línea?

No en esta herramienta. Los cuerpos de <style> y <script> en línea se preservan literalmente para que el minificador nunca rompa una regla CSS o una instrucción JS al colapsar los espacios en blanco dentro de un literal de cadena o una expresión regular. Para la minificación específica de CSS usa un Minificador CSS; para JS usa un Minificador JS. El Minificador HTML se centra en el propio marcado.

¿Cuánto puedo ahorrar?

Los ahorros típicos en HTML escrito a mano van del 10 al 30 por ciento, dependiendo de cuánta sangría, líneas en blanco y formas de atributo verbosas usa el código fuente. El HTML estático precompilado de frameworks como Next.js a menudo ahorra entre el 15 y el 25 por ciento porque el framework ya hace cierta optimización pero deja los espacios en blanco legibles por humanos. Las plantillas con muchos comentarios y el HTML de estilo correo electrónico con anidamiento profundo pueden alcanzar el 40 por ciento o más.

¿Se preserva el contenido de pre?

Sí. El minificador tokeniza explícitamente los bloques <pre>, <textarea>, <script> y <style> como regiones de preservación y copia su contenido byte a byte a la salida. Los espacios en blanco, los saltos de línea y la sangría dentro de esas etiquetas sobreviven intactos, por lo que los ejemplos de código y el arte ASCII se renderizan exactamente igual después de la minificación.

La minificación de HTML en el navegador mantiene tu pipeline de compilación simple y tu marcado pequeño. Pega cualquier HTML arriba, ajusta los interruptores de opciones y copia o descarga la salida minificada — sin carga, sin cuenta, sin biblioteca de vendor.