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

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

Demián Renzulli

Jeremy Wagner

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

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

rel=prefetch की मदद से नेविगेशन को बेहतर बनाना

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

<link rel="prefetch" href="/articles/" as="document">

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

यह तय करने के कई तरीके हैं कि किन लिंक को प्रीफ़ेच करना है. सबसे आसान तरीका है कि मौजूदा पेज के पहले लिंक या शुरुआती कुछ लिंक को प्रीफ़ेच किया जाए. ऐसी लाइब्रेरी भी हैं जो ज़्यादा बेहतर तरीकों का इस्तेमाल करती हैं. इनके बारे में इस पोस्ट में आगे बताया गया है.

उपयोग के उदाहरण

अगले पेजों को पहले से लोड करना

जब अगले पेजों के बारे में अनुमान लगाया जा सकता हो, तो एचटीएमएल दस्तावेज़ों को प्रीफ़ेच करें. इससे, किसी लिंक पर क्लिक करने पर, पेज तुरंत लोड हो जाता है.

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

ध्यान दें: eBay ने खोज पेज पर पहले पांच नतीजों के लिए, पेज को पहले से लोड करने की सुविधा लागू की है, ताकि आने वाले समय में पेजों को तेज़ी से लोड किया जा सके. इससे कन्वर्ज़न रेट पर अच्छा असर पड़ा है.

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

स्टैटिक ऐसेट को पहले से लोड करना

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

उदाहरण के लिए, Netflix, React को पहले से लोड करने के लिए, लॉग आउट पेजों पर उपयोगकर्ताओं के बिताए गए समय का फ़ायदा लेता है. इसका इस्तेमाल, उपयोगकर्ताओं के लॉग इन करने के बाद किया जाएगा. इसकी मदद से, उन्होंने आने वाले समय में नेविगेशन के लिए, इंटरैक्टिव होने में लगने वाले समय को 30% तक कम कर दिया.

यह लिखते समय, प्रीफ़ेच किए गए संसाधनों को अलग-अलग ऑरिजिन से दिखाए जाने वाले पेजों के बीच शेयर किया जा सकता है. डबल-की वाला एचटीटीपी कैश शिप होने पर, यह सिर्फ़ टॉप-लेवल नेविगेशन और एक ही ऑरिजिन के सब-रिसॉर्स के लिए काम करेगा. हालांकि, अलग-अलग ऑरिजिन के बीच पहले से फ़ेच किए गए सब-रिसॉर्स का फिर से इस्तेमाल नहीं किया जा सकेगा. इसका मतलब है कि अगर a.com, रिसॉर्स b.com/library.js को पहले से लोड करता है, तो वह c.com कैश मेमोरी में उपलब्ध नहीं होगा. WebKit-आधारित ब्राउज़र जैसे कुछ ब्राउज़र में, सभी तीसरे पक्ष के डोमेन के लिए पहले से ही पार्टिशन कैश और HTML5 स्टोरेज मौजूद होता है.

परफ़ॉर्मेंस मेट्रिक पर स्टैटिक एसेट को पहले से लोड करने का असर, पहले से लोड किए जा रहे संसाधन पर निर्भर करता है:

• इमेज को पहले से लोड करने से, एलसीपी इमेज एलिमेंट के लिए एलसीपी लोड होने में लगने वाला समय काफ़ी कम हो सकता है.
• स्टाइलशीट को पहले से फ़ेच करने से एफ़सीपी और एलसीपी, दोनों को बेहतर बनाया जा सकता है, क्योंकि स्टाइलशीट को डाउनलोड करने में लगने वाला नेटवर्क समय खत्म हो जाएगा. स्टाइलशीट, रेंडर ब्लॉकिंग की सुविधा देती हैं. इसलिए, इन्हें पहले से फ़ेच करने पर, एलसीपी कम हो सकता है. अगर अगले पेज का एलसीपी एलिमेंट, 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

एचटीटीपी हेडर में प्रीफ़ेच के लिए हिंट देने का फ़ायदा यह है कि रिसॉर्स का हिंट ढूंढने के लिए, ब्राउज़र को दस्तावेज़ को पार्स करने की ज़रूरत नहीं पड़ती. इससे कुछ मामलों में, ब्राउज़र की परफ़ॉर्मेंस में थोड़ी-बहुत सुधार हो सकता है.

ध्यान दें: prefetch की सुविधा Safari को छोड़कर, सभी मॉडर्न ब्राउज़र पर काम करती है. XHR अनुरोधों या Fetch API के साथ, Safari के लिए फ़ॉलबैक तकनीक लागू की जा सकती है.

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 का इस्तेमाल करती हैं:

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

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

हुड के तहत प्रीफ़ेच करना

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

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

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

प्रीफ़ेच की गई फ़ाइलों को HTTP कैश या मेमोरी कैश में इस बात पर निर्भर करता है कि संसाधन कैश करने लायक है या नहीं. यह अलग-अलग ब्राउज़र के हिसाब से अलग-अलग समय पर होता है. उदाहरण के लिए, Chrome में रिसॉर्स को पांच मिनट तक सेव रखा जाता है. इसके बाद, रिसॉर्स के लिए सामान्य Cache-Control नियम लागू होते हैं.

नतीजा

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