# CSS अनुकूलन — वेब प्रदर्शन अनुकूलन

Source: https://www.skillbyai.com/hi/web-performance/web-perf-13

> महत्वपूर्ण CSS, आधुनिक लेआउट तकनीकों और न्यूनीकरण के माध्यम से CSS वितरण अनुकूलित करें।

## महत्वपूर्ण CSS इनलाइनिंग

Render-blocking से बचने के लिए above-the-fold CSS को `<style>` tag में inline करें। Example: colors, fonts, hero section के styles। CriticalCSS या Penthouse जैसे tools इस्तेमाल करें। बाक़ी को `<link rel=preload>` और `onload=this.rel='stylesheet'` से defer करें।

## CSS चयनकर्ता प्रदर्शन

बड़े DOM पर deep selectors, universal `*` और attribute selectors से बचें। Browsers selectors को right-to-left match करते हैं: `.modal .button` पहले हर button जाँचता है, फिर modal parent verify करता है। तेज़ी के लिए specific class selectors इस्तेमाल करें।

## लेआउट thrashing और पुनः गणना से बचें

DOM के read/write operations बारी-बारी से न करें। पहले सारे reads एक साथ करें, फिर writes। Synchronized updates के लिए `requestAnimationFrame()` इस्तेमाल करें। FastDOM जैसी libraries thrashing रोकने में मदद करती हैं।

## प्रदर्शन के लिए आधुनिक CSS

Floats की जगह CSS Grid/Flexbox इस्तेमाल करें। `will-change` property कम इस्तेमाल करें। महँगी properties (box-shadow, filters) से बचें। Animations के लिए `transform` और `opacity` के साथ GPU acceleration लें।

त्वरित जाँच

**Quiz:** कौन से CSS गुण GPU-त्वरित हैं?

- [ ] सभी CSS गुण
- [x] transform और opacity
- [ ] केवल रंग
- [ ] width और height

*Answer:* transform और opacity. Compositor-friendly properties layout और paint का काम बचाती हैं, जिससे animations smooth रहते हैं।