Resource hints <link> टैग हैं जो ब्राउज़र को संसाधनों को जल्दी प्राप्त या कनेक्ट करने के लिए बताते हैं, लोड प्रदर्शन को अनुकूलित करते हैं। प्रत्येक एक अलग समय/प्राथमिकता आवश्यकता को पूरा करता है।
Resource hints <link> टैग हैं जो ब्राउज़र को संसाधनों को जल्दी प्राप्त या कनेक्ट करने के लिए बताते हैं, लोड प्रदर्शन को अनुकूलित करते हैं। प्रत्येक एक अलग समय/प्राथमिकता आवश्यकता को पूरा करता है।
preload — "मुझे इसकी वर्तमान पृष्ठ के लिए आवश्यकता है, इसे अभी उच्च प्राथमिकता के साथ प्राप्त करें।" महत्वपूर्ण संसाधनों के लिए जो पार्सर देर से खोजता है: फ़ॉन्ट्स, हीरो इमेज, CSS-संदर्भित संपत्ति। ब्राउज़र को सही प्राथमिकता/हेडर सेट करने के लिए as की आवश्यकता है।
preconnect — "मैं इस ऑरिजन से जल्द ही कनेक्ट करूंगा; अभी DNS लुकअप + TCP + TLS हैंडशेक करें।" तीसरे पक्ष (API, फ़ॉन्ट होस्ट, CDN) के लिए पहले अनुरोध से पहले राउंड-ट्रिप सहेजता है। कुछ महत्वपूर्ण ऑरिजन के लिए उपयोग करें।
dns-prefetch — preconnect का एक हल्का संस्करण: केवल DNS रिजोल्यूशन। कई ऑरिजन के लिए अच्छा फॉलबैक।
prefetch — "मुझे शायद इसकी अगली नेविगेशन के लिए आवश्यकता होगी; निष्क्रिय होने पर कम प्राथमिकता के साथ प्राप्त करें।" संभावित अगली पृष्ठों/संपत्तियों के लिए। भविष्य के लिए कैश किया गया, वर्तमान पृष्ठ के लिए नहीं।
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin />
फ़ॉन्ट्स देर से खोजे जाते हैं (ब्राउज़र को पहले CSS पार्स करना होगा), इसलिए उन्हें प्रीलोड करने से अदृश्य-पाठ देरी से बचा जा सकता है।
सब कुछ प्रीलोड करने से उद्देश्य विफल हो जाता है — यह वास्तव में महत्वपूर्ण संसाधनों के साथ बैंडविड्थ के लिए प्रतिस्पर्धा करता है। केवल उन कुछ के लिए संकेत दें जो सबसे अधिक महत्वपूर्ण हैं।
Resource hints महत्वपूर्ण पथ पर विलंबता को कम करते हैं: preconnect तीसरे पक्ष के लिए हैंडशेक देरी को हटाता है, preload देर से खोजी गई महत्वपूर्ण संपत्तियों को प्राथमिकता देता है (फ़ॉन्ट्स, LCP छवि), और prefetch अगली नेविगेशन को तात्कालिक महसूस कराता है।
सर्जिकल रूप से उपयोग किए जाने पर, वे Core Web Vitals में सार्थक रूप से सुधार करते हैं।