CSS optimallashtirish

CSS-ni optimallashtirish

CSS’ni optimallashtirish saytingizning tezro yuklanishini va silliqroq ishlashini ta’minlaydi; bu yaxshiroq foydalanuvchi tajribasiga ham olib keladi.

CSS’ni optimallashtirish bo‘yicha ba’zi maslahatlar:

1. Oddiy selektorlardan foydalaning

Mumkin bo‘lsa oddiy selektorlardan foydalaning. Murakkab selektorlar parse qilish vaqtini oshiradi.

2. Uslublash uchun universal selektordan qochish

Qat’iy zarur bo‘lmaganda universal selektordan (*) tiyilning. Universal selektor (*) har bir elementga ta’sir qiladi va sahifa renderini sekinlashtirishi mumkin.

3. Inline uslublardan qoching

Zarur bo‘lmaganda inline uslublardan tiyilning. Inline uslublar HTML’ingizni og‘irlashtiradi va boshqarishni qiyinlashtiradi.

4. @import dan qoching

Tashqi CSS yuklash uchun @import dan foydalanmaslikka harakat qiling, chunki u uslublar jadvalining yuklanishini kechiktiradi.

Tashqi CSS’ni head bo‘limida <link> tegi bilan qo‘shing, shunda u sahifa render bo‘lishidan oldin yuklanadi.

CSS 5. Use Shorthand xossalari

Mumkin bo‘lsa qisqartma xossalardan foydalaning. Bu joy tejaydi va tezro parse qilinadi.

6. Keraksiz animatsiyalarni kamaytiring

Ko‘p sonli va katta animatsiyalar boshqarish uchun ko‘proq protsessor quvvatini talab qiladi, bu esa samaradorlikni pasaytiradi. Shu sababli keraksiz animatsiyalarni olib tashlang.

7. Animatsiyalarni qayta chizishga sabab bo‘lmaydigan xossalardan foydalanish

Animatsiya samaradorligi qanday xossalarni animatsiya qilayotganingizga ham bog‘liq.

Ba’zi xossalar (width, height, left, top kabi) animatsiya qilinganda layout qayta hisoblanishini keltirib chiqaradi va bundan tiyilish kerak.

Mumkin bo‘lsa, repaint keltirib chiqarmaydigan animatsiya xossalaridan foydalaning: transforms, opacity va filter kabi.

8. CSS’ni birlashtirish va siqish

Mumkin bo‘lsa bitta CSS fayldan foydalaning va fayl hajmini kamaytirish uchun bo‘shliqlar hamda izohlarni olib tashlang.

Quyidagi kabi vositalardan foydalanishingiz mumkin:

• CSS Minifier
• PostCSS
• Online compressors

9. CSS’ni keshlash

Server sozlamalarida uzoq muddatli eskirish vaqtini belgilash orqali CSS faylingiz brauzer keshida saqlanishiga ishonch hosil qiling. Bu foydalanuvchilarning uni qayta yuklashi kerak bo‘lgan chastotani kamaytiradi.

Xulosa

• Selektorlarni qisqa va oddiy saqlang
• Avoid layout-thrashing operations
• Samarali animatsiya usullaridan foydalaning
• Tashqi, siqilgan (minified) va keshlangan uslublar jadvallaridan foydalaning