Minificador de CSS, JavaScript y HTML: código más pequeño y rápido

¿Qué es un minificador de código?

Un minificador de código hace más pequeños los archivos CSS, JavaScript y HTML sin cambiar lo que hacen. El código escrito para personas está lleno de cosas que los navegadores no necesitan: comentarios que explican decisiones, sangrías, líneas en blanco, nombres de variables largos y descriptivos y puntos y coma opcionales. Cada uno de esos caracteres debe ser descargado por cada visitante. La minificación los elimina, de modo que las páginas se descargan y se analizan más rápido, lo que ayuda a los visitantes con datos móviles lentos, mejora las Core Web Vitals y puede favorecer un mejor posicionamiento en los buscadores.

Esta herramienta gratuita minifica los tres lenguajes web en un solo lugar. CSS y HTML se minifican al instante con nuestros propios minificadores cuidadosos, que protegen las cadenas, los valores url(), las expresiones calc() y los elementos sensibles al espacio en blanco. JavaScript lo minifica Terser, el mismo motor que usan las herramientas de compilación populares, con acortamiento opcional de nombres de variables. Ves el tamaño original, el tamaño minificado y el porcentaje ahorrado, y puedes descargar el resultado, todo sin subir tu código a ninguna parte.

Características principales

• Tres lenguajes: CSS, JavaScript y HTML.
• Terser para JavaScript: compresión, eliminación de código muerto y acortamiento de nombres opcional.
• Minificación segura de CSS: las cadenas, los valores url() sin comillas y calc() nunca se rompen.
• Minificación conservadora de HTML: el contenido de pre, textarea, script y style no se toca.
• Comentarios de licencia conservados: los avisos /*! … */ se conservan por defecto.
• CSS en línea: minifica opcionalmente los bloques <style> dentro del HTML.
• Informe de ahorro en bytes y porcentaje.
• Abre, copia y descarga archivos .min.

Cómo minificar código, paso a paso

1. Elige la pestaña del lenguaje.
2. Pega tu código o haz clic en Abrir archivo. Hay un ejemplo cargado para que veas cómo funciona.
3. Define las opciones: conservar los comentarios de licencia, acortar nombres (JS), minificar estilos en línea (HTML).
4. Presiona Minificar (CSS y HTML también se actualizan automáticamente mientras escribes).
5. Revisa el ahorro y el mensaje por si hay errores.
6. Copia o descarga el archivo minificado.

Ejemplo resuelto

La hoja de estilos de ejemplo de esta página pesa 333 bytes con un comentario de licencia, un comentario normal, sangrías y espacios alrededor de los dos puntos y las llaves. Minificada, pasa a 248 bytes, un 25.5% más pequeña:

