rel=preconnect और rel=dns-prefetch संसाधन संकेतों और उन्हें इस्तेमाल करने के बारे में जानें.
ब्राउज़र को किसी सर्वर से संसाधन का अनुरोध करने से पहले, उसे कनेक्शन बनाना होगा. सुरक्षित कनेक्शन बनाने के लिए, इन तीन चरणों को पूरा करना होता है:
डोमेन नेम खोजें और उसे किसी आईपी पते से कनेक्ट करें.
सर्वर से कनेक्शन सेट अप करें.
सुरक्षा के लिए, कनेक्शन को एन्क्रिप्ट (सुरक्षित) करें.
इनमें से हर चरण में ब्राउज़र, सर्वर को डेटा का एक हिस्सा भेजता है और सर्वर जवाब को वापस भेजता है. शुरुआत से लेकर मंज़िल तक और वापस आने तक के इस सफ़र को दोतरफ़ा यात्रा कहा जाता है.
नेटवर्क की स्थितियों के आधार पर, एक दोतरफ़ा यात्रा में ज़्यादा समय लग सकता है. कनेक्शन सेटअप करने की प्रोसेस में, तीन राउंड ट्रिप तक शामिल हो सकती हैं. साथ ही, ऑप्टिमाइज़ नहीं किए गए मामलों में और भी बहुत कुछ हो सकता है.
समय से पहले इन बातों का ध्यान रखने से ऐप्लिकेशन का अनुभव ज़्यादा तेज़ हो जाता है. इस पोस्ट में दो संसाधन संकेतों की मदद से यह पाने का तरीका बताया गया है: <link rel=preconnect> और <link rel=dns-prefetch>.
rel=preconnect के साथ शुरुआती कनेक्शन बनाएं
मॉडर्न ब्राउज़र यह अनुमान लगाने की पूरी कोशिश करते हैं कि किसी पेज को किन कनेक्शन की ज़रूरत होगी. हालांकि, वे भरोसेमंद रूप से उन सभी का अनुमान नहीं लगा सकते. अच्छी खबर यह है कि आप उन्हें (संसाधन 😉) संकेत दे सकते हैं.
<link> में rel=preconnect जोड़ने से ब्राउज़र को यह पता चलता है कि आपका पेज किसी दूसरे डोमेन से कनेक्ट करना चाहता है. साथ ही, यह भी बताता है कि आपको यह प्रोसेस जल्द से जल्द शुरू करनी है. संसाधन ज़्यादा तेज़ी से लोड होंगे, क्योंकि ब्राउज़र के अनुरोध करने के बाद ही सेटअप की प्रोसेस पूरी हो जाएगी.
संसाधनों को ये नाम इसलिए मिलते हैं, क्योंकि ये ज़रूरी नहीं हैं. वे आपको इस बारे में जानकारी देते हैं कि आपको क्या करना है, लेकिन यह ब्राउज़र पर निर्भर करता है कि उन्हें लागू करना है या नहीं. किसी कनेक्शन को सेट करना और उसे खुला रखना बहुत काम है, इसलिए हो सकता है कि ब्राउज़र, संसाधन से जुड़े संकेतों को अनदेखा करे या स्थिति के हिसाब से उन्हें कुछ हद तक लागू करे.
ब्राउज़र को यह बताना उतना ही आसान है जितना कि अपने पेज पर <link> टैग जोड़ना:
<link rel="preconnect" href="https://example.com">
तीसरे पक्ष के अहम ऑरिजिन से शुरुआती कनेक्शन बनाकर, कॉन्टेंट लोड होने में लगने वाले समय को 100–500 मि॰से॰ तक बढ़ाया जा सकता है. ये संख्याएं कम लग सकती हैं, लेकिन वेब पेज की परफ़ॉर्मेंस के बारे में उपयोगकर्ताओं के नज़रिए पर इनका असर पड़ता है.
rel=preconnect के लिए इस्तेमाल के उदाहरण
यह जानना कि कहां से लिया गया है, लेकिन क्या से फ़ेच किया जा रहा है
वर्शन पर निर्भरता होने की वजह से, कभी-कभी ऐसी स्थिति हो जाती है जहां आपको पता होता है कि आपको किसी खास सीडीएन से संसाधन का अनुरोध करना है, लेकिन उसके लिए सटीक पाथ नहीं है.
दूसरा आम मामला किसी इमेज सीडीएन से इमेज लोड करना है. यहां किसी इमेज का सटीक पाथ, मीडिया क्वेरी या उपयोगकर्ता के ब्राउज़र पर की जाने वाली रनटाइम सुविधा की जांच पर निर्भर करता है.
इन स्थितियों में, अगर आपको फ़ेच किया जाने वाला रिसॉर्स ज़रूरी है, तो सर्वर से पहले से कनेक्ट करके, जितना हो सके उतना समय बचाएं. ब्राउज़र तब तक फ़ाइल डाउनलोड नहीं करेगा, जब तक आपका पेज इसका अनुरोध नहीं करता, लेकिन कम से कम वह कनेक्शन से जुड़े पहलुओं को समय से पहले ही संभाल लेगा, जिससे उपयोगकर्ता को कई राउंड ट्रिप के लिए इंतज़ार नहीं करना पड़ेगा.
स्ट्रीमिंग मीडिया
किसी दूसरे ऑरिजिन से मीडिया को स्ट्रीम करते समय, कनेक्शन फ़ेज़ में शायद आप कुछ समय बचाना चाहें, लेकिन तुरंत कॉन्टेंट वापस पाना शुरू न करें.
आपका पेज स्ट्रीम किए गए कॉन्टेंट को कैसे हैंडल करता है, इसके आधार पर स्क्रिप्ट के लोड होने और स्ट्रीम को प्रोसेस करने के लिए, अपनी स्क्रिप्ट के लोड होने तक इंतज़ार करें. जब आप फ़ेच करने के लिए तैयार हों, तो पहले से कनेक्ट करने से आपको इंतज़ार के समय को कम करके एक दोतरफ़ा यात्रा करने में मदद मिलती है.
rel=preconnect को लागू करने का तरीका
preconnect शुरू करने का एक तरीका यह है कि दस्तावेज़ के <head> में <link> टैग जोड़ा जाए.
<head>
<link rel="preconnect" href="https://example.com">
</head>
पहले से कनेक्ट करना, सिर्फ़ ऑरिजिन डोमेन के अलावा अन्य डोमेन के लिए ही असरदार होता है. इसलिए, आपको अपनी साइट के लिए इसका इस्तेमाल नहीं करना चाहिए.
Link एचटीटीपी हेडर के ज़रिए भी प्रीकनेक्ट शुरू किया जा सकता है:
Link: <https://example.com/>; rel=preconnect
कुछ तरह के संसाधन, जैसे कि फ़ॉन्ट बिना पहचान वाले मोड में लोड किए जाते हैं. उनके लिए, आपको preconnect संकेत के साथ crossorigin एट्रिब्यूट सेट करना होगा:
<link rel="preconnect" href="https://example.com/ComicSans" crossorigin>
अगर crossorigin एट्रिब्यूट को छोड़ दिया जाता है, तो ब्राउज़र सिर्फ़ डीएनएस लुकअप का इस्तेमाल करता है.
rel=dns-prefetch की मदद से, डोमेन नेम का समाधान जल्दी तय करें
आपको साइटों के नाम से याद होते हैं, लेकिन सर्वर उन्हें आईपी पते से याद रखते हैं. इसी वजह से डोमेन नेम सिस्टम (डीएनएस) मौजूद होता है. ब्राउज़र, साइट के नाम को आईपी पते में बदलने के लिए, डीएनएस का इस्तेमाल करता है. यह प्रोसेस—डोमेन नेम रिज़ॉल्यूशन— यह कनेक्ट करने का पहला चरण है.
अगर किसी पेज को कई तीसरे पक्ष के डोमेन से कनेक्शन बनाने की ज़रूरत होती है, तो उन सभी को पहले से कनेक्ट करना गलत होता है. preconnect संकेत का इस्तेमाल, सिर्फ़ सबसे ज़रूरी कनेक्शन के लिए किया जाता है. बाकी सभी के लिए, पहले चरण में समय बचाने के लिए <link rel=dns-prefetch> का इस्तेमाल करें. डीएनएस लुकअप में आम तौर पर 20 से 120 मि॰से॰ लगते हैं.
डीएनएस रिज़ॉल्यूशन, preconnect की तरह ही शुरू किया जाता है: दस्तावेज़ के <head> में <link> टैग जोड़कर.
<link rel="dns-prefetch" href="http://example.com">
dns-prefetch के लिए ब्राउज़र सपोर्ट, preconnect सहायता से थोड़ा अलग है. इसलिए, dns-prefetch उन ब्राउज़र के लिए फ़ॉलबैक के तौर पर काम कर सकता है जो preconnect के साथ काम नहीं करते.
<link rel="preconnect" href="http://example.com"> <link rel="dns-prefetch" href="http://example.com">फ़ॉलबैक तकनीक को सुरक्षित तरीके से लागू करने के लिए, अलग-अलग लिंक टैग का इस्तेमाल करें.
<link rel="preconnect dns-prefetch" href="http://example.com">एक ही
<link> टैग में dns-prefetch फ़ॉलबैक लागू करने से, Safari में एक गड़बड़ी होती है, जहां preconnect रद्द हो जाता है.
सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) पर होने वाला असर
dns-prefetch और preconnect का इस्तेमाल करने पर, साइटों को किसी दूसरे ऑरिजिन से कनेक्ट होने में लगने वाले समय को कम करने में मदद मिलती है. हमारा मकसद यह होना चाहिए कि किसी अन्य ऑरिजिन से संसाधन लोड करने में लगने वाले समय को कम से कम रखा जाए.
अगर सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) की बात करें, तो बेहतर है कि संसाधनों को तुरंत खोजा जा सके, क्योंकि एलसीपी उम्मीदवार, उपयोगकर्ता अनुभव का अहम हिस्सा होते हैं. एलसीपी संसाधनों पर "high" की fetchpriority वैल्यू, ब्राउज़र को इस एसेट की अहमियत के बारे में बताकर, इसे और बेहतर बना सकती है, ताकि इसे समय से पहले फ़ेच किया जा सके.
अगर एलसीपी ऐसेट को तुरंत खोजने लायक नहीं बनाया जा सकता, तो preload लिंक को "high" की fetchpriority वैल्यू के साथ अब भी, ब्राउज़र को संसाधन को जल्द से जल्द लोड करने की अनुमति दी जाती है.
अगर इनमें से कोई भी विकल्प उपलब्ध नहीं है, तो हो सकता है कि पेज के लोड होने तक सटीक रिसॉर्स के बारे में पता न चले. ऐसे में, क्रॉस-ऑरिजिन रिसॉर्स पर preconnect का इस्तेमाल किया जा सकता है. इससे रिसॉर्स को देर से खोजने पर होने वाले असर को जितना हो सके कम किया जा सकता है.
इसके अलावा, बैंडविथ इस्तेमाल के मामले में preconnect, preload से कम महंगा है, लेकिन फिर भी इसमें जोखिम कम है. बहुत ज़्यादा preload संकेतों की तरह, अगर TLS सर्टिफ़िकेट की समस्या है, तो बहुत ज़्यादा preconnect हिंट अब भी बैंडविथ का इस्तेमाल करते हैं. ध्यान रखें कि बहुत ज़्यादा ऑरिजिन से पहले से कनेक्ट न करें. इससे बैंडविथ में समस्या हो सकती है.
नतीजा
ये दो संसाधन संकेत पेज स्पीड को बेहतर बनाने में तब मदद करते हैं, जब आपको पता चलता है कि आप जल्द ही किसी तीसरे पक्ष के डोमेन से कुछ डाउनलोड करेंगे, लेकिन आपको संसाधन के लिए सही यूआरएल नहीं पता है. उदाहरण के लिए, JavaScript लाइब्रेरी, इमेज या फ़ॉन्ट देने वाले सीडीएन. पाबंदियों को ध्यान में रखें, सिर्फ़ ज़रूरी संसाधनों के लिए preconnect का इस्तेमाल करें, बाकी संसाधनों के लिए dns-prefetch पर निर्भर रहें, और असल ज़िंदगी में इसके असर को हमेशा मापें.