Quali insidie possono verificarsi durante l'ottimizzazione delle prestazioni CSS?

Selettori non ottimizzati. Il browser analizza il CSS da destra a sinistra, quindi selettori complessi e eccessivi, specialmente con il selettore universale * o il selettore discendente >, rallentano il calcolo degli stili.

Un gran numero di regole @import nel CSS. Blocca il caricamento parallelo degli stili, ritardando il rendering della pagina.

Uso di proprietà CSS complesse o che consumano molte risorse, come ombre (box-shadow, text-shadow) o sfocature (filter: blur), durante animazioni o con molti elementi.

CSS illeggibile o eccessivo, scritto senza considerare la specificità e l'ereditarietà, portando a sovrascritture di regole e all'aumento delle dimensioni del file.

CSS non utilizzato ("dead CSS") — regole che non si applicano alla struttura attuale. Aumenta le dimensioni del file e il tempo di parsing.

Immagini di sfondo di grandi dimensioni o in formati inappropriati, che si caricano lentamente e bloccano il rendering.

Utilizzo di framework che aggiungono molti stili non utilizzati.

Un layout mal progettato con troppi elementi o profondità di annidamento eccessive, che aumenta il tempo di ridisegno (repaint) e di ricalcolo (reflow).

Uso scorretto di will-change — può portare a un consumo eccessivo di memoria GPU o alla creazione inutile di layer.

Mancanza di compressione (Gzip o Brotli) durante la trasmissione dei file CSS dal server.