Ce capcane pot apărea în timpul optimizării performanței CSS?

Selecțori nesimplificați. Browser-ul analizează CSS de la dreapta la stânga, așa că selectori complecși și excesivi, în special cu selectorul universal * sau selectorul de descendență >, încetinesc calculul stilurilor.

Un număr mare de reguli @import în CSS. Acestea blochează încărcarea paralelă a stilurilor, ceea ce întârzie randarea paginii.

Utilizarea de proprietăți CSS complexe sau care consumă multe resurse, cum ar fi umbrele (box-shadow, text-shadow) sau estomparea (filter: blur), în timpul animațiilor sau cu un număr mare de elemente.

CSS ilizibil sau excesiv, scris fără a ține cont de specificitate și moștenire, ducând la suprascrierea regulilor și creșterea dimensiunii fișierului.

CSS neutilizat („dead CSS”) — reguli care nu se aplică structurii actuale. Crește dimensiunea fișierului și timpul de analiză.

Imagini de fundal de mari dimensiuni sau în format nepotrivit, care se încarcă lent și blochează randarea.

Utilizarea frameworks care adaugă multe stiluri neutilizate.

Un layout prost proiectat, cu un număr excesiv de elemente sau adâncime mare de imbricare, ceea ce crește timpul de re-randare (repaint) și re-calculare (reflow).

Utilizarea incorectă a will-change — poate duce la consum excesiv de memorie GPU sau la crearea inutilă de straturi.

Lipsa compresiei (Gzip sau Brotli) la transmiterea fișierelor CSS de pe server.