CSS performansını optimallaşdırarkən hansı tələlər…

Mürəkkəb seçicilərin həddindən artıq istifadəsi: > * və ya :nth-child kimi seçicilər brauzer üçün yavaş ola bilər, elementləri axtararkən.
@import istifadə etmək: @import əlavə HTTP sorğuları yaradır və stil yükləməsini paralel şəkildə bloklayır, bu da səhifənin renderlənməsini yavaşladır.
Qısaldılmış xüsusiyyətlərdən istifadə etməyin: Bir neçə xüsusiyyəti (məsələn, margin-top, margin-bottom və s.) margin qısaldılmış formasında təyin etmək faylın ölçüsünü və analiz vaxtını artıra bilər.
Çox sayda !important qaydası: !important istifadə etmək kaskad qaydasını pozur və stilin diaqnostikası və dəstəyi çətinləşdirir.
Əlavə CSS istifadə etmək: Səhifədə heç bir elementə tətbiq olunmayan stillər faylın ölçüsünü artırır.
Optimizasiya olunmamış şəkillər: CSS-də istifadə olunan şəkillər (məsələn, fon üçün) sıxılmış və düzgün formatda olmalıdır.
Minifikasiya və sıxma edilməməsi: CSS faylları minifikasiya edilməli və sıxılmalıdır (məsələn, Gzip) ki, ölçüsü azalsın və yükləmə sürətlənsin.
Çox kiçik CSS faylları: Bir çox kiçik CSS faylları HTTP sorğularının sayını artırır.
Render bloklaması: CSS standart olaraq render bloklayır. CSS yükləmə təşkilatında səhvlər (məsələn, kritik olmayan stillər başlanğıcda) renderlənməni gecikdirə bilər.
Standart olmayan şriftlərin optimizasiyasız istifadəsi: Çox sayda şrift və ya optimizasiyasız şriftlərin (məsələn, alt toplusuz) yüklənməsi səhifənin yüklənməsini yavaşlada bilər.
Böyük DOM ağacları: Hətta optimallaşdırılmış CSS ilə belə, mürəkkəb və dərin DOM ağacları stil tətbiqini və yenidən çəkilməni yavaşladır.
CSS animasiyaları və tez-tez stil və layout hesablamaları: left/top kimi xüsusiyyətlər yerinə transform istifadə etmək brauzer üçün daha çox xərcə səbəb ola bilər.
Media sorğularının düzgün istifadə olunmaması: Çox və ya optimizasiyadan kənar media sorğuları stil işləmə vaxtını artırır.
Performans analizi olmaması: Chrome DevTools Performance tab kimi vasitələr olmadan tıxac nöqtələrini tapmaq çətindir.

/* Effektiv olmayan seçici nümunəsi */
body > * {
    margin: 0;
}

/* Daha effektiv seçici nümunəsi */
.container {
    margin: 0;
}

/* @import istifadə etməyin */
@import url('other.css');

/* HTML-də <link> istifadə etmək daha yaxşıdır */

/* Əvəzinə */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* Qısaldılmış xüsusiyyətdən istifadə edin */
margin: 10px 20px;

CSS performansını optimallaşdırarkən hansı tələlər ortaya çıxa bilər?