# CSS और JS optimization — उत्तरदायी और मोबाइल-प्रथम डिज़ाइन

Source: https://www.geekswithgeeks.com/hi/responsive-design/css-js-optimization

> CSS को minify करें, non-critical JavaScript को defer करें, और mobile पर time-to-interactive को reduce करने के लिए code को split करें।

## CSS और JavaScript impact को reduce करना

1. **CSS और JS को minify करें** — Whitespace remove करें, class names compress करें। 2. **Non-critical JS को defer करें** — Script tags में `defer` attribute जोड़ें। 3. **Code splitting** — प्रत्येक page के लिए केवल जरूरी चीजें load करें। 4. **Unused CSS remove करें** — PurgeCSS या similar tools का उपयोग करें।

## Optimized script loading

JavaScript को efficiently load करने के लिए strategies।

```html
<!-- Critical CSS (inline) -->
<style>
  body { font-family: sans-serif; }
  .hero { background: #06b6d4; }
</style>

<!-- Non-critical CSS (async) -->
<link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'">

<!-- Critical JS (async) -->
<script async src="critical.js"></script>

<!-- Non-critical JS (defer) -->
<script defer src="analytics.js"></script>
```

## Mobile पर critical rendering path

Slow networks पर हर byte मायने रखता है। Above-the-fold CSS को prioritize करें।

## Performance के लिए CSS containment का उपयोग

`contain` property browsers को layout recalculations को limit करके rendering optimize करने में मदद करता है।

## Web fonts और performance

System fonts instantly load होते हैं। Web fonts को loading strategy की जरूरत है (font-display: swap)।