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

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

Demián Renzulli

Jeremy Wagner

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

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

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

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

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

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

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

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

बाद के पेजों को प्रीफ़ेच करना

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

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

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

स्थिर एसेट प्रीफ़ेच करना

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

उदाहरण के लिए, Netflix प्रतिक्रिया को प्रीफ़ेच करने के लिए उस समय का फ़ायदा उठाता है जो उपयोगकर्ता लॉग आउट किए गए पेजों पर बिताते हैं. प्रतिक्रिया का इस्तेमाल उपयोगकर्ताओं के लॉग इन करने के बाद किया जाएगा. इसकी वजह से उन्होंने आने वाले समय में नेविगेट करने के लिए, टाइम टू इंटरैक्टिव में 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">

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

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

Quicklink और Guess.js की मदद से, स्मार्ट तरीके से प्रीफ़ेच करना

आप उन लाइब्रेरी की मदद से बेहतर तरीके से प्रीफ़ेच करने की सुविधा लागू कर सकते हैं जो prefetch का इस्तेमाल करती हैं:

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

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

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

रिसॉर्स हिंट, ज़रूरी निर्देश नहीं हैं. यह ब्राउज़र पर निर्भर करता है कि उन्हें कब एक्ज़ीक्यूट करना है और कब करना है.

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

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

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

नतीजा

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