Jaké pasti mohou nastat při optimalizaci výkonu CSS?

Nepřizpůsobené selektory. Prohlížeč analyzuje CSS zprava doleva, takže složité a nadměrné selektory, zejména univerzální * nebo potomkový >, zpomalují výpočet stylů.

Velké množství pravidel @import v CSS. Blokují paralelní načítání stylů, což zpožďuje vykreslení stránky.

Použití složitých nebo náročných vlastností CSS, jako jsou stíny (box-shadow, text-shadow) nebo rozostření (filter: blur), při animacích nebo s velkým počtem prvků.

Nečitelný nebo nadbytečný CSS, psaný bez ohledu na specifikitu a dědičnost, což vede k přepisování pravidel a zvětšení velikosti souboru.

Nepoužívaný CSS („dead CSS“) — pravidla, která se na aktuální strukturu nevztahují. Zvyšují velikost souboru a dobu parsování.

Velké nebo nevhodné formáty pozadí obrázků, které se pomalu načítají a blokují vykreslení.

Použití frameworků, které přidávají mnoho nepoužívaných stylů.

Špatně navržený layout s nadbytkem prvků nebo hlubokou vnořeností, což zvyšuje dobu překreslení (repaint) a přepočtu (reflow).

Nesprávné použití will-change — může vést k nadměrnému využívání GPU paměti nebo zbytečnému vytváření vrstev.

Chybí komprese (Gzip nebo Brotli) při přenosu CSS souborů ze serveru.