KeroTools

Minificar HTML en un Clic

Colapsa espacios y elimina comentarios de tu HTML para reducir su tamaño al instante.

Entrada
0 caracteres
Salida

Tu marcado se queda en tu equipo

Nada que borrar después

Seguro para textos no publicados

Funciona en todo navegador moderno

Cómo funciona

  1. 1

    Pega tu HTML

    Un documento completo, una plantilla de correo o un fragmento que un servidor inserta en una página.

  2. 2

    Lee el informe

    Compara el tamaño minificado con el comprimido y revisa los avisos antes de reemplazar el original.

  3. 3

    Copia la salida

    Llévala a una salida de compilación, un archivo de plantilla o un documento incrustado.

Por qué usar esta herramienta

Espacio significativo conservado

El espacio entre elementos en línea es un hueco de palabra que se renderiza, así que se conserva en vez de colapsarse.

pre y textarea intactos

Ambos preservan el espacio por especificación, y reformatear su contenido cambia lo que lee el visitante.

Etiquetas de cierre en su sitio

Quitar las opcionales se apoya en la recuperación de errores del analizador, y aquí no se apuesta a eso.

script y style bien tratados

Los bloques incrustados son otros lenguajes, y un texto con una secuencia de cierre de script no se lee como marcado.

Honesto sobre la ganancia

El documento suele ser el más pequeño de tus tres archivos, y las cifras mostradas lo dicen.

Nada sale del navegador

El marcado se procesa en esta página, así que borradores y URLs de preproducción no se entregan a un servidor.

El espacio en HTML a veces significa algo, y ahí está toda la dificultad

En CSS y JavaScript el espacio fuera de una cadena no tiene significado y puede quitarse en bloque. HTML no funciona así. Una racha de espacios entre dos elementos en línea colapsa a un solo espacio, no a nada, y ese espacio superviviente es un hueco de palabra que se renderiza: quita el salto de línea entre `<span>Total</span>` y `<span>Precio</span>` y las dos palabras se pegan en pantalla. Lo mismo pasa entre un enlace y el texto que le sigue, entre elementos `<a>` contiguos de una navegación y alrededor de `<img>` y `<button>`. Por eso una página minificada puede leerse de pronto como «SalirAjustes», y por eso la regla segura es colapsar el espacio solo entre elementos de bloque, donde el navegador nunca estuvo renderizando un hueco. Decidir en qué caso estás exige conocer el valor display de cada elemento, que depende de tu CSS, así que una herramienta que solo ve el marcado tiene que ser conservadora, y esta lo es.

pre y textarea preservan el espacio por especificación

Dos elementos convierten el espacio en portante en el sentido más fuerte. Dentro de `<pre>`, cada espacio y cada salto se renderiza tal cual se escribió, y por eso los ejemplos de código y la maquetación en ASCII sobreviven ahí y en ningún otro sitio; reindentar un bloque `<pre>` cambia el código que ve tu lector, y colapsarlo destruye el ejemplo entero. `<textarea>` se comporta igual con su valor inicial, así que el espacio del texto por defecto de un formulario es contenido, no formato, y además el analizador elimina un salto de línea inmediatamente posterior a la etiqueta de apertura, de modo que una herramienta que añade o quita uno cambia en silencio lo que el usuario encuentra en el campo. El contenido de `<script>` y `<style>` también queda fuera de las reglas de espacio a nivel de marcado, por otra razón que se explica más abajo. Cualquier minificador que trate el documento como un flujo uniforme de etiquetas y texto acabará destrozando alguno de estos.

HTML es indulgente, y eso hace la minificación agresiva más arriesgada, no más segura

HTML no tiene errores de análisis en el sentido en que los tienen CSS y JavaScript. Omite `</p>`, omite `</li>`, omite `</tbody>`, quita las comillas de un atributo, y un navegador se recuperará y construirá un árbol igualmente: la especificación define exactamente cómo. Los minificadores lo aprovechan; quitar etiquetas de cierre opcionales es un ahorro real de bytes y la especificación dice que es legal. El truco está en que la recuperación solo se garantiza idéntica para marcado que ya era válido. En un documento donde una etiqueta ya está desbalanceada, o donde un `<div>` vive dentro de un `<p>`, quitar etiquetas opcionales desplaza el punto en que el analizador decide que un elemento terminó, y el árbol resultante es otro árbol, que suele verse como contenido que salta fuera de la caja a la que pertenecía. Además es marcado que leen otras cosas: un fragmento con cierres implícitos puede romper un motor de plantillas posterior, un cliente de correo o un rastreador que use un analizador XML más estricto. Esta herramienta deja las etiquetas de cierre en paz, porque el ahorro es pequeño y el fallo es estructural.

script y style incrustados son lenguajes distintos dentro del mismo archivo

Un bloque `<script>` o `<style>` no es marcado, y el analizador cambia de modo al entrar en él. Eso tiene una consecuencia concreta que pilla a las herramientas ingenuas: dentro de un script clásico, el analizador busca los caracteres literales `</script` y termina el elemento ahí, aunque estén dentro de una cadena de JavaScript. Un código que escribe `document.write("</script>")` termina por tanto su propio bloque, y el arreglo estándar es partir la secuencia como `"<\/script>"`. Un minificador que reescribe las comillas de cadena o reescapa el texto sin entender esto puede crear la secuencia donde no existía, y la página se trunca a partir de ese punto. El caso espejo es un minificador que trata el contenido del script como texto y colapsa el espacio dentro, algo inofensivo hasta que se topa con una plantilla de cadena o una línea sin terminar donde el salto hacía el trabajo del punto y coma. Tratar bien estos bloques significa pasarles un análisis real de JavaScript y CSS, no uno de marcado.

