आने वाले समय में नेविगेशन की रफ़्तार बढ़ाने के लिए, संसाधनों को प्रीफ़ेच करें

rel=prefetch संसाधन के संकेत और उसका इस्तेमाल करने के तरीके के बारे में जानें.

Demián Renzulli
Jeremy Wagner
Jeremy Wagner
GitHub LinkedIn

पब्लिश किया गया: 12 सितंबर, 2019, पिछली बार अपडेट किया गया: 8 फ़रवरी, 2025

रिसर्च से पता चलता है कि पेज के तेज़ी से लोड होने से कन्वर्ज़न रेट बढ़ता है और उपयोगकर्ता अनुभव बेहतर होता है. अगर आपको यह जानकारी है कि उपयोगकर्ता आपकी वेबसाइट पर कैसे आते हैं और वे अगले कौनसे पेजों पर जा सकते हैं, तो उन पेजों के लिए संसाधनों को पहले से डाउनलोड करके, आने वाले समय में नेविगेशन के लोड होने में लगने वाले समय को बेहतर बनाया जा सकता है.

इस गाइड में, <link rel=prefetch> की मदद से, प्रीफ़ेच करने की सुविधा को असरदार तरीके से लागू करने का तरीका बताया गया है.

rel=prefetch की मदद से साइट की परफ़ॉर्मेंस को बेहतर बनाना

किसी वेब पेज में <link rel=prefetch> जोड़ने से, ब्राउज़र को कुछ रिसॉर्स (जैसे, स्क्रिप्ट या सीएसएस फ़ाइलें) डाउनलोड करने के लिए कहा जाता है. इन रिसॉर्स की उपयोगकर्ता को आने वाले समय में ज़रूरत पड़ सकती है:

<link rel="prefetch" href="/css/styles.css">

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="//css/styles.css">
  ...
</head>

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" href="1.bundle.js">

मांग पर मिलने वाले चंक को पहले से लोड करने से परफ़ॉर्मेंस को मिलने वाले फ़ायदे थोड़े अलग होते हैं. हालांकि, आम तौर पर, आपको उन इंटरैक्शन के लिए तेज़ी से जवाब दिख सकते हैं जो मांग पर मिलने वाले चंक पर निर्भर करते हैं. ऐसा इसलिए, क्योंकि वे तुरंत उपलब्ध हो जाएंगे. इंटरैक्शन के टाइप के आधार पर, इससे पेज के आईएनपी को फ़ायदा मिल सकता है.

आम तौर पर, संसाधनों को प्राथमिकता देने के लिए भी प्रीफ़ेचिंग का इस्तेमाल किया जाता है. जब किसी संसाधन को पहले से फ़ेच किया जाता है, तो उसे सबसे कम प्राथमिकता दी जाती है. इसलिए, प्रीफ़ेच किए गए किसी भी रिसॉर्स को मौजूदा पेज के ज़रूरी रिसॉर्स के लिए बैंडविड्थ नहीं मिलेगी.

prefetch का इस्तेमाल करने वाली लाइब्रेरी के साथ, बेहतर तरीके से डेटा लोड करने की सुविधा भी लागू की जा सकती है:

  • quicklink, Intersection Observer API का इस्तेमाल करके यह पता लगाता है कि लिंक व्यूपोर्ट में कब आते हैं. साथ ही, इडल टाइम के दौरान लिंक किए गए रिसॉर्स को पहले से लोड करता है. बोनस: क्विकलिंक का साइज़ 1 केबी से कम है!
  • Guess.js, अनुमानित मॉडल बनाने के लिए Analytics रिपोर्ट का इस्तेमाल करता है. इस मॉडल का इस्तेमाल, सिर्फ़ उस कॉन्टेंट को स्मार्ट तरीके से पहले से लोड करने के लिए किया जाता है जिसकी उपयोगकर्ता को ज़रूरत पड़ सकती है.

अगर उपयोगकर्ता का नेटवर्क धीमा है या उसने Save-Data चालू किया है, तो क्विकलिंक और Guess.js, दोनों नेटवर्क की जानकारी देने वाले एपीआई का इस्तेमाल करके, पेज को पहले से लोड होने से रोकते हैं.

प्रीफ़ेच की सुविधा के बारे में जानकारी

संसाधन के बारे में दिए गए संकेत, ज़रूरी निर्देश नहीं होते. यह ब्राउज़र पर निर्भर करता है कि उन्हें कब और कैसे लागू किया जाए.

एक ही पेज पर, प्रीफ़ेच का इस्तेमाल कई बार किया जा सकता है. ब्राउज़र, सभी हिंट को सूची में जोड़ता है और आइडल होने पर हर संसाधन का अनुरोध करता है. Chrome में, अगर कोई प्रीफ़ेच लोड नहीं हुआ है और उपयोगकर्ता प्रीफ़ेच किए गए रिसॉर्स पर नेविगेट करता है, तो ब्राउज़र, इन-फ़्लाइट लोड को नेविगेशन के तौर पर चुनता है. हालांकि, अन्य ब्राउज़र वेंडर इसे अलग तरीके से लागू कर सकते हैं.

प्रीफ़ेचिंग, 'सबसे कम' प्राथमिकता पर होती है. इसलिए, प्रीफ़ेच किए गए रिसॉर्स, मौजूदा पेज में ज़रूरी रिसॉर्स के साथ बैंडविड्थ के लिए मुकाबला नहीं करते.

अगर रिसॉर्स को कैश मेमोरी में सेव किया जा सकता है, तो पहले से फ़ेच की गई फ़ाइलों को एचटीटीपी कैश मेमोरी में सेव किया जाता है. ऐसा न होने पर, फ़ाइलों को खारिज कर दिया जाएगा और उनका इस्तेमाल नहीं किया जाएगा.

नतीजा

prefetch का इस्तेमाल करके, आने वाले समय में ज़रूरी संसाधनों को पहले से डाउनलोड करके, किसी साइट की वेब परफ़ॉर्मेंस को बेहतर बनाया जा सकता है. prefetch ज़्यादातर आधुनिक ब्राउज़र पर काम करता है. इस तकनीक के लिए, अतिरिक्त बाइट लोड करने की ज़रूरत होती है. हो सकता है कि इनका इस्तेमाल न किया जाए. इसलिए, इसका इस्तेमाल सावधानी से करें. सिर्फ़ ज़रूरत पड़ने पर इसका इस्तेमाल करें. आम तौर पर, इसका इस्तेमाल सिर्फ़ तेज़ नेटवर्क पर करें.