¿Qué obstáculos pueden surgir al optimizar el rendimiento de CSS?

Selectores no optimizados. El navegador analiza CSS de derecha a izquierda, por lo que los selectores complejos y excesivos, especialmente con el selector universal * o el selector de descendientes >, ralentizan el cálculo de estilos.

Una gran cantidad de reglas @import en CSS. Bloquean la carga paralela de estilos, lo que retrasa el renderizado de la página.

El uso de propiedades CSS complejas o que consumen muchos recursos, como sombras (box-shadow, text-shadow) o desenfoque (filter: blur), durante animaciones o con muchos elementos.

CSS ilegible o excesivo, escrito sin tener en cuenta la especificidad y la herencia, lo que lleva a sobrescribir reglas y aumentar el tamaño del archivo.

CSS no utilizado ("dead CSS") — reglas que no se aplican a la estructura actual. Aumenta el tamaño del archivo y el tiempo de análisis.

Imágenes de fondo de gran tamaño o en formatos inadecuados, que se cargan lentamente y bloquean el renderizado.

Uso de frameworks que añaden muchos estilos no utilizados.

Un layout mal diseñado con demasiados elementos o una profundidad de anidamiento excesiva, lo que aumenta el tiempo de repintado (repaint) y reflujo (reflow).

Uso incorrecto de will-change — puede llevar a un consumo excesivo de memoria GPU o a la creación innecesaria de capas.

Falta de compresión (Gzip o Brotli) al transmitir archivos CSS desde el servidor.