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

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

Demián Renzulli

Jeremy Wagner

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

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

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

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

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

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

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

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

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

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

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

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

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

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

प्रीफ़ेच करने की प्रोसेस

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

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

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

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

नतीजा

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