प्रीफ़ेच करने के दो तरीके: <link> टैग और एचटीटीपी हेडर

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

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

परफ़ॉर्मेंस का आकलन करना

सबसे पहले, बेसलाइन परफ़ॉर्मेंस तय करें:

  1. प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
  2. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन फ़ुलस्क्रीन दबाएं.
  3. DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
  4. नेटवर्क टैब पर क्लिक करें.

  5. धीमे इंटरनेट कनेक्शन का अनुकरण करने के लिए, थ्रॉटलिंग ड्रॉप-डाउन सूची में, फास्ट 3G चुनें.

  6. प्रॉडक्ट पेज लोड करने के लिए, सैंपल ऐप्लिकेशन में अभी खरीदें पर क्लिक करें.

product-details.html पेज को लोड होने में करीब 600 मिलीसेकंड लगते हैं:

product-details.html के लोड होने में लगने वाले समय को दिखाने वाला नेटवर्क पैनल

नेविगेशन को बेहतर बनाने के लिए, product-details.html पेज को पहले से लोड करने के लिए, लैंडिंग पेज में prefetch टैग डालें:

  • views/index.html फ़ाइल के हेडर में यह <link> एलिमेंट जोड़ें:
<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

      <link rel="prefetch" href="/product-details.html" as="document">
      ...
</head>

as एट्रिब्यूट का इस्तेमाल करना ज़रूरी नहीं है, लेकिन इसका सुझाव दिया जाता है. इससे ब्राउज़र को सही हेडर सेट करने और यह तय करने में मदद मिलती है कि संसाधन पहले से कैश मेमोरी में मौजूद है या नहीं. इस एट्रिब्यूट की वैल्यू के उदाहरणों में ये शामिल हैं: document, script, style, font, image, और अन्य.

यह पुष्टि करने के लिए कि प्रीफ़ेच करने की सुविधा काम कर रही है या नहीं:

  1. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन फ़ुलस्क्रीन दबाएं.
  2. DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
  3. नेटवर्क टैब पर क्लिक करें.

  4. धीमे इंटरनेट कनेक्शन का अनुकरण करने के लिए, थ्रॉटलिंग ड्रॉप-डाउन सूची में, फास्ट 3G चुनें.

  5. 'कैश मेमोरी की सुविधा बंद करें' चेकबॉक्स से सही का निशान हटाएं.

  6. ऐप्लिकेशन को फिर से लोड करें.

अब जब लैंडिंग पेज लोड होता है, तो product-details.html पेज भी लोड होता है, लेकिन सबसे कम प्राथमिकता पर:

प्रीफ़ेच किए गए product-details.html को दिखाने वाला नेटवर्क पैनल.

पेज को पांच मिनट के लिए एचटीटीपी कैश मेमोरी में रखा जाता है. इसके बाद, दस्तावेज़ के लिए सामान्य Cache-Control नियम लागू होते हैं. इस मामले में, product-details.html में cache-control हेडर है, जिसकी वैल्यू public, max-age=0 है. इसका मतलब है कि पेज को कुल पांच मिनट के लिए दिखाया जाता है.

परफ़ॉर्मेंस का फिर से आकलन करना

  1. ऐप्लिकेशन को फिर से लोड करें.
  2. प्रॉडक्ट पेज लोड करने के लिए, सैंपल ऐप्लिकेशन में अभी खरीदें पर क्लिक करें.

नेटवर्क पैनल पर जाएं. शुरुआती नेटवर्क ट्रेस की तुलना में, इसमें दो अंतर हैं:

  • साइज़ कॉलम में "प्रीफ़ेच कैश मेमोरी" दिखता है. इसका मतलब है कि इस संसाधन को नेटवर्क से नहीं, बल्कि ब्राउज़र के कैश मेमोरी से वापस पाया गया था.
  • समय कॉलम से पता चलता है कि दस्तावेज़ को लोड होने में अब करीब 10 मिलीसेकंड लगते हैं.

यह पिछले वर्शन की तुलना में करीब 98% कम है. पिछले वर्शन में, 600 मिलीसेकंड लगते थे.

प्रीफ़ेच कैश मेमोरी से मिला product-details.html दिखाने वाला नेटवर्क पैनल.

ज़्यादा क्रेडिट: prefetch को प्रगतिशील बेहतर बनाने के तरीके के तौर पर इस्तेमाल करना

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

अडैप्टिव प्रीफ़ेच करने की सुविधा लागू करने के लिए, पहले views/index.html से <link rel="prefetch"> टैग हटाएं:

<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
       <link rel="prefetch" href="/product-details.html" as="document">
       ...
    </head>

इसके बाद, public/script.js में यह कोड जोड़ें, ताकि एक फ़ंक्शन तय किया जा सके जो उपयोगकर्ता के तेज़ इंटरनेट कनेक्शन होने पर, prefetch टैग को डाइनैमिक तौर पर इंजेक्ट करता है:

