Eliminar el CSS no utilizado rompió mi diseño: cómo encontrar los estilos que faltan

Activa «Eliminar CSS no utilizado», el informe deja de quejarse de los bytes sin usar y el sitio se ve bien en su pantalla. Luego llegan los avisos. El menú móvil se abre como una lista sin formato. Los iconos se han convertido en cuadrados vacíos. Una sección entera aparece en blanco en la página de inicio. La página de producto está rota, pero solo para los clientes con sesión iniciada. O todo iba bien ayer y una página se rompió durante la noche.

Desactivar la opción lo arregla, y tira por la borda una de las mayores ganancias en un tema pesado. Esta guía explica lo que la herramienta realmente pasa por alto, cómo leer el síntoma y cómo restituir solo las reglas que faltan.

Qué hace una pasada de CSS utilizado

La herramienta carga su página en un navegador headless, a un solo tamaño de pantalla, sin sesión iniciada y sin hacer clic en nada. Registra qué reglas CSS coinciden con un elemento en ese momento, conserva esas y descarta el resto. Después, la página se sirve con esa hoja de estilos recortada en lugar de los archivos completos del tema.

La debilidad viene de serie: la captura es un estado de una página en un dispositivo. Toda regla que solo importa en otro estado se considera inútil y se elimina.

Los seis puntos ciegos, y su firma

1. Estados que aparecen tras un clic. Un menú abierto, un modal, un mini carrito, la segunda pestaña de un bloque de pestañas: su clase «abierto» la añade JavaScript, así que no estaba en la página durante la captura. Firma: el elemento se abre sin estilos, o no aparece en absoluto. Dos casos detallados: menús y overlays y el mini carrito de WooCommerce.

2. El otro dispositivo. Las reglas dentro de una media query móvil solo coinciden cuando el renderizado se hace a ancho móvil. Si el CSS recortado se generó a ancho de escritorio y se sirve a los móviles, el diseño móvil pierde sus reglas. Firma: roto solo en un dispositivo.

3. Contenido que llega más tarde o para otra persona. Reseñas cargadas por un widget, productos relacionados cargados por AJAX, un scroll infinito, la barra de administración, un carrito con productos, un aviso para usuarios con sesión iniciada. Nada de eso existía para el visitante sin sesión de la captura. Firma: bien para usted en una ventana privada, roto para un cliente en un estado concreto.

4. Fuentes de iconos. Una fuente de iconos se declara con @font-face y se usa mediante clases. Si ninguna regla conservada usa esa familia de fuentes, la declaración se descarta con ellas, y cualquier icono añadido después no tiene con qué dibujarse. Firma: cuadrados vacíos o espacios en blanco donde deberían estar los iconos.

5. Animaciones de entrada. Los maquetadores visuales suelen ocultar un elemento en la carga (opacity:0) y dejan que un script añada la clase que lo hace aparecer con una animación. Si se eliminó la regla detrás de esa clase o su @keyframes, el elemento queda invisible para siempre. Firma: una sección en blanco que aparece en cuanto se desactiva la optimización.

6. Un renderizado que salió mal. Durante la generación, una hoja de estilos no llegó: un timeout, una petición bloqueada o un maquetador que estaba regenerando su propia caché CSS en ese momento. El resultado parece casi correcto, con un componente sin sus estilos, y queda en caché hasta la siguiente generación. Firma: roto solo en algunas páginas, a partir de un momento preciso, y arreglado al regenerar.

Paso 1: confirmar que el CSS utilizado es la causa

Cargue la página rota con la optimización omitida (la mayoría de herramientas ofrecen un parámetro de URL o un interruptor por página) o desactivada, con todas las capas de caché purgadas. Si la página está bien, el CSS recortado es la causa. Si sigue rota, busque en otra parte: un retraso de JavaScript produce síntomas muy parecidos, y la guía sobre el retraso de JavaScript trata ese caso.

Después reproduzca el fallo en el estado que lo provoca: el ancho de dispositivo correcto, la interacción (abrir el menú, pasar el ratón por el carrito), el estado de visitante correcto (con sesión iniciada, carrito con productos), y haga scroll hasta la zona rota.

Paso 2: encontrar la regla que falta

Abra la versión sin optimizar en una pestaña y la optimizada en otra. En ambas, haga clic derecho en el elemento roto, elija Inspeccionar y compare el panel Styles. Las reglas presentes a la izquierda y ausentes a la derecha son las que faltan; el panel muestra su selector y el archivo del que proceden.

Para comprobar un selector directamente, pegue esto en la consola de cada versión:

// Sustitúyala por la clase sospechosa (el estado abierto, el icono, la animación).
const needle = '.is-open';
[...document.styleSheets]
  .flatMap(s => { try { return [...s.cssRules]; } catch (e) { return []; } })
  .filter(r => (r.selectorText || r.name || '').includes(needle.replace(/^[.#]/, '')))
  .map(r => r.cssText.slice(0, 120));

Un resultado vacío en la página optimizada y una lista en la original le dice exactamente qué regla hay que recuperar. Las hojas de estilos servidas desde otro dominio pueden quedar ocultas a esta comprobación; el panel Styles sí las muestra.

Paso 3: restituir lo que falta, y solo eso

Adapte la solución al punto ciego:

• Estados tras un clic (1): añada las clases de estado a la safelist, por ejemplo is-open, active, show, o el prefijo propio del componente. Cuando un componente tiene muchos estados, dejar toda su hoja de estilos fuera del recorte es más fiable que perseguir cada selector.
• Otro dispositivo (2): asegúrese de que la herramienta genera para móvil y para escritorio, y regenere tras cambiarlo.
• Contenido tardío (3): añada a la safelist el prefijo del widget, o conserve completa la hoja de estilos de ese plugin.
• Fuentes de iconos (4): añada a la safelist las clases de iconos (a menudo un prefijo como fa- o et-icon), lo que conserva con ellas la declaración de la fuente.
• Animaciones (5): añada a la safelist las clases de animación de su maquetador, o desactive las animaciones de entrada en la parte visible sin scroll, lo que además ayuda al Largest Contentful Paint.
• Generación defectuosa (6): purgue primero la caché CSS propia del maquetador y luego regenere el CSS recortado de las páginas afectadas. Regenerar sobre una caché del maquetador a medio construir reproduce el mismo hueco.

Después del arreglo: probar los estados, no solo la página

• Móvil y escritorio, cada uno con el menú, la búsqueda y el carrito abiertos.
• Con sesión y sin sesión, carrito vacío y carrito con productos.
• Recorra toda la página: las secciones tardías y los bloques animados son donde se esconden los huecos.
• Tras una actualización del tema, del maquetador o de un plugin, vuelva a comprobar: los nuevos nombres de clase deben añadirse otra vez a la safelist.
• Y, como siempre, una optimización arriesgada cada vez, como en nuestro método para optimizar sin romper.

Con Mantys Core

En resumen

• Una pasada de CSS utilizado conserva lo que coincidió durante un único renderizado: un estado, un tamaño, sin sesión, sin interacción.
• Seis puntos ciegos: estados tras un clic, el otro dispositivo, contenido tardío, fuentes de iconos, animaciones de entrada y una generación que salió mal.
• Confirme con la optimización omitida y luego compare el panel Styles de ambas versiones para identificar la regla que falta.
• Restituya solo esa regla, mediante la safelist o conservando completa una hoja de estilos, en las plantillas que la necesitan.
• Pruebe los estados, ambos dispositivos y ambos tipos de visitante, y vuelva a comprobar tras cada actualización.