CSS और JS optimization

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।

<!-- 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)।