La minificación es el proceso que consiste en eliminar todos los caracteres innecesarios de un archivo CSS, JavaScript o HTML sin modificar su comportamiento funcional: espacios, saltos de línea, comentarios, puntos y coma redundantes, sangrías. El archivo resultante es más ligero y, por tanto, más rápido de descargar y analizar por el navegador. Es una de las optimizaciones de rendimiento más sencillas de implementar y de las que producen ganancias inmediatas y medibles en las puntuaciones PageSpeed.
¿Qué es exactamente la minificación?
Cuando se escribe CSS o JavaScript, el código se formatea para que sea legible por humanos: se indenta el código, se añaden comentarios para explicar la lógica, se insertan líneas en blanco entre bloques. Todo esto es indispensable para el mantenimiento del código, pero completamente innecesario para el navegador que lo ejecuta. La minificación elimina sistemáticamente todo lo que no es necesario para la ejecución.
En la práctica: un archivo CSS de 120 KB con comentarios, sangrías y espacios puede reducirse a 85 KB tras la minificación — sin perder ni una sola regla de estilo. Un archivo JavaScript de 200 KB puede bajar a 140 KB. Esta reducción del peso de los archivos de un 20-30% se traduce directamente en un tiempo de carga más breve, especialmente notable en conexiones móviles y redes lentas.
Minificación vs compresión: ¿cuál es la diferencia?
Estos dos términos se confunden con frecuencia, pero describen operaciones distintas y complementarias. La minificación modifica el contenido del archivo: elimina caracteres, acorta nombres de variables (en JavaScript) y reescribe el código para hacerlo más corto. El archivo minificado es permanente — es este archivo modificado el que se almacena en el servidor.
La compresión (GZIP o Brotli), en cambio, no modifica el archivo: lo comprime al vuelo durante la transferencia de red, como un archivo ZIP. El servidor envía la versión comprimida y el navegador la descomprime al recibirla. Ambas optimizaciones son acumulables: un archivo CSS minificado y luego comprimido con GZIP puede alcanzar una reducción del 70-80% respecto al original sin optimizar.
Minificación CSS
Eliminación de espacios, comentarios, saltos de línea y reglas redundantes. Reducción típica: 15-25%.
Minificación JS
Además de espacios y comentarios, también acorta nombres de variables (uglification). Reducción típica: 20-40%.
Minificación HTML
Eliminación de espacios entre etiquetas y comentarios HTML. Ganancia más modesta: 5-15%.
Minificación CSS en detalle
La minificación CSS elimina todos los caracteres que no cambian el renderizado visual: espacios múltiples (un solo espacio entre selector y llave es suficiente), saltos de línea, comentarios (`/* ... */`), puntos y coma antes de la llave de cierre, ceros innecesarios (0.5 se convierte en .5) y a veces las unidades en valores cero (0px se convierte en 0). Herramientas como cssnano o clean-css también pueden optimizar los colores (#ffffff se convierte en #fff) y fusionar selectores idénticos.
Minificación JavaScript: uglification incluida
La minificación JavaScript va más allá de la CSS. Además de eliminar espacios y comentarios, las herramientas avanzadas como Terser o UglifyJS practican la uglification: renombran las variables locales con nombres cortos (una o dos letras), simplifican expresiones equivalentes y eliminan el código muerto. Un archivo JavaScript legible con nombres de variables descriptivos (`updateProductPrice`) se convierte en un archivo compacto con variables `a`, `b`, `c` — funcionalmente idéntico, pero mucho más corto.
Source maps: depurar el código minificado
Impacto en los Core Web Vitals y la puntuación PageSpeed
Google PageSpeed Insights señala explícitamente los archivos CSS y JavaScript no minificados como oportunidades de mejora, con una estimación de los kilobytes que pueden ahorrarse. La minificación mejora en particular el TBT (Total Blocking Time) al reducir el tiempo de análisis (parsing) de los archivos JS, y contribuye a mejorar el LCP (Largest Contentful Paint) al reducir el tiempo de carga de los recursos que bloquean el renderizado.
La ganancia en la puntuación PageSpeed depende de la cantidad de código no minificado presente en tu tienda. En una tienda PrestaShop típica en la que varios módulos añaden cada uno sus propios archivos CSS y JS, la minificación puede sumar entre 5 y 15 puntos en la puntuación móvil.
Minificación en PrestaShop: opciones nativas
PrestaShop incluye nativamente opciones de minificación y concatenación en el back office, accesibles a través de Parámetros avanzados > Rendimiento. Hay dos opciones disponibles: la minificación de los archivos HTML, CSS y JavaScript por un lado, y la concatenación de los archivos CSS y JS en un único archivo por otro (lo que reduce el número de solicitudes HTTP).
- Acceso mediante: Back office → Parámetros avanzados → Rendimiento → CCC (Combinar, Comprimir, Cachear)
- "Comprimir CSS": minifica y concatena las hojas de estilo en un único archivo
- "Comprimir JavaScript": minifica y concatena los archivos JS en un único archivo
- "Optimización Apache": activa la compresión GZIP en el servidor
- Atención: algunos módulos mal codificados pueden causar conflictos durante la concatenación — probar tras la activación