preload, prefetch और preconnect जैसे resource hints क्या हैं?

Question

Accepted Answer

**Resource hints** `` टैग हैं जो ब्राउज़र को संसाधनों को जल्दी प्राप्त या कनेक्ट करने के लिए बताते हैं, लोड प्रदर्शन को अनुकूलित करते हैं। प्रत्येक एक अलग समय/प्राथमिकता आवश्यकता को पूरा करता है। ```html ``` ## प्रत्येक क्या करता है - **`preload`** — "मुझे इसकी **वर्तमान पृष्ठ के लिए** आवश्यकता है, इसे अभी उच्च प्राथमिकता के साथ प्राप्त करें।" महत्वपूर्ण संसाधनों के लिए जो पार्सर देर से खोजता है: फ़ॉन्ट्स, हीरो इमेज, CSS-संदर्भित संपत्ति। ब्राउज़र को सही प्राथमिकता/हेडर सेट करने के लिए `as` की आवश्यकता है। - **`preconnect`** — "मैं इस **ऑरिजन** से जल्द ही कनेक्ट करूंगा; अभी DNS लुकअप + TCP + TLS हैंडशेक करें।" तीसरे पक्ष (API, फ़ॉन्ट होस्ट, CDN) के लिए पहले अनुरोध से पहले राउंड-ट्रिप सहेजता है। कुछ महत्वपूर्ण ऑरिजन के लिए उपयोग करें। - **`dns-prefetch`** — preconnect का एक हल्का संस्करण: केवल DNS रिजोल्यूशन। कई ऑरिजन के लिए अच्छा फॉलबैक। - **`prefetch`** — "मुझे **शायद** इसकी **अगली** नेविगेशन के लिए आवश्यकता होगी; निष्क्रिय होने पर कम प्राथमिकता के साथ प्राप्त करें।" संभावित अगली पृष्ठों/संपत्तियों के लिए। भविष्य के लिए कैश किया गया, वर्तमान पृष्ठ के लिए नहीं। ## एक सामान्य वास्तविक उदाहरण: फ़ॉन्ट्स ```html ``` फ़ॉन्ट्स देर से खोजे जाते हैं (ब्राउज़र को पहले CSS पार्स करना होगा), इसलिए उन्हें प्रीलोड करने से अदृश्य-पाठ देरी से बचा जा सकता है। ## चेतावनी: बहुत सारे संकेत न दें सब कुछ प्रीलोड करने से उद्देश्य विफल हो जाता है — यह वास्तव में महत्वपूर्ण संसाधनों के साथ बैंडविड्थ के लिए प्रतिस्पर्धा करता है। केवल उन कुछ के लिए संकेत दें जो सबसे अधिक महत्वपूर्ण हैं। ## यह क्यों महत्वपूर्ण है Resource hints महत्वपूर्ण पथ पर विलंबता को कम करते हैं: `preconnect` तीसरे पक्ष के लिए हैंडशेक देरी को हटाता है, `preload` देर से खोजी गई महत्वपूर्ण संपत्तियों को प्राथमिकता देता है (फ़ॉन्ट्स, LCP छवि), और `prefetch` *अगली* नेविगेशन को तात्कालिक महसूस कराता है। सर्जिकल रूप से उपयोग किए जाने पर, वे Core Web Vitals में सार्थक रूप से सुधार करते हैं।