El HTML es el archivo donde la minificación compra menos

Conviene decirlo claro, porque cambia dónde vale la pena poner esfuerzo. De los tres archivos de texto que carga una página, el documento suele ser el más pequeño, y es el que normalmente no puedes cachear: una hoja de estilos y un paquete llevan huella y se guardan un año, mientras el HTML se pide fresco en casi cada visita. Eso suena a argumento para encogerlo, y en parte lo es, pero las cifras son modestas: el marcado se comprime extremadamente bien porque repite los mismos nombres de etiqueta y los mismos patrones de atributo cientos de veces, así que gzip o Brotli en el servidor ya quitan casi todo lo que quitaría un minificador. Las ganancias reales en un documento son estructurales: menos bloques de datos incrustados, ninguna imagen base64 gigante pegada en el código, ningún estado renderizado en servidor volcado en una etiqueta script. Si tu HTML es de verdad grande, minificarlo no es el arreglo; averiguar qué lleva dentro normalmente sí.

Lo que revela el marcado de una página, y por qué eso pide procesar en local

El marcado es el más silenciosamente revelador de los tres archivos. Lleva el texto mismo, incluidos titulares y nombres de producto de un lanzamiento que aún no ha ocurrido, y los comentarios en HTML son donde los equipos dejan las notas más francas: un número de tique, un nombre de host de preproducción, un recordatorio de que una sección está oculta hasta que legal la apruebe, el nombre de la agencia que escribió la plantilla. Lleva campos de formulario ocultos, identificadores de analítica, a veces un token CSRF y a menudo una dirección de correo que no está publicada en ningún otro sitio. Pegar una página real en un minificador alojado entrega todo eso a un tercero a cambio de la reducción de bytes que ya te han dicho que es la menor de las tres. Aquí todo ocurre en la página que estás leyendo: abre las herramientas de desarrollo de tu navegador antes de pegar y verás que el número de peticiones se queda donde estaba.

Errores comunes que conviene evitar

  • Colapsar el espacio entre elementos en línea. Ese espacio es un hueco de palabra que se renderiza, así que quitarlo pega dos palabras en pantalla aunque el marcado siga pareciendo correcto.
  • Reformatear el contenido de `pre` o `textarea`. Ambos preservan el espacio por especificación, así que reindentar cambia el ejemplo de código o el texto por defecto del formulario.
  • Quitar etiquetas de cierre opcionales para ahorrar bytes. La recuperación solo se garantiza idéntica en marcado ya válido, y en cualquier cosa desbalanceada el analizador termina los elementos en otro sitio.
  • Dejar que una pasada a nivel de marcado toque el contenido de `script`. El literal `</script` termina el elemento incluso dentro de una cadena de JavaScript, así que reescapar puede truncar la página.
  • Esperar que la minificación arregle un documento grande. El marcado se comprime muy bien, así que el servidor ya se llevó casi todo; la causa real suele ser un bloque de datos incrustado.

Comparativa

AspectoEsta herramientaMinificadores onlineUna tubería de compilación
Marcado enviado a un servidorNuncaNormalmente síNo
Mantiene los huecos en líneaSiempreVaríaConfigurable
Deja en paz pre y textareaVaríaNormalmente
Quita etiquetas de cierre opcionalesNoA menudoConfigurable
Tamaño comprimido mostradoRara vezCon un complemento
PrecioGratisGratis / planes de pagoGratis

Características

Eliminación de comentarios

Se van las notas de desarrollo y las marcas de sección, y se quedan los comentarios condicionales que aún hacen algo.

Colapso seguro de espacios

Las rachas de espacio se reducen solo entre elementos de bloque, donde nunca se renderizó ningún hueco.

Limpieza de atributos

Se descartan atributos type redundantes y valores vacíos allí donde la especificación de HTML los hace el valor por defecto.

Manejo de comillas visible

Las comillas de atributo solo se quitan cuando el valor no puede necesitarlas, y nunca en el último atributo.

Ambos tamaños informados

Bruto y gzip, porque la compresión del servidor ya se lleva casi todo lo que la minificación quita del marcado.

Documentos grandes admitidos

Una página renderizada de cualquier tamaño se minifica sin subida ni tope.

Nada que instalar

Sin herramienta de compilación, sin entorno de ejecución, sin dependencias: funciona en la página web.

Listo para árabe y RTL

Interfaz completa en ocho idiomas, incluido el árabe de derecha a izquierda.

Seguro por defecto

Servido por HTTPS, sin rastreo de contenido ni subida a terceros.

Quién la usa

Desarrolladores front-end

Reducir una plantilla que no pasa por un paso de compilación.

Desarrolladores de email

Meter una plantilla bajo el límite de tamaño de un cliente sin romper su maquetación en tablas.

Desarrolladores de backend

Ordenar un fragmento renderizado en servidor antes de devolverlo a la página.

Quien incrusta un documento

Compactar marcado que debe embeberse en un sitio con un tope de tamaño duro.

Preguntas Frecuentes

No. Todo se ejecuta localmente en tu navegador — tu texto nunca se sube, guarda ni comparte.

Sí — totalmente gratis, sin cuenta y sin límites.