# महत्वपूर्ण रेंडरिंग पथ — वेब प्रदर्शन अनुकूलन

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

> समझें कि ब्राउज़र HTML, CSS और JavaScript को कैसे डाउनलोड, पार्स और रेंडर करते हैं।

## महत्वपूर्ण पथ अनुक्रम

1) HTML fetch → 2) HTML parse करके resources ढूँढना → 3) CSS/fonts download (render-blocking) → 4) JS download (parser-blocking) → 5) CSSOM + DOM बनाना → 6) Layout calculate → 7) Paint। Steps कम करें और क्रम optimize करें।

## महत्वपूर्ण पथ को अनुकूलित करना

Critical CSS inline करें, non-critical JS को `<script async>` या `<script defer>` से defer करें, fonts को `<link rel=preload>` से preload करें, DOM size कम रखें और layout thrashing से बचें। Bytes घटाएँ, dependencies हटाएँ।

## रेंडर-ब्लॉकिंग संसाधन

CSS और synchronous JavaScript rendering रोकते हैं। Font requests text rendering रोकती हैं। Blocking घटाने के लिए CSS को viewport/device के हिसाब से बाँटें। `<link rel=preconnect>` और `<link rel=prefetch>` सोच-समझकर इस्तेमाल करें।

त्वरित जाँच

**Quiz:** महत्वपूर्ण पथ में क्या रेंडरिंग को ब्लॉक करता है?

- [ ] केवल छवियां
- [ ] कुछ नहीं, रेंडरिंग स्वतंत्र रूप से होती है
- [ ] केवल swap से load हुए fonts
- [x] CSS और सिंक्रोनस JavaScript

*Answer:* CSS और सिंक्रोनस JavaScript. Stylesheets और synchronous scripts processing पूरी होने तक first paint रोकते हैं।