CSS
Critical CSS y CSS utilizado: qué eliminan estas optimizaciones, por qué se rompe un diseño y cómo devolver solo la regla que falta.
Eliminar el CSS no utilizado rompió mi diseño: cómo encontrar los estilos que faltan
Una pasada de CSS utilizado conserva solo las reglas que vio en uso en una única captura de la página, así que todo lo que no estaba en pantalla en ese momento (un estado abierto, el otro dispositivo, contenido cargado más tarde, una fuente de iconos, una animación de entrada) pierde sus estilos, y cada uno de estos huecos tiene una firma que le indica qué regla debe restituir.
¿Por qué mi minicarrito de WooCommerce deja de mostrarse cuando activo Remove Unused CSS?
El panel del minicarrito está oculto hasta que alguien pasa el cursor sobre él, así que un proceso de used-CSS elimina sus estilos y un retraso de JavaScript impide que se abra. Vuelve a funcionar en cuanto mantiene sus estilos en una safelist y deja que sus scripts, incluidos los cart fragments, se ejecuten.
¿Por qué mi critical CSS rompió mi menú / superposición (aparece abierto al cargar)?
Los generadores de critical CSS solo conservan los estilos de lo que es visible en la parte superior de la página al cargar. Sus elementos ocultos por defecto y que se abren al hacer clic (menú móvil, superposición de búsqueda, modal, panel lateral) se consideran inútiles y se eliminan. El resultado: al cargar, aparecen abiertos, rotos, sin estilo.