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 का इस्तेमाल करने से, साइटों को किसी दूसरे ऑरिजिन से कनेक्ट होने में लगने वाला समय कम करने में मदद मिलती है. हमारा मुख्य मकसद यह है कि किसी दूसरे ऑरिजिन से संसाधन लोड होने में कम से कम समय लगे.
सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय (एलसीपी) के हिसाब से, यह बेहतर है कि संसाधनों का तुरंत पता लगाया जा सके. ऐसा इसलिए, क्योंकि एलसीपी कैंडिडेट, उपयोगकर्ता अनुभव के अहम हिस्से होते हैं. एलसीपी रिसॉर्स पर fetchpriority की वैल्यू "high" सेट करने से, इस मेट्रिक को और बेहतर बनाया जा सकता है. इससे ब्राउज़र को इस ऐसेट की अहमियत के बारे में पता चलता है, ताकि वह इसे जल्दी फ़ेच कर सके.
अगर एलसीपी ऐसेट को तुरंत खोजे जाने लायक नहीं बनाया जा सकता है, तो preload लिंक—जिसमें fetchpriority की वैल्यू "high" भी होती है—अब भी ब्राउज़र को संसाधन को जल्द से जल्द लोड करने की अनुमति देता है.
अगर इनमें से कोई भी विकल्प उपलब्ध नहीं है, तो क्रॉस-ऑरिजिन रिसॉर्स पर preconnect का इस्तेमाल किया जा सकता है. ऐसा इसलिए, क्योंकि पेज लोड होने के बाद ही सटीक रिसॉर्स के बारे में पता चलेगा. इससे, रिसॉर्स के बारे में देर से पता चलने के असर को कम किया जा सकता है.
इसके अलावा, preconnect में preload की तुलना में बैंडविथ का इस्तेमाल कम होता है. हालांकि, इसमें भी जोखिम होते हैं. बहुत ज़्यादा preload हिंट की तरह ही, बहुत ज़्यादा preconnect हिंट भी बैंडविथ का इस्तेमाल करते हैं. हालांकि, ऐसा टीएलएस सर्टिफ़िकेट के मामले में होता है. बहुत ज़्यादा ऑरिजिन से पहले से कनेक्ट न करें. इससे बैंडविड्थ की समस्या हो सकती है.
नतीजा
ये दोनों रिसॉर्स हिंट, पेज स्पीड को बेहतर बनाने में मदद करते हैं. ऐसा तब होता है, जब आपको पता हो कि आपको जल्द ही किसी तीसरे पक्ष के डोमेन से कुछ डाउनलोड करना है, लेकिन आपको रिसॉर्स का सटीक यूआरएल नहीं पता है. उदाहरण के लिए, JavaScript लाइब्रेरी, इमेज या फ़ॉन्ट डिस्ट्रिब्यूट करने वाले सीडीएन. सीमाओं का ध्यान रखें. preconnect का इस्तेमाल सिर्फ़ सबसे ज़रूरी संसाधनों के लिए करें. बाकी के लिए dns-prefetch पर भरोसा करें. साथ ही, असल दुनिया में हमेशा इसके असर का आकलन करें.