Minificar CSS y JavaScript es la optimización que toda herramienta de rendimiento reclama primero, y la que más a menudo se hace mal: o no se hace, o se hace con un plugin que destroza la web un martes a las tres de la madrugada. Esta guía explica qué aporta realmente la minificación, cuándo se rompe y cómo introducirla sin que nada falle.
Qué ahorra minificar CSS y JavaScript
| Archivo | Original | Minificado | Minificado + Gzip |
|---|---|---|---|
| CSS del tema, 4.000 líneas | 180 KB | 128 KB (−29 %) | 22 KB |
| JavaScript propio | 95 KB | 58 KB (−39 %) | 17 KB |
| CSS de Bootstrap | 230 KB | 190 KB (−17 %) | 28 KB |
La conclusión: Gzip o Brotli se llevan la mayor parte. La minificación encima ahorra otro 10–20 % del tamaño comprimido y, más importante, tiempo de análisis en el navegador, porque hay menos caracteres que leer. En móvil son 50–150 ms medibles por archivo grande.
Qué hace la minificación
- Elimina espacios, saltos de línea y comentarios.
- CSS:
0px→0,#ffffff→#fff, fuera los últimos puntos y coma. - JavaScript (solo en modo «uglify»): renombra variables locales (
userProfile→a) y elimina código muerto.
Los tres casos en que se rompe
- Puntos y coma ausentes en JavaScript. La inserción automática salva el código sin formatear; al juntarlo en una línea, ya no. El clásico es un
returncon el valor en la línea siguiente. - Nombres globales que se esperan desde fuera. Si se renombra
window.myApp, el script inline del tema deja de encontrarlo. El modo uglify solo para código referenciado exclusivamente desde dentro. - Comentarios condicionales y cabeceras de licencia. Algunos minificadores eliminan licencias
/*! … */, lo que incumple las condiciones. Comprueba que se respeta el!.
El flujo seguro
- Ordena el original con el formateador: detecta puntos y coma ausentes antes de minificar.
- Minifica con el minificador de código (conservador, sin renombrar) o en la herramienta de build (esbuild, Terser, cssnano).
- Guarda como
archivo.min.cssjunto al original; genera un source map para que los errores del navegador apunten a la línea correcta. - Prueba en un entorno de staging: consola limpia y todas las interacciones probadas una vez.
- Vacía la caché y sube la versión en la URL (
?v=2) para que los navegadores carguen el archivo nuevo.
WordPress: ¿plugin o build?
Los plugins de caché (WP Rocket, Seraphinite, Autoptimize) minifican al vuelo y sirven para el 90 % de los sitios. Activa CSS y JavaScript por separado y prueba tras cada paso; si algo se rompe, excluye el archivo responsable en vez de desactivar toda la función. Quien desarrolla JavaScript propio minifica en el build; el plugin queda entonces solo para los archivos del tema y de los plugins.
Preguntas frecuentes
¿Minifico también el HTML?
La ganancia es pequeña (5–10 % antes de Gzip) y los scripts inline se rompen fácilmente. En páginas dinámicas de WordPress no suele compensar.
¿Y combinar archivos?
Con HTTP/2 ya no hace falta; varios archivos pequeños se cargan en paralelo. Combina solo si son más de 30.
¿La minificación mejora el SEO?
Indirectamente, a través de Core Web Vitals, si el tiempo de carga o la interactividad estaban al límite.
Gratis, funciona en tu navegador, no se sube nada, sin registro.
Sigue leyendo
Más de Herramientas para desarrolladores.
