Kādi slēptie šķēršļi var rasties, optimizējot CSS veiktspēju?

Nepareizi selektori. Pārlūkprogramma analizē CSS no labas uz kreiso, tāpēc sarežģīti un pārmērīgi selektori, īpaši ar vispārējo * vai bērnu > selektoru, palēnina stilu aprēķinu.

Liels @import noteikumu skaits CSS. Tie bloķē paralēlo stilu ielādi, kas kavē lapas renderēšanu.

Izmantojot sarežģītas vai resursu prasīgas CSS īpašības, piemēram, ēnas (box-shadow, text-shadow) vai izplūšanu (filter: blur), animāciju laikā vai ar daudz elementiem.

Nesalasāms vai pārmērīgs CSS, rakstīts bez specifikācijas un mantošanas ņemšanas vērā, kas noved pie noteikumu pārrakstīšanas un faila lieluma palielināšanas.

Nepieciešamais CSS („dead CSS”) — noteikumi, kas netiek piemēroti pašreizējai struktūrai. Palielina faila lielumu un analīzes laiku.

Lieli vai nepiemēroti formāta fona attēli, kas lēni ielādējas un bloķē renderēšanu.

Izmantojot frameworks, kas pievieno daudz neizmantotu stilu.

Slikti izstrādāts layout ar pārmērīgu elementu skaitu vai dziļu iekļaušanu, kas palielina pārkrāsošanas (repaint) un pārskaitīšanas (reflow) laiku.

Nepareiza will-change izmantošana — var novest pie pārmērīgas GPU atmiņas izmantošanas vai nevajadzīgas slāņu izveides.

Trūkst saspiestības (Gzip vai Brotli) pārraidot CSS failus no servera.