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

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

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

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

Inline above-the-fold CSS in `<style>` tag to avoid render-blocking. Example: colors, fonts, hero section styles. Use tools like CriticalCSS or Penthouse. Defer rest with `<link rel=preload>` and `onload=this.rel='stylesheet'`.

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

Avoid deep selectors, universal `*`, attribute selectors on large DOM. Browsers match selectors right-to-left: `.modal .button` checks each button then verifies modal parent. Use specific class selectors for speed.

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

Don't alternate read/write DOM operations. Batch reads together, then writes. Use `requestAnimationFrame()` for synchronized updates. Libraries like FastDOM help prevent thrashing.

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

Use CSS Grid/Flexbox instead of floats. Use `will-change` property sparingly. Avoid expensive properties (box-shadow, filters). Use GPU acceleration with `transform` and `opacity` for animations.

त्वरित जाँच

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

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