CSS Performance & Optimization

Katta loyihalarda CSS kod hajmi va ishlash tezligi frontend performance’ga bevosita ta’sir qiladi. Udemere Docs’da CSS optimizatsiya bo‘yicha best practices, real misollar va keng tarqalgan xatolarni ko‘rib chiqamiz.

Asosiy maqsadlar

1. Tez render – brauzer tezroq sahifa chizishi.
2. Kichik fayl hajmi – yuklanish vaqtini kamaytirish.
3. Maintainability – kelajakda kodni oson boshqarish.

Best Practices

1. Kodni qisqartirish (Minification)

• CSS fayllarni minify qiling (.min.css).
• Keraksiz bo‘sh joylar, izohlar, newline’larni olib tashlang.

# Misol: PostCSS yoki terser bilan
npm run build:css

2. Critical CSS (Above-the-fold)

• Faqat birinchi ekranga kerakli CSS ni inline qiling.
• Qolganini async/defer bilan yuklang.

<style>
  header { background: white; }
</style>
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

3. Keraksiz CSS’dan qutulish

• Faqat ishlatiladigan class va style’larni qoldiring.
• PurgeCSS yoki Tailwind JIT ishlating.

# Tailwind misoli
tailwindcss -o build.css --minify --content "./src/**/*.html"

4. Selectors optimizatsiyasi

• Yomon: div ul li a span { ... } ❌
• Yaxshi: .nav-link { ... } ✅

5. Animatsiya optimizatsiyasi

• transform va opacity animatsiyalari GPU bilan tezroq ishlaydi.
• top/left/width/height o‘rniga translate/scale ishlating.

/* Yaxshi */
.box { transition: transform 0.3s ease; }
 
/* Yomon */
.box { transition: left 0.3s ease; }

6. Reflow & Repaint kamaytirish

• will-change: transform; bilan browser’ga oldindan signal berish.
• CSS property’larni bir marta o‘zgartirish, loop ichida emas.

7. Fayl strukturasini boshqarish

• Modular CSS yozing (SCSS modules, Tailwind, BEM).
• Keraksiz global style’lardan qoching.

8. CDN & Caching

• Static CSS fayllarni CDN’dan berish.
• Cache-Control header’lar qo‘ying.

Cache-Control: max-age=31536000

Performance Tools

• Lighthouse (Chrome DevTools) → render tezligini o‘lchash.
• PurgeCSS → keraksiz kodni olib tashlash.
• DevTools Coverage → ishlatilmagan CSS ni topish.
• Stylelint → kodni tozalash.

Keng tarqalgan xatolar

1. Har doim px ishlatish → responsivlik yo‘qoladi.
2. !important ko‘payib ketishi → maintainability yomonlashadi.
3. Keraksiz animatsiya → mobile performance tushadi.
4. 100KB+ CSS fayl → sahifa yuklanishi sekinlashadi.
5. Inline style haddan tashqari ko‘p → caching imkoniyati yo‘qoladi.

Amaliy Maslahatlar

• Tailwind yoki boshqa utility-first framework ishlating → kod miqdorini kamaytiradi.
• clamp(), min(), max() bilan responsive rules yozing → media query soni kamayadi.
• Har doim minify + purge + cache uchligini qo‘llang.
• Performance testlarini CI/CD pipeline’ga qo‘shing.

Savol-Javob

Q: CSS fayl hajmini 200KB dan 50KB ga qanday tushirish mumkin? J: PurgeCSS + minification + modular architecture.

Q: Animatsiyalarni qayerda ishlatish xavfsiz? J: Faqat transform va opacity → reflow/repaint minimal.

Q: Critical CSS kerakmi? J: Ha, LCP (Largest Contentful Paint) metrikasini tezlashtiradi.

Yakuniy maslahat

CSS performance = kamroq kod + toza struktura + GPU-friendly animatsiyalar.