Preload, Prefetch और Preconnect

हमेशा as सेट करें — यह अनुरोध की प्राथमिकता, Accept हेडर और CSP प्रवर्तन निर्धारित करता है। सामान्य मान हैं: "script", "style", "font", "image", "fetch"। as के बिना ब्राउज़र preload को अनदेखा कर देते हैं और चेतावनी दर्ज करते हैं।

फ़ॉन्ट preload के लिए crossorigin आवश्यक है, भले ही फ़ॉन्ट उसी मूल-स्रोत से हो। इसके बिना ब्राउज़र वास्तविक उपयोग के लिए फ़ॉन्ट को CORS मोड में, लेकिन preload के लिए अनाम मोड में प्राप्त करता है, जिससे डाउनलोड दोगुना हो जाता है — यह प्रदर्शन संबंधी सूक्ष्म और सामान्य त्रुटि है।

<link rel="prefetch" href="..."> संकेत देता है कि किसी आगामी नेविगेशन के लिए संसाधन की आवश्यकता होगी। ब्राउज़र निष्क्रिय समय में इसे सबसे कम प्राथमिकता पर प्राप्त करता है और फिर कैश कर लेता है, ताकि अगला पृष्ठ तुरंत दिखाई दे।

<link rel="preconnect" href="https://api.example.com"> ब्राउज़र को पहला अनुरोध आने से पहले किसी तृतीय-पक्ष मूल-स्रोत के लिए DNS, TCP और TLS हैंडशेक करने का निर्देश देता है। इसका उपयोग उन API होस्ट और CDN के लिए करें जिनसे आपका पृष्ठ संपर्क करेगा।

<link rel="dns-prefetch"> केवल DNS खोज करता है — यह preconnect से कम महँगा है। इसका उपयोग ऐसे कई तृतीय-पक्ष होस्ट के लिए करें जहाँ प्रत्येक से पूर्ण preconnect करना संभव न हो; सबसे महत्वपूर्ण कुछ मूल-स्रोतों के साथ preconnect का उपयोग करें।

बहुत अधिक preload एक ही बैंडविड्थ के लिए प्रतिस्पर्धा करते हैं और पृष्ठ को धीमा कर देते हैं। केवल उन संसाधनों को preload करें जो महत्वपूर्ण रेंडर पथ को रोक रहे हैं — आमतौर पर एक मुख्य चित्र और एक या दो महत्वपूर्ण फ़ॉन्ट। बाकी सब सामान्य रूप से खोजे जा सकते हैं।

<link rel="modulepreload" href="/app.js"> केवल मॉड्यूल फ़ाइल ही नहीं, बल्कि उसके निर्भरता वृक्ष को भी preload करता है। इससे मूल ES मॉड्यूल में होने वाला क्रमिक डाउनलोड जलप्रपात टल जाता है, जहाँ प्रत्येक import के पार्स होने तक अगला import प्रतीक्षा करता है।

यह सुनिश्चित करने के लिए कि preload किए गए संसाधन वास्तव में जल्दी प्राप्त हुए हैं, Network पैनल के Initiator कॉलम का उपयोग करें और छूटे हुए अवसरों का पता लगाने के लिए Lighthouse के "आवश्यक मूल-स्रोतों से Preconnect" ऑडिट को चलाएँ। धीमे लेकिन अप्रयुक्त preload को हटाने से अक्सर उतना ही लाभ मिलता है जितना किसी अच्छे preload को जोड़ने से।

यदि preload किए गए संसाधन का लगभग 3 सेकंड के भीतर उपयोग न हो, तो कंसोल में चेतावनी दिखाई देती है। नेटवर्क या मेमोरी पर दबाव होने पर ब्राउज़र prefetch रद्द कर सकता है। लगभग 10 सेकंड तक निष्क्रिय रहने के बाद preconnect कनेक्शन बंद हो जाते हैं — इसका उपयोग उन संसाधनों के लिए करें जिनका अनुरोध जल्द किया जाएगा।

preload महत्वपूर्ण संसाधनों को अभी प्राप्त करता है (जहाँ आवश्यक हो, as और crossorigin के साथ)। prefetch संभावित अगले नेविगेशन के संसाधनों को निष्क्रिय समय में कैश करता है। preconnect (TCP+TLS) और dns-prefetch (केवल DNS) तृतीय-पक्ष मूल-स्रोतों के कनेक्शन तैयार करते हैं। modulepreload preload को ES मॉड्यूल के निर्भरता वृक्ष तक विस्तारित करता है। इनका संयम से उपयोग करें और प्रभाव मापें।