Koje zamke mogu nastati prilikom optimizacije performansi CSS-a?

Неповољни селектори. Прегледач парси CSS са десна на лево, па сложени и прекомерни селектори, посебно са универзалним * или селектором потомства >, успоравају израчунавање стилова.

Велики број правила @import у CSS-у. Они блокирају паралелно учитавање стилова, што одлаже приказивање странице.

Користите сложене или ресурсо-емне CSS особине, као што су сенке (box-shadow, text-shadow) или замућење (filter: blur), током анимација или са великим бројем елемената.

Непојмљив или прекомерни CSS, написан без узимања у обзир специфичност и наследност, што доводи до преписа правила и повећања величине фајла.

Непотребни CSS („dead CSS“) — правила која се не примењују на тренутну структуру. Повећавају величину фајла и време парсирања.

Фонске слике велике величине или у неподходящем формату, које се споро учитавају и блокирају приказивање.

Користите frameworks који додају много непотребних стилова.

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

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

Недостаје компресија (Gzip или Brotli) приликом преноса CSS фајлова са сервера.