CodeKitHub¿Qué es esta herramienta?
Un minificador de HTML elimina todo lo que un navegador no necesita para renderizar la página correctamente: comentarios, espacios extra entre etiquetas, atributos redundantes como type="text/javascript" y las barras de cierre opcionales. El resultado es un HTML funcionalmente idéntico que se descarga y analiza más rápido.
Esta herramienta está construida sobre html-minifier-terser, el mismo minificador usado dentro de herramientas de compilación populares, así que entiende la estructura del HTML en lugar de eliminar espacios a ciegas: no toca contenido sensible al formato dentro de <pre>, <textarea> o bloques <script>/<style> en línea, y también puede minificar el CSS y JS incrustados en tu marcado.
¿Por qué utilizarlo?
- Analizador real, no expresiones regulares — seguro con casos límite como bloques <pre>, scripts en línea y comentarios condicionales.
- También minifica el contenido de <style> y <script> incrustados, no solo el marcado alrededor.
- Muestra exactamente cuántos bytes ahorraste antes de publicar el archivo.
- El modo Formatear convierte HTML comprimido en una sola línea en algo legible y editable de nuevo.
- Procesamiento 100% local — tu marcado, y cualquier dato privado en él, nunca sale de tu navegador.
Cómo utilizarlo
- Pega tu HTML en el cuadro de entrada, o haz clic en "Cargar ejemplo" para probar una muestra.
- Haz clic en "Minificar" para comprimirlo, o en "Formatear" para embellecerlo con sangría de 2 espacios.
- Revisa el mensaje bajo los cuadros — el modo minificar muestra la reducción de tamaño; si el HTML no se puede analizar, verás el error exacto en lugar de un resultado roto.
- Haz clic en "Copiar" para obtener el resultado.
Ejemplo
Entrada
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<!-- greeting -->
<p class="greeting">
Hello, world!
</p>
</body>
</html>Resultado
<!doctype html><html><head><title>Example</title></head><body><p class="greeting">Hello, world!</p></body></html>Se eliminan comentarios, sangría y saltos de línea; el doctype se acorta. La página visible se renderiza de forma idéntica.
Consejos prácticos
- Minifica justo antes de desplegar, no durante el desarrollo — mantén el HTML legible en el control de versiones y minifica solo el resultado de la compilación.
- Si una página se comporta de forma extraña tras minificarla, revisa si hay JavaScript que dependa de espacios exactos dentro de nodos de texto (poco frecuente, pero ocurre con algunos widgets antiguos).
- Formatear el HTML minificado de un sitio en vivo es una forma rápida de inspeccionar su estructura antes de escribir un scraper o depurar problemas de diseño.
- Combínalo con los minificadores de CSS y JS de abajo si tu proceso de compilación mantiene estilos y scripts en archivos separados.
Dónde encaja en flujos de trabajo reales
Los sitios estáticos, plantillas de correo y landing pages hechas a mano suelen publicarse con la misma sangría y comentarios usados durante el desarrollo. Minificar antes de desplegar recorta un peso de transferencia real, aunque modesto — y en el caso del HTML de correos, el número de caracteres a veces afecta el umbral de recorte de Gmail, así que un marcado más pequeño tiene un beneficio funcional más allá de la velocidad.
El modo Formatear es igual de útil a la inversa: pegar una página minificada desde "ver código fuente" y darle formato suele ser la forma más rápida de entender la estructura de la landing page de un competidor o depurar un embed de terceros.
Casos de uso comunes
- Recortar bytes de una landing page estática o plantilla de correo antes de publicarla.
- Reformatear un fragmento de HTML minificado obtenido de "ver código fuente" para entender su estructura.
- Limpiar HTML pegado desde un editor WYSIWYG o exportación de un CMS, que suele traer espacios en exceso.
- Comprobar rápidamente si un fragmento de HTML escrito a mano está bien formado, ya que un fallo de análisis aparece como un error claro.
Preguntas frecuentes
¿Se sube mi HTML a algún sitio?
No. Tanto la minificación como el formateo ocurren localmente en tu navegador con JavaScript. Nada de lo que pegues se envía a un servidor, así que es seguro usarlo con plantillas internas o páginas aún no publicadas.
¿Minificar puede romper mi página?
No debería — la herramienta usa un analizador HTML real (html-minifier-terser) que entiende la estructura de las etiquetas, así que preserva elementos sensibles al espacio como <pre> y <textarea> y no combina atributos de forma incorrecta. Siempre revisa las páginas críticas después de minificar, especialmente si dependen de scripts en línea poco habituales.
¿También minifica el CSS y JavaScript dentro del HTML?
Sí. Los bloques <style> y <script> en línea se minifican en su lugar usando los mismos motores que las herramientas dedicadas de CSS y JS, así que no tienes que extraerlos manualmente.
¿Cuánto suele reducirse el tamaño del HTML?
Depende de cuántos espacios, comentarios y formato tenía el original — el HTML escrito a mano con mucha sangría y comentarios suele reducirse entre 20-40%. El HTML generado por frameworks, que ya suele ser compacto, ahorrará menos.
¿Puedo convertir HTML minificado de vuelta a un formato legible?
Sí — pega el HTML minificado y haz clic en "Formatear" en lugar de "Minificar" para recuperar un marcado con sangría correcta y legible.