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