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