Какви капани могат да възникнат при оптимизация на производителността на CSS?

Ненаправени селектори. Браузърът анализира CSS отдясно наляво, затова сложните и прекомерни селектори, особено универсалният * или селектора за потомци >, забавят изчисляването на стиловете.

Голям брой правила @import в CSS. Те блокират паралелното зареждане на стиловете, което забавя рендерирането на страницата.

Използване на сложни или ресурсоемки CSS свойства, като сенки (box-shadow, text-shadow) или размазване (filter: blur), при анимации или с голям брой елементи.

Нечетлив или прекалено CSS, написан без да се вземат предвид специфичността и наследяването, водещо до презаписване на правилата и увеличаване на размера на файла.

Непотребен CSS („dead CSS“) — правила, които не се прилагат към текущата структура. Увеличават размера на файла и времето за парсинг.

Фонови изображения с голям размер или в неподходящ формат, които се зареждат бавно и блокират рендерирането.

Използване на frameworks, които добавят много непотребни стилове.

Лошо проектиран layout с прекалено много елементи или дълбока вложеност, което увеличава времето за преизчисляване (repaint) и пренареждане (reflow).

Неправилно използване на will-change — може да доведе до прекомерна употреба на GPU памет или ненужно създаване на слоеве.

Липса на съкращаване (Gzip или Brotli) при предаване на CSS файлове от сървъра.