महत्वपूर्ण रेंडरिंग पथ

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

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> सोच-समझकर इस्तेमाल करें।

त्वरित जाँच

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

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