Minificar CSS y JavaScript: qué es y cómo hacerlo

Por qué importa

Cada kilobyte de CSS y JavaScript cuenta dos veces: hay que descargarlo y luego el navegador tiene que procesarlo. En móvil, con conexiones irregulares, los archivos más grandes de lo necesario retrasan que la página se vea y responda.

Es de las optimizaciones más seguras y baratas: se configura una vez en el proceso de publicación o con un plugin, y no cambia nada visible. El ahorro suele ser menor que el de optimizar imágenes o quitar scripts, por eso pesa poco en la nota, pero no tiene sentido dejarlo pasar.

Cómo lo comprueba Posiciona

Usamos dos auditorías de Lighthouse 13 en la prueba móvil de PageSpeed Insights: JavaScript sin minificar y CSS sin minificar. La nota es la media de las dos, de 0 a 100, y es 100 cuando ninguna encuentra un ahorro que merezca la pena. En el informe listamos los archivos con más kilobytes que se podrían ahorrar, para que sepas si son tuyos, del tema, de un plugin o de un servicio externo.

En la nota de Velocidad esta comprobación cuenta como “detalle” (peso 1 de 5).

Cómo solucionarlo

Mira en el informe qué archivos aparecen y de qué dominio vienen: si son de tu web, puedes minificarlos; si son de un servicio externo, solo puedes pedírselo al proveedor o cambiar de servicio.
Si tu web se compila con herramientas como Vite o webpack, publica siempre la compilación de producción con la minificación activada.
Si no, activa la minificación en tu plugin de rendimiento. En webs sencillas también puedes minificar los archivos con una herramienta antes de subirlos, guardando la versión legible para seguir editándola.
Si un tema o plugin incluye versiones .min.js y .min.css, comprueba que se están cargando esas y no las de desarrollo.
Después de activarla, revisa la web a fondo (menús, formularios, carrito): si algún archivo da problemas, exclúyelo en lugar de desactivar toda la minificación.

El mismo CSS, antes y después de minificarTexto

/* Antes */
.boton-comprar {
  /* verde de la marca */
  background-color: #1b5e20;
  padding: 12px 24px;
}

/* Después */
.boton-comprar{background-color:#1b5e20;padding:12px 24px}

En WordPress

Con Autoptimize, marca las opciones de optimizar el código JavaScript y CSS. Con WP Rocket o LiteSpeed Cache, activa la minificación de CSS y JavaScript en sus ajustes de optimización de archivos.
Los tres plugins permiten excluir archivos concretos: úsalo si un plugin de formularios, de pagos o el propio tema deja de funcionar tras minificar.

En Shopify

En Shopify, los archivos del tema los sirve el CDN de Shopify. Los avisos suelen venir de apps que inyectan su propio JavaScript: si el archivo es de una app, escribe a su desarrollador o busca una alternativa más ligera.
Si en el informe aparece un CSS o JavaScript propio de la carpeta assets del tema (Tienda online → Temas → Editar código), súbelo minificado y guarda la versión original aparte para poder editarla.

Preguntas frecuentes

¿Minificar puede romper mi web?

Minificar por sí solo rara vez rompe nada, porque solo elimina lo que el navegador ignora. Los problemas suelen venir de opciones que se activan a la vez, como combinar todos los scripts en uno o cambiar su orden de carga. Actívalas de una en una, revisa la web después de cada cambio y excluye los archivos que den problemas.

¿Es lo mismo minificar que comprimir con Gzip?

No, y conviene hacer las dos cosas. Minificar cambia el archivo quitando lo que sobra y se hace una sola vez. La compresión (Gzip o Brotli) la aplica el servidor en cada envío y el navegador la deshace al recibir el archivo. Un archivo minificado y además comprimido es el que menos pesa.