/*! Theme v1 | MIT */ .card{margin:0 auto;padding:16px 24px;width:calc(100% - 2rem);background:url("img/bg one.png") no-repeat}.card>h2,.card .title:hover{color:#1B98E0;font-family:"Open Sans",sans-serif}@media (max-width:600px){.card{padding:8px}}

Fíjate en lo que se conservó: el comentario de licencia, los espacios dentro de calc(), el espacio dentro del nombre de archivo entre comillas, el espacio en «.card .title» (que significa «un .title dentro de .card») y el espacio tras «@media». El HTML de ejemplo se reduce un 28% aproximadamente mientras el bloque <pre> conserva su espaciado exacto.

Cómo funciona aquí la minificación de CSS

• Los comentarios se eliminan, salvo los comentarios de licencia /*! si los conservas.
• Las cadenas entre comillas y los valores url() sin comillas se copian exactamente.
• Las series de espacios en blanco se colapsan, y se quitan los espacios alrededor de { } ; , y >.
• Los espacios antes de los dos puntos se quitan dentro de las declaraciones pero se conservan en los selectores, porque «a :hover» y «a:hover» significan cosas distintas.
• Se quita el último punto y coma antes de una llave de cierre.
• Los espacios junto a + y - nunca se tocan, así que calc(), los selectores de hermanos y los valores negativos siguen siendo válidos.

El minificador no reescribe colores, no acorta ceros ni fusiona reglas: optimizaciones que ahorran un poco más pero conllevan más riesgo. Para una optimización agresiva en una cadena de compilación, herramientas como cssnano o Lightning CSS van más lejos.

Minificación de JavaScript con Terser

Terser analiza tu JavaScript en un árbol sintáctico, aplica transformaciones seguras (eliminar código muerto, plegar constantes, acortar expresiones) y lo imprime de nuevo sin espacios en blanco innecesarios. Con mangle activado, los nombres de variables y funciones locales como monthlyRate pasan a ser letras sueltas. Los nombres globales y las propiedades de objetos se dejan como están, porque cambiarlos podría romper código en otro lugar. La función de EMI de ejemplo pasa a ser una sola línea corta que calcula exactamente el mismo resultado. Si tu código tiene un error de sintaxis, Terser indica la línea y la columna para que puedas corregirlo.

Minificación de HTML sin sorpresas

El espacio en blanco de HTML a veces tiene significado: dos enlaces separados por un espacio se ven distintos de dos enlaces pegados, y todo lo que hay dentro de <pre> o <textarea> se muestra exactamente. Por eso este minificador quita los comentarios (pero conserva los antiguos comentarios condicionales de Internet Explorer), colapsa las series de espacios en blanco en espacios simples, quita el espacio entre etiquetas de bloque y restaura un solo espacio entre elementos en línea comunes. Los scripts y estilos están protegidos; los bloques <style> en línea pueden minificarse opcionalmente con el minificador de CSS.

Minificación, compresión y velocidad de página

La minificación y la compresión del servidor (gzip o Brotli) se complementan. Una hoja de estilos típica puede reducirse un 25% con la minificación y luego otro 70–80% durante la transferencia comprimida. Junto con el almacenamiento en caché, la optimización de imágenes (prueba nuestro compresor de imágenes) y menos recursos que bloquean el renderizado, los recursos minificados ayudan a las páginas a lograr buenas puntuaciones de Largest Contentful Paint. Herramientas como Google PageSpeed Insights señalan el CSS y JavaScript sin minificar como una oportunidad: este minificador es una forma rápida de resolverlo en sitios pequeños sin sistema de compilación.

Un flujo de trabajo sencillo para sitios web pequeños

1. Mantén tus archivos editables como style.css y script.js en una carpeta de origen.
2. Cuando estés listo para publicar, minifica cada uno aquí y guárdalos como style.min.css y script.min.js.
3. Haz referencia a los archivos .min en tu HTML, añadiendo un número de versión como ?v=20261018 para que los navegadores obtengan la copia nueva.
4. Sube los archivos minificados y prueba la página en vivo en computadora y móvil.
5. La próxima vez que cambies algo, edita el archivo fuente y repite: nunca edites directamente el archivo .min.

Cuando un proyecto crece más allá de un puñado de archivos, automatiza estos pasos con una herramienta de compilación como Vite, esbuild o webpack, que ejecutan Terser y minificadores de CSS por ti en cada compilación.

Depurar código minificado

El código minificado es difícil de leer, así que los errores en producción suelen apuntar a «línea 1, columna 4,312». Las herramientas de compilación lo resuelven con mapas de código fuente, archivos que asignan las posiciones minificadas a tu código original; las herramientas para desarrolladores de los navegadores los cargan automáticamente. Este minificador en línea no produce mapas de código fuente, otra razón para conservar tus archivos originales: si algo se rompe, reproduce primero el problema con la versión sin minificar, corrígelo allí y luego vuelve a minificar.

Usos habituales

• Minificar hojas de estilo y scripts de sitios web estáticos pequeños.
• Reducir el código antes de subirlo a un alojamiento compartido como Hostinger.
• Reducir el tamaño de plantillas de correo HTML, donde algunos clientes recortan los mensajes muy grandes.
• Preparar fragmentos para widgets, bookmarklets e incrustaciones.
• Comprobar cuánto ahorraría un paso de compilación.
• Resolver los avisos «minify CSS / JavaScript» de PageSpeed.
• Recortar scripts y estilos en línea en páginas de destino hechas a mano.

Errores comunes que debes evitar

• Sobrescribir el original: conserva archivos fuente legibles y guarda copias minificadas por separado.
• Olvidar actualizar los enlaces: haz que tus páginas apunten a style.min.css y script.min.js.
• Acortar código que usa nombres en tiempo de ejecución (por ejemplo function.name o la inyección de dependencias de algunos frameworks).
• No subir las versiones de caché: los navegadores pueden conservar el archivo antiguo; añade una consulta de versión como ?v=2.
• Omitir las pruebas tras la minificación.

Solución de problemas

• Error de JavaScript con línea y columna: corrige el error de sintaxis en tu código fuente y luego vuelve a minificar.
• «No se pudo cargar el minificador de JavaScript»: la primera minificación de JS necesita internet para obtener Terser.
• El diseño se ve distinto tras minificar el HTML: un espacio entre elementos en línea puede importar; añade &nbsp; o ajusta el código fuente.
• Ahorro muy pequeño: el código probablemente ya era compacto o estaba minificado.
• Falta el comentario de licencia: asegúrate de que «Conservar los comentarios /*! licencia */» esté marcado y de que el comentario empiece con /*!.
• La salida está vacía: pega primero algo de código; el mensaje explica cualquier problema encontrado.

Glosario rápido

• Minificación: quitar caracteres que no hacen falta para la ejecución.
• Acortamiento de nombres (mangling): renombrar variables locales con nombres más cortos.
• Código muerto: código que nunca puede ejecutarse y se puede quitar sin riesgo.
• Mapa de código fuente: un archivo que asigna el código minificado al original para depurar.
• gzip / Brotli: compresión del lado del servidor aplicada durante la transferencia.
• Recurso que bloquea el renderizado: CSS o JS que retrasa el primer pintado de una página.
• Embellecedor / formateador: lo contrario de un minificador: vuelve a añadir la sangría para facilitar la lectura.
• Invalidación de caché: cambiar el nombre del archivo o la consulta de versión para que los navegadores descarguen el archivo actualizado.

¿Por qué usar este minificador?

Maneja CSS, JavaScript y HTML en un solo lugar, usa un motor probado para JavaScript, protege las partes delicadas de CSS y HTML, muestra ahorros reales y mantiene tu código privado: gratis y sin registro.

Minificador de CSS / JS / HTML: datos clave

Preguntas frecuentes

Explora más herramientas de Prompt Minds

El minificador de CSS / JS / HTML funciona muy bien junto con nuestras otras herramientas gratuitas. Todas las herramientas de Prompt Minds se ejecutan por completo en tu navegador: sin registro, sin subidas y sin marcas de agua. Ver todas las herramientas gratuitas.