Aké pasce môžu vzniknúť pri optimalizácii výkonu CSS?

Nepretriedované selektory. Prehliadač analyzuje CSS sprava doľava, takže zložité a nadmerné selektory, najmä s univerzálnym * alebo selektorom potomka >, spomaľujú výpočet štýlov.

Veľké množstvo pravidiel @import v CSS. Blokujú paralelné načítanie štýlov, čo oneskoruje vykreslenie stránky.

Použitie zložitých alebo zdrojovo náročných CSS vlastností, ako sú tiene (box-shadow, text-shadow) alebo rozmazanie (filter: blur), počas animácií alebo s veľkým počtom prvkov.

Nečitateľný alebo nadbytočný CSS, napísaný bez zohľadnenia špecifickosti a dedičnosti, čo vedie k prepísaniu pravidiel a zväčšeniu veľkosti súboru.

Nepoužívaný CSS („dead CSS“) — pravidlá, ktoré sa neuplatňujú na aktuálnu štruktúru. Zväčšujú veľkosť súboru a čas parsovania.

Obrázky na pozadí veľkého rozmeru alebo v nevhodnom formáte, ktoré sa pomaly načítavajú a blokujú vykreslenie.

Použitie frameworks, ktoré pridávajú veľa nepoužívaných štýlov.

Zle navrhnutý layout s nadmerným počtom prvkov alebo hlbokou vnorenou štruktúrou, čo zvyšuje čas prekrývania (repaint) a prepočtu (reflow).

Nesprávne použitie will-change — môže viesť k nadmernému využívaniu GPU pamäte alebo zbytočnému vytváraniu vrstiev.

Chýba kompresia (Gzip alebo Brotli) pri prenose CSS súborov zo servera.