Minificador CSS y JavaScript

¿Qué es la minificación de código?

La minificación es el proceso de eliminar todos los caracteres innecesarios del código fuente sin cambiar su funcionalidad: espacios en blanco, saltos de línea, comentarios, y en el caso de JavaScript, también renombrar variables a nombres más cortos. Un archivo CSS de 50KB puede reducirse a 35KB (-30%) y un archivo JavaScript de 100KB puede bajar a 60KB (-40%). Esto mejora el tiempo de carga de la página porque hay menos datos que descargar. Nuestra herramienta minifica CSS y JavaScript al instante en tu navegador, mostrando la comparación de tamaño antes y después, y permite copiar o descargar el resultado.

¿Cuánto se reduce el tamaño del archivo?

La reducción típica de tamaño depende de cuánto código comentado, espaciado y formato tenga el original. En CSS bien formateado con muchos comentarios, la reducción puede llegar al 40-50%. En JavaScript con variables largas y comentarios de documentación, puede superar el 50%. Para JavaScript, la minificación avanzada (uglification) también acorta nombres de variables: 'calculateTotalPrice' → 'a', lo que añade un 10-20% extra de reducción. Nuestra herramienta aplica minificación estándar (sin renombrar variables) para CSS y JavaScript.

Preguntas frecuentes

Herramientas relacionadas: Formateador JSON, Gradiente CSS, Box Shadow CSS.

Por qué minificar CSS y JavaScript

Minificar significa eliminar espacios, saltos de línea, comentarios y otros caracteres innecesarios sin alterar el comportamiento del código. Un CSS de 100 KB puede pasar a 70 KB minificado. Un JavaScript de 500 KB a 250 KB. Combinado con compresión gzip o brotli en el servidor, la mejora de tiempo de carga es sustancial, especialmente en conexiones móviles.

Qué hace exactamente la minificación

CSS: elimina espacios, saltos, comentarios; convierte #FFFFFF a #FFF; sustituye margin: 10px 10px 10px 10px por margin: 10px; combina selectores duplicados.

JavaScript (mínimo): elimina espacios, saltos, comentarios; quita ; redundantes.

JavaScript (avanzado con terser/uglify): renombra variables y funciones a 1-2 caracteres (x, fn), elimina código muerto (tree shaking), simplifica expresiones constantes.

Ganancia real en producción

Para un sitio típico de tamaño medio:

Sin minificar + sin gzip: 100% (línea base).

Minificado + sin gzip: ~70% (ahorras 30%).

Sin minificar + gzip: ~25% (gzip ya comprime bien código repetitivo).

Minificado + gzip: ~22% (la combinación es óptima).

Minificado + brotli: ~18% (brotli supera a gzip un 15-25% en código).

Cuándo NO minificar

Código fuente (dev): nunca minifiques mientras desarrollas. Sourcemaps ayudan pero son una capa extra.

Archivos pequeños (< 10 KB): el overhead del proceso a veces no compensa.

Snippets en documentación: queremos que sean legibles.

Código generado dinámicamente en el navegador: el JS in-page (inline) suele minificarse poco.

Cómo se hace en proyectos profesionales

Los frameworks modernos (Vite, Webpack, esbuild, Parcel, Rollup) minifican automáticamente en build de producción. Usan herramientas como terser (JS), cssnano (CSS) o swc (Rust, más rápido). Para sitios estáticos simples, esta herramienta online es suficiente. Para proyectos grandes, integra la minificación en tu pipeline de build.

Performance y SEO

Tiempos de carga más rápidos mejoran directamente las Core Web Vitals (LCP, FID, INP) que Google usa como factor de ranking. Reducir el tamaño del JS también mejora la métrica TBT (Total Blocking Time). El equipo de Chrome pública recomendaciones en web.dev.