Minificador HTML
Reduce el tamaño de archivos HTML eliminando comentarios, espacios en blanco redundantes y saltos de línea. También incluye modo de formateo para hacer legible un HTML comprimido. Sin dependencias externas.
Algoritmo de minificación y formateo basado en tokens
La función minifyHTML() aplica regex en cadena: elimina comentarios <!-- ... -->, colapsa espacios múltiples en uno, elimina espacios entre etiquetas (>\s+< → ><), limpia espacios antes de > y después de <. La función formatHTML() usa un enfoque basado en tokens: divide el HTML en etiquetas y texto con match(/<[^>]+>|[^<]+/g), y para cada token decide si aumentar o disminuir la indentación según si es etiqueta de cierre (</), de apertura o texto. Las etiquetas auto-cerrantes (area, base, br, col, img, input…) no incrementan el nivel de indentación.
HTML y rendimiento web en el contexto de LATAM
En América Latina, la optimización del HTML es especialmente relevante para sitios de alto tráfico: tiendas en Mercado Shops, landing pages de campañas en Meta Ads y Google Ads, y blogs de WordPress con mucho contenido. El HTML minificado reduce el tiempo de parsing del navegador y el peso de la respuesta HTTP, mejorando las métricas de Core Web Vitals que Google usa para el ranking. Para templates de email en HTML (Mailchimp, SendGrid, Amazon SES) que se envían a miles de suscriptores en la región, el modo formatear ayuda a leer y editar plantillas que los ESPs devuelven minificadas, mientras el modo minificar reduce el peso final del email antes del envío, importante porque algunos clientes de correo tienen límites de tamaño.
Otras herramientas
Preguntas frecuentes
- ¿Qué hace el minificador HTML?
- Elimina comentarios HTML, colapsa múltiples espacios en blanco en uno solo, y elimina espacios innecesarios entre etiquetas. El resultado es HTML funcionalmente idéntico pero con menor peso.
- ¿Cuánto se puede reducir el tamaño de un HTML?
- Depende del código fuente. HTML con mucha indentación y comentarios puede reducirse un 20-40%. El mayor beneficio es en archivos con mucho espaciado o generados automáticamente.
- ¿El HTML minificado es funcionalmente idéntico?
- Sí para HTML normal. Sin embargo, la minificación puede afectar el espaciado de elementos inline como span o a cuando hay espacios significativos entre ellos. Verifica el resultado en un navegador.
- ¿Para qué sirve el modo formatear?
- El formateo (beautify) sirve para el proceso contrario: tomar HTML minificado o con formato incorrecto y hacerlo legible con indentación y saltos de línea. Es útil para revisar HTML comprimido.
- ¿Es seguro pegar código HTML confidencial?
- Sí. Todo el procesamiento ocurre en tu navegador con JavaScript nativo. El código HTML que pegas nunca se envía a ningún servidor.
- ¿Cuándo es más útil el modo "formatear" HTML?
- El modo formatear es especialmente útil cuando: recibes HTML minificado de terceros (templates de email de Mailchimp, código de widgets embebidos, snippets de analytics) y necesitas leerlo para modificarlo; quieres depurar el HTML generado por un CMS o framework que produce salida comprimida; o copias HTML desde la pestaña Elements de DevTools, que muestra el DOM actual pero sin indentación consistente. También es útil para formatear templates de Shopify Liquid o plantillas de correo de HubSpot antes de editarlos.
- ¿Cómo afecta el HTML minificado al rendimiento y SEO de sitios en LATAM?
- El HTML minificado reduce el TTFB (Time to First Byte) y el tiempo de parsing del DOM, lo que mejora el LCP y el FID en los Core Web Vitals de Google. Para sitios de e-commerce en WooCommerce, Shopify o VTEX que sirven páginas de 100-200 KB de HTML, minificar puede ahorrar 20-40 KB por página. En conexiones 3G comunes en zonas rurales de México, Colombia y Perú, ese ahorro es perceptible. Servidores con cPanel o Nginx en hosting compartido de la región (Hostinger, GoDaddy LATAM) a menudo no habilitan compresión Gzip automáticamente para todo el contenido, por lo que el tamaño del HTML sin comprimir impacta directamente en la velocidad de carga.