📦 Minificador HTML / CSS / JavaScript
Minifica o embellece HTML, CSS y JavaScript. Elimina comentarios, comprime espacios, muestra ahorro.
🔗 Herramientas relacionadas
📖 Dónde se suele tropezar
Quita espacios y comentarios de HTML, CSS o JavaScript, o vuelve a expandirlos. Todo se ejecuta en el navegador. No sustituye a una cadena de build: comprime sólo a nivel léxico, sin el renombrado de identificadores, la eliminación de código muerto ni el tree shaking que hacen terser o esbuild. Sirve para reducir un fragmento una vez, o para volver legible uno que no lo es.
| Caso | Qué ocurre | Qué hacer |
|---|---|---|
| El JavaScript deja de funcionar | Casi siempre son puntos y coma omitidos. El código que dependía de los saltos de línea para terminar sentencias se une en una sola al quitarlos. La inserción automática de punto y coma en JavaScript depende de dónde estén los saltos, así que quitarlos cambia el significado. A la inversa, el código con un salto justo tras return se rompe si ese salto se conserva. |
Pásalo antes por Prettier o similar para que los puntos y coma sean explícitos y después minifica; y ejecuta siempre el resultado. Ten en cuenta que cuando el código minificado lanza un error, la traza es ilegible sin un source map. Genera el código de producción, y su source map, en el build y no aquí. |
| El HTML minificado pierde los espacios | El espacio en HTML puede ser significativo. El espacio entre <span>A</span> y <span>B</span> se dibuja como separación entre palabras; quítalo y sale AB. Algunas maquetaciones que colocan elementos inline-block en fila también dependen de ese espacio. |
Como norma, colapsa el espacio sólo entre elementos de bloque y consérvalo entre los de línea. Nunca toques el contenido de <pre> ni de <textarea>, donde saltos e indentación se muestran tal cual. Si el criterio se te hace pesado, renuncia a minificar HTML y deja que lo hagan gzip o Brotli: el ahorro de transferencia es mucho mayor y el riesgo, nulo. |
| Algunas reglas CSS dejan de aplicarse | La pérdida clásica es un hack para navegadores antiguos. Notaciones como *zoom, _height, !ie o /*\*/ son errores de sintaxis deliberados pensados para que sólo los lea un navegador, así que un procesado correcto los elimina. Los escapes de fuentes de iconos como content: "\f101" y los espacios dentro de @media también pueden romperse según la implementación. |
Mira siempre la página real una vez antes de publicar CSS minificado. Si aún quedan hacks para IE, casi seguro que sobran, y borrarlos a conciencia es más sano que dejar que se los coma un minificador. A largo plazo, mete PostCSS con cssnano en el build: es más seguro y además gestiona prefijos y fusiona reglas duplicadas. |
No sobrestimes lo que aporta la minificación. El texto se transfiere comprimido con gzip o Brotli de todos modos. Una reducción del 30 % al quitar espacios suele quedar en unos pocos puntos tras la compresión, porque los algoritmos son muy buenos con patrones repetidos y las tiradas de espacios lo son. Lo que de verdad mueve el tiempo de carga —el número de archivos, el peso de las imágenes y si algo bloquea el renderizado— pesa órdenes de magnitud más.
📖 Cómo usar
-
1
Elegir lenguaje y acciónSelecciona auto-detectar o HTML/CSS/JavaScript y elige minificar o embellecer.
-
2
Ingresar códigoPega el código en el campo izquierdo. Usa el botón Ejemplo para ver código de muestra.
-
3
Verificar ahorro de tamaño y copiarEl resultado y el ahorro de tamaño se muestran. Haz clic en Copiar para copiarlo.
❓ Preguntas frecuentes
¿La minificación cambia el comportamiento del código?
¿Se manejan correctamente calc() y var() de CSS?
¿Puedo cambiar el tamaño de sangría para embellecer?
🐛 ¿Encontró un problema con esta herramienta?
Gratis, sin registro. Incluso solo los pasos para reproducir ayudan. Los informes van directamente al operador y se usan para corregir.
¡Gracias por tu reporte!
Tu reporte llegó al operador y se usará para mejorar.