Jakie pułapki mogą pojawić się podczas optymalizacji wydajności CSS?

Nieoptymalizowane selektory. Przeglądarka analizuje CSS od prawej do lewej, więc skomplikowane i nadmierne selektory, szczególnie z uniwersalnym selektorem * lub selektorem potomka >, spowalniają obliczanie stylów.

Duża liczba reguł @import w CSS. Blokują one równoległe ładowanie stylów, co opóźnia renderowanie strony.

Użycie skomplikowanych lub zasobożernych właściwości CSS, takich jak cienie (box-shadow, text-shadow) lub rozmycie (filter: blur), podczas animacji lub przy dużej liczbie elementów.

Nieczytelny lub nadmiarowy CSS, napisany bez uwzględnienia specyficzności i dziedziczenia, prowadzący do nadpisywania reguł i zwiększenia rozmiaru pliku.

Nieużywany CSS („dead CSS”) — reguły, które nie są stosowane do obecnej struktury. Zwiększa rozmiar pliku i czas parsowania.

Obrazy tła dużych rozmiarów lub w nieodpowiednim formacie, które ładują się wolno i blokują renderowanie.

Użycie frameworków, które dodają dużo nieużywanych stylów.

Źle zaprojektowany layout z nadmiarem elementów lub głębokim zagnieżdżeniem, co zwiększa czas ponownego rysowania (repaint) i przeliczania (reflow).

Nieprawidłowe użycie will-change — może prowadzić do nadmiernego zużycia pamięci GPU lub niepotrzebnego tworzenia warstw.

Brak kompresji (Gzip lub Brotli) podczas przesyłania plików CSS z serwera.