rel=prefetch संसाधन संकेत और इसे इस्तेमाल करने के तरीके के बारे में जानें.
रिसर्च से पता चलता है कि पेज लोड होने में लगने वाले समय को कम करने से, कन्वर्ज़न रेट में बढ़ोतरी होती है. साथ ही, उपयोगकर्ताओं को बेहतर अनुभव मिलता है. अगर आपको इस बारे में जानकारी है कि उपयोगकर्ता आपकी वेबसाइट पर कैसे जाते हैं और वे अगली बार किन पेजों पर जा सकते हैं, तो आप आने वाले समय में नेविगेशन के लोड होने में लगने वाले समय को बेहतर बना सकते हैं. इसके लिए, आपको उन पेजों के लिए पहले से तैयार किए गए संसाधनों को डाउनलोड करना होगा.
इस गाइड में बताया गया है कि <link rel=prefetch> की मदद से इसे कैसे हासिल किया जा सकता है. यह संसाधन से जुड़ा संकेत है, जिसकी मदद से प्रीफ़ेच को आसान और बेहतर तरीके से लागू किया जा सकता है.
rel=prefetch की मदद से नेविगेशन को बेहतर बनाएं
वेब पेज में <link rel=prefetch> जोड़ने से, ब्राउज़र को ऐसे सभी पेज या कुछ रिसॉर्स (जैसे कि स्क्रिप्ट या सीएसएस फ़ाइलें) डाउनलोड करने के लिए कहा जाता है जिनकी उपयोगकर्ता को आने वाले समय में ज़रूरत पड़ सकती है:
<link rel="prefetch" href="/articles/" as="document">
prefetch संकेत उन संसाधनों के लिए ज़्यादा बाइट खर्च करता है जिनकी तुरंत ज़रूरत नहीं होती. इसलिए, इस तकनीक को सोच-समझकर लागू करें. संसाधनों को सिर्फ़ तब प्रीफ़ेच करें, जब आपको भरोसा हो कि उपयोगकर्ताओं को उनकी ज़रूरत होगी. अगर उपयोगकर्ता धीमे इंटरनेट कनेक्शन का इस्तेमाल कर रहे हों, तो उन्हें प्रीफ़ेच न करें. Network Information API की मदद से, इसका पता लगाया जा सकता है.
प्रीफ़ेच किए जाने वाले लिंक कई तरीकों से तय किए जा सकते हैं. सबसे आसान तरीका है, मौजूदा पेज के पहले लिंक या कुछ शुरुआती लिंक को प्रीफ़ेच करना. ऐसी लाइब्रेरी भी हैं जो ज़्यादा जटिल तरीकों का इस्तेमाल करती हैं, जिनके बारे में इस पोस्ट में बाद में बताया गया है.
इस्तेमाल के उदाहरण
बाद के पेजों को प्रीफ़ेच करना
जब बाद के पेजों के बारे में अनुमान लगाया जा सके, तब एचटीएमएल दस्तावेज़ों को प्रीफ़ेच करें, ताकि जब किसी लिंक पर क्लिक किया जाए, तो पेज तुरंत लोड हो जाए.
उदाहरण के लिए, किसी प्रॉडक्ट लिस्टिंग पेज पर, सूची के सबसे लोकप्रिय प्रॉडक्ट के लिए, पेज को प्रीफ़ेच किया जा सकता है. कुछ मामलों में, अगले नेविगेशन का अनुमान लगाना और भी आसान होता है. शॉपिंग कार्ट पेज पर, उपयोगकर्ता के चेकआउट पेज पर जाने की संभावना आम तौर पर ज़्यादा होती है. इसलिए, यह प्रीफ़ेच करने के लिए अच्छा विकल्प होता है.
हालांकि, संसाधनों को प्रीफ़ेच करने के लिए ज़्यादा बैंडविड्थ का इस्तेमाल होता है, लेकिन इससे परफ़ॉर्मेंस की ज़्यादातर मेट्रिक बेहतर हो सकती हैं. फ़र्स्ट बाइट का समय (TTFB) अक्सर बहुत कम होगा, क्योंकि दस्तावेज़ के अनुरोध की वजह से कैश हिट होता है. टीटीएफ़बी कम होगा, इसलिए समय पर आधारित मेट्रिक अक्सर कम होंगी. इनमें सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) और फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) भी शामिल है.
स्टैटिक ऐसेट प्रीफ़ेच करना
स्क्रिप्ट या स्टाइलशीट जैसी स्टैटिक एसेट प्रीफ़ेच करें. ऐसा तब होता है, जब उपयोगकर्ता के बाद के सेक्शन पर जाने का अनुमान लगाया जा सकता है. यह खास तौर पर तब काम आता है, जब उन एसेट को कई पेजों पर शेयर किया जाता है.
उदाहरण के लिए, प्रतिक्रिया को प्रीफ़ेच करने के लिए Netflix, लॉग-आउट किए गए पेजों पर लोगों के बिताए गए समय का इस्तेमाल करता है, जिसका इस्तेमाल उपयोगकर्ताओं के लॉग इन करने के बाद किया जाएगा. इसकी वजह से, उन्होंने आने वाले समय में नेविगेशन के लिए, इंटरैक्टिव के समय में 30% की कमी लाई.
परफ़ॉर्मेंस मेट्रिक पर स्टैटिक ऐसेट को प्रीफ़ेच करने का असर, प्रीफ़ेच किए गए संसाधन पर निर्भर करता है:
- इमेज को प्रीफ़ेच करने से, एलसीपी इमेज एलिमेंट के लिए एलसीपी टाइम काफ़ी कम हो सकता है.
- स्टाइलशीट को प्रीफ़ेच करने से, एफ़सीपी और एलसीपी, दोनों में सुधार हो सकता है. ऐसा करने से, स्टाइलशीट को डाउनलोड करने में नेटवर्क का समय नहीं लगेगा. स्टाइलशीट की मदद से रेंडर होने से रोका जा रहा है, इसलिए प्रीफ़ेच किए जाने पर वे एलसीपी को कम कर सकते हैं. ऐसे मामलों में जहां बाद के पेज का एलसीपी एलिमेंट,
background-imageप्रॉपर्टी के ज़रिए अनुरोध की गई कोई सीएसएस बैकग्राउंड इमेज है, तब भी इमेज को प्रीफ़ेच की गई स्टाइलशीट के डिपेंडेंट रिसॉर्स के रूप में प्रीफ़ेच किया जाएगा. - JavaScript को प्रीफ़ेच करने से, प्रीफ़ेच की गई स्क्रिप्ट की प्रोसेसिंग, तय समय से पहले हो जाएगी. ऐसा तब होगा, जब नेविगेशन के दौरान नेटवर्क को पहले फ़ेच करना ज़रूरी न हो. इसका असर, रिस्पॉन्स मिलने में देरी वाली मेट्रिक, जैसे कि फ़र्स्ट इनपुट डिले (एफ़आईडी) और इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) पर हो सकता है. ऐसे मामलों में जहां JavaScript की मदद से क्लाइंट पर मार्कअप रेंडर किया जाता है, वहां कम रिसॉर्स लोड होने पर भी एलसीपी को बेहतर बनाया जा सकता है. साथ ही, पेज के एलसीपी एलिमेंट वाले मार्कअप की क्लाइंट-साइड रेंडरिंग को जल्दी किया जा सकता है.
- जिन वेब फ़ॉन्ट का इस्तेमाल मौजूदा पेज के लिए पहले से नहीं किया गया है उन्हें प्रीफ़ेच करने से, लेआउट शिफ़्ट खत्म हो सकते हैं. ऐसे मामलों में जहां
font-display: swap;का इस्तेमाल किया जाता है, फ़ॉन्ट के लिए स्वैप पीरियड हटा दिया जाता है. इससे टेक्स्ट तेज़ी से रेंडर होता है और लेआउट शिफ़्ट नहीं होते हैं. अगर आने वाले समय का कोई पेज प्रीफ़ेच किए गए फ़ॉन्ट का इस्तेमाल करता है और उस पेज का एलसीपी एलिमेंट, वेब फ़ॉन्ट का इस्तेमाल करके टेक्स्ट वाला ब्लॉक है, तो उस एलिमेंट का एलसीपी भी तेज़ी से काम करेगा.
मांग पर उपलब्ध JavaScript के हिस्सों को प्रीफ़ेच करना
आपके JavaScript बंडल को कोड-स्प्लिट करने की सुविधा से, शुरुआत में ऐप्लिकेशन के कुछ हिस्सों को ही लोड किया जा सकता है और बाकी को लेज़ी-लोड किया जा सकता है. अगर इस तकनीक का इस्तेमाल किया जा रहा है, तो उन रूट या कॉम्पोनेंट पर प्रीफ़ेच लागू किया जा सकता है जो तुरंत ज़रूरी नहीं हैं, लेकिन जल्द ही अनुरोध किए जाएंगे.
उदाहरण के लिए, अगर आपके पेज पर एक बटन है, जिससे इमोजी पिकर वाला डायलॉग बॉक्स खुलता है, तो इसे तीन JavaScript हिस्सों में बांटा जा सकता है—होम, डायलॉग, और पिकर. होम पेज और डायलॉग बॉक्स को शुरुआत में लोड किया जा सकता है, जबकि पिकर को मांग पर लोड किया जा सकता है. वेबपैक जैसे टूल की मदद से, ब्राउज़र को मांग पर उपलब्ध इन हिस्सों को प्रीफ़ेच करने के निर्देश दिए जा सकते हैं.
rel=prefetch को लागू करने का तरीका
prefetch को लागू करने का सबसे आसान तरीका, दस्तावेज़ के <head> में <link> टैग जोड़ना है:
<head>
...
<link rel="prefetch" href="/articles/" as="document">
...
</head>
as एट्रिब्यूट की मदद से, ब्राउज़र सही हेडर सेट कर पाता है. साथ ही, यह तय करता है कि रिसॉर्स पहले से कैश मेमोरी में मौजूद है या नहीं. इस एट्रिब्यूट की वैल्यू के उदाहरण में ये शामिल हैं: document, script, style, font, image, और अन्य.
Link एचटीटीपी हेडर के ज़रिए भी प्रीफ़ेच शुरू किया जा सकता है:
Link: </css/style.css>; rel=prefetch
एचटीटीपी हेडर में प्रीफ़ेच संकेत के बारे में बताने का एक फ़ायदा यह है कि ब्राउज़र को रिसॉर्स हिंट ढूंढने के लिए, दस्तावेज़ को पार्स करने की ज़रूरत नहीं होती. इससे कुछ मामलों में छोटे सुधार किए जा सकते हैं.
वेबपैक मैजिक टिप्पणियों की मदद से JavaScript मॉड्यूल को प्रीफ़ेच करना
वेबपैक की मदद से, उन रूट या फ़ंक्शन के लिए स्क्रिप्ट को प्रीफ़ेच किया जा सकता है जिन पर आने वाले कुछ उपयोगकर्ता जल्द ही विज़िट करेंगे या इस्तेमाल करेंगे.
नीचे दिया गया कोड स्निपेट लेज़ी-लोड करता है, जो lodash लाइब्रेरी से सॉर्ट करने की सुविधा देता है, ताकि फ़ॉर्म से सबमिट किए जाने वाले नंबरों के समूह को क्रम से लगाया जा सके:
form.addEventListener("submit", e => {
e.preventDefault()
import('lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
इस सुविधा को लोड करने के लिए 'सबमिट करें' इवेंट की इंतज़ार करने के बजाय, आपके पास इस संसाधन को प्रीफ़ेच करने का विकल्प होता है, ताकि उपयोगकर्ता के फ़ॉर्म सबमिट किए जाने तक इसके कैश में उपलब्ध रहने की संभावना बढ़ सके. वेबपैक import() में जादू टिप्पणियों का इस्तेमाल करने की अनुमति देता है:
form.addEventListener("submit", e => {
e.preventDefault()
import(/* webpackPrefetch: true */ 'lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
यह वेबपैक को एचटीएमएल दस्तावेज़ में <link rel="prefetch"> टैग इंजेक्ट करने के लिए कहता है:
<link rel="prefetch" as="script" href="1.bundle.js">
मांग पर डेटा के हिस्सों को प्रीफ़ेच करने के बाद की परफ़ॉर्मेंस में कुछ मामूली अंतर होता है. हालांकि, आम तौर पर सभी उपयोगकर्ताओं को तेज़ी से रिस्पॉन्स मिल सकता है, जो मांग पर आधारित उपयोगकर्ताओं की संख्या पर निर्भर करता है, क्योंकि वे तुरंत उपलब्ध होंगे. इंटरैक्शन किस तरह का है, इसके आधार पर पेज के आईएनपी को फ़ायदा मिल सकता है.
सामान्य तौर पर, प्रीफ़ेच करने से संसाधन की प्राथमिकता पर भी असर पड़ता है. किसी संसाधन को प्रीफ़ेच किए जाने के बाद, उसे सबसे कम प्राथमिकता दी जाती है. इसलिए, प्रीफ़ेच किए गए कोई भी संसाधन, मौजूदा पेज के लिए ज़रूरी संसाधनों के लिए बैंडविड्थ पर असर नहीं डालेंगे.
Quicklink और Guess.js की मदद से, स्मार्ट प्रीफ़ेच करने की सुविधा
prefetch का इस्तेमाल करने वाली लाइब्रेरी के साथ, बेहतर प्रीफ़ेच करने की सुविधा भी लागू की जा सकती है:
- Quicklink इंटरसेक्शन ऑब्ज़र्वर एपीआई का इस्तेमाल करके, यह पता लगाता है कि लिंक, व्यूपोर्ट में कब आते हैं और काम न करने पर लिंक किए गए संसाधनों को प्रीफ़ेच करता है. बोनस: क्विकलिंक का वज़न 1 KB से कम होता है!
- Guess.js अनुमानित मॉडल बनाने के लिए, आंकड़ों की रिपोर्ट का इस्तेमाल करती है. इसका इस्तेमाल सिर्फ़ उस चीज़ के smartly प्रीफ़ेच करने के लिए किया जाता है जिसकी ज़रूरत उपयोगकर्ता को है.
अगर उपयोगकर्ता धीमे नेटवर्क का इस्तेमाल कर रहा है या Save-Data चालू है, तो उसे प्रीफ़ेच करने से रोकने के लिए, Quicklink और Guess.js दोनों नेटवर्क जानकारी एपीआई का इस्तेमाल करते हैं.
हुड के तहत प्रीफ़ेच करना
रिसॉर्स संकेत ज़रूरी नहीं हैं. यह ब्राउज़र पर निर्भर करता है कि उन्हें कब और कैसे लागू किया जाए.
आप एक ही पेज पर कई बार प्रीफ़ेच कर सकते हैं. ब्राउज़र सभी संकेतों को एक सूची में जोड़ देता है और हर संसाधन के लिए अनुरोध काम नहीं करता होने पर करता है. Chrome में, अगर प्रीफ़ेच लोड नहीं होता है और उपयोगकर्ता अपने मुताबिक प्रीफ़ेच संसाधन पर जाता है, तो ब्राउज़र, नेविगेशन के तौर पर इन-फ़्लाइट लोड को चुन लेता है. हालांकि, दूसरे ब्राउज़र वेंडर इसे अलग तरीके से लागू कर सकते हैं.
प्रीफ़ेच करने की प्रोसेस 'सबसे कम' प्राथमिकता पर होती है. इसलिए, प्रीफ़ेच किए गए संसाधन, बैंडविड्थ के लिए मौजूदा पेज में ज़रूरी संसाधनों के साथ मुकाबला नहीं करते.
प्रीफ़ेच की गई फ़ाइलें ब्राउज़र के हिसाब से अलग-अलग समय तक, एचटीटीपी कैश या मेमोरी कैश (इस बात पर निर्भर करती हैं कि रिसॉर्स को कैश मेमोरी में सेव किया जा सकता है या नहीं) में सेव किया जाता है. उदाहरण के लिए, Chrome में रिसॉर्स पांच मिनट तक सेव रहते हैं. इसके बाद, रिसॉर्स के लिए सामान्य Cache-Control नियम लागू होते हैं.
नतीजा
prefetch का इस्तेमाल करने से, आने वाले समय में नेविगेशन के लिए लोड होने में लगने वाले समय में काफ़ी सुधार हो सकता है. साथ ही, इससे पेज फटाफट लोड होने लगते हैं. prefetch, मॉडर्न ब्राउज़र में बड़े पैमाने पर काम करता है. इसलिए, यह एक आकर्षक तकनीक है, जिससे कई उपयोगकर्ताओं को बेहतर नेविगेशन का अनुभव मिलता है. इस तकनीक के लिए ऐसी बाइट लोड करनी पड़ती हैं जो शायद इस्तेमाल न हों. इसलिए, इसका इस्तेमाल करते समय सावधानी बरतें. इसे ज़रूरत पड़ने पर ही इस्तेमाल करें. बेहतर होगा कि सिर्फ़ तेज़ स्पीड वाले नेटवर्क पर ही ऐसा करें.