function injectLinkPrefetchIn4g(url) {
    if (window.navigator.connection.effectiveType === '4g') {
        //generate link prefetch tag
        const linkTag = document.createElement('link');
        linkTag.rel = 'prefetch';
        linkTag.href = url;
        linkTag.as = 'document';

        //inject tag in the head of the document
        document.head.appendChild(linkTag);
    }
}

यह फ़ंक्शन इस तरह काम करता है:

  • यह नेटवर्क इन्फ़ॉर्मेशन एपीआई की effectiveType प्रॉपर्टी की जांच करके यह पता लगाता है कि उपयोगकर्ता 4G (या इससे तेज़) कनेक्शन का इस्तेमाल कर रहा है या नहीं.
  • अगर यह शर्त पूरी होती है, तो यह <link> टैग जनरेट करता है. इसमें, हिंट के टाइप के तौर पर prefetch का इस्तेमाल किया जाता है. साथ ही, href एट्रिब्यूट में वह यूआरएल पास किया जाता है जिसे पहले से फ़ेच किया जाएगा. साथ ही, as एट्रिब्यूट में यह दिखाया जाता है कि रिसॉर्स एक एचटीएमएल document है.
  • आखिर में, यह स्क्रिप्ट को पेज के head में डाइनैमिक तौर पर इंजेक्ट करता है.

इसके बाद, क्लोज़िंग </body> टैग से ठीक पहले, views/index.html में script.js जोड़ें:

<body>
      ...
      <script src="/script.js"></script>
</body>

पेज के आखिर में script.js का अनुरोध करने से यह पक्का होता है कि पेज को पार्स और लोड करने के बाद, उसे लोड और लागू किया जाएगा.

यह पक्का करने के लिए कि प्रीफ़ेच करने की सुविधा, मौजूदा पेज के ज़रूरी रिसॉर्स में रुकावट न डाले, window.load इवेंट पर injectLinkPrefetchIn4g() को कॉल करने के लिए यह कोड स्निपेट जोड़ें:

<body>
      ...
      <script src="/script.js"></script>
      <script>
           window.addEventListener('load', () => {
                injectLinkPrefetchIn4g('/product-details.html');
           });
      </script>
</body>

लैंडिंग पेज अब सिर्फ़ तेज़ कनेक्शन पर product-details.html को प्रीफ़ेच करता है. इन चीज़ों की पुष्टि करने के लिए:

  1. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन फ़ुलस्क्रीन दबाएं.
  2. DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
  3. नेटवर्क टैब पर क्लिक करें.
  4. ट्रैफ़िक कम करना ड्रॉप-डाउन सूची में, ऑनलाइन चुनें.
  5. ऐप्लिकेशन को फिर से लोड करें.

आपको नेटवर्क पैनल में product-details.html दिखेगा:

प्रीफ़ेच किए गए product-details.html को दिखाने वाला नेटवर्क पैनल.

इस बात की पुष्टि करने के लिए कि प्रॉडक्ट पेज, धीमे कनेक्शन पर प्रीफ़ेच नहीं किया गया है:

  1. 'स्पीड कम करना' ड्रॉप-डाउन सूची में, धीमा 3G चुनें.
  2. ऐप्लिकेशन को फिर से लोड करें.

नेटवर्क पैनल में, लैंडिंग पेज के सिर्फ़ ऐसे रिसॉर्स शामिल होने चाहिए जिनमें product-details.html न हो:

नेटवर्क पैनल में, product-details.html को पहले से फ़ेच नहीं किया जा रहा है.

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

लैंडिंग पेज के लिए सर्वर रिस्पॉन्स में, style-product.css के लिए एचटीटीपी Link हेडर जोड़ें:

  1. server.js फ़ाइल खोलें और रूट यूआरएल: / के लिए get() हैंडलर ढूंढें.
  2. हैंडलर की शुरुआत में यह लाइन जोड़ें:
app.get('/', function(request, response) {
    response.set('Link', '</style-product.css>; rel=prefetch');
    response.sendFile(__dirname + '/views/index.html');
});
  1. साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन फ़ुलस्क्रीन दबाएं.
  2. DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
  3. नेटवर्क टैब पर क्लिक करें.
  4. ऐप्लिकेशन को फिर से लोड करें.

लैंडिंग पेज लोड होने के बाद, style-product.css को सबसे कम प्राथमिकता पर पहले से फ़ेच किया जाता है:

नेटवर्क पैनल, जिसमें style-product.css को पहले से फ़ेच किया गया है.

प्रॉडक्ट पेज पर जाने के लिए, अभी खरीदें पर क्लिक करें. नेटवर्क पैनल पर एक नज़र डालें:

नेटवर्क पैनल, जिसमें प्रीफ़ेच कैश मेमोरी से मिली style-product.css दिखाई गई है.

style-product.css फ़ाइल को "प्रीफ़ेच कैश" से वापस पाया गया और उसे लोड होने में सिर्फ़ 12 मिलीसेकंड लगे.