इस कोडलैब में, प्रीफ़ेच किए जाने की प्रोसेस दो तरीकों से लागू की जाएगी: <link rel="prefetch"> के साथ और एचटीटीपी Link हेडर के साथ.
सैंपल ऐप्लिकेशन ऐसी वेबसाइट है जिसका प्रमोशन लैंडिंग पेज, दुकान में सबसे ज़्यादा बिकने वाली टी-शर्ट पर खास छूट देता है. लैंडिंग पेज किसी एक प्रॉडक्ट से जुड़ा होता है. इसलिए, यह माना जा सकता है कि ज़्यादातर लोग प्रॉडक्ट की जानकारी वाले पेज पर जाएंगे. इससे प्रॉडक्ट पेज, लैंडिंग पेज पर प्रीफ़ेच करने के लिए बेहतर विकल्प बन जाता है.
परफ़ॉर्मेंस का आकलन करना
सबसे पहले, बेसलाइन की परफ़ॉर्मेंस तय करें:
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं. - DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
नेटवर्क टैब पर क्लिक करें.
थ्रॉटलिंग ड्रॉप-डाउन सूची में, फ़ास्ट 3G को चुनें, ताकि धीमे कनेक्शन को सिम्युलेट किया जा सके.
प्रॉडक्ट पेज लोड करने के लिए, सैंपल ऐप्लिकेशन में अभी खरीदें पर क्लिक करें.
product-details.html पेज को लोड होने में करीब 600 मि॰से॰ का समय लगता है:
प्रॉडक्ट पेज को <link rel="prefetch"> से प्रीफ़ेच करें
नेविगेशन को बेहतर बनाने के लिए, लैंडिंग पेज में prefetch टैग डालें, ताकि product-details.html पेज को प्रीफ़ेच किया जा सके:
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, और अन्य.
यह पुष्टि करने के लिए कि प्रीफ़ेच करने की सुविधा काम कर रही है या नहीं:
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं.
- DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
नेटवर्क टैब पर क्लिक करें.
थ्रॉटलिंग ड्रॉप-डाउन सूची में, फ़ास्ट 3G को चुनें, ताकि धीमे कनेक्शन को सिम्युलेट किया जा सके.
कैश मेमोरी बंद करें चेकबॉक्स से सही का निशान हटाएं.
ऐप्लिकेशन को फिर से लोड करें.
अब लैंडिंग पेज लोड होने पर, product-details.html पेज भी लोड होगा, लेकिन सबसे कम प्राथमिकता पर:
पेज को पांच मिनट तक एचटीटीपी कैश मेमोरी में रखा जाता है. इसके बाद, दस्तावेज़ के सामान्य Cache-Control नियम लागू होते हैं. इस मामले में, product-details.html में public, max-age=0 की वैल्यू के साथ cache-control हेडर है. इसका मतलब है कि पेज को कुल पांच मिनट के लिए सेव रखा जाता है.
परफ़ॉर्मेंस का फिर से आकलन करना
- ऐप्लिकेशन को फिर से लोड करें.
- प्रॉडक्ट पेज लोड करने के लिए, सैंपल ऐप्लिकेशन में अभी खरीदें पर क्लिक करें.
नेटवर्क पैनल पर एक नज़र डालें. शुरुआती नेटवर्क ट्रेस की तुलना में दो अंतर होते हैं:
- साइज़ कॉलम में, "प्रीफ़ेच कैश मेमोरी" दिखती है. इसका मतलब है कि यह संसाधन, नेटवर्क के बजाय ब्राउज़र की कैश मेमोरी से लिया गया था.
- समय कॉलम दिखाता है कि दस्तावेज़ को लोड होने में करीब 10 मि॰से॰ का समय लगेगा.
यह पिछले वर्शन की तुलना में करीब 98% कम है. इसमें करीब 600 मि॰से॰ का समय लगा.
अतिरिक्त क्रेडिट: prefetch का इस्तेमाल प्रोग्रेसिव एनहैंसमेंट के तौर पर करें
प्रीफ़ेच करने की सुविधा को, तेज़ कनेक्शन पर ब्राउज़ करने वाले उपयोगकर्ताओं के लिए, बेहतर तरीके से लागू करने के तौर पर सबसे सही तरीके से लागू किया जाता है. नेटवर्क की शर्तों की जांच करने और डाइनैमिक रूप से इंजेक्ट किए गए प्रीफ़ेच टैग के आधार पर, Network Information API का इस्तेमाल किया जा सकता है. इस तरह, डेटा की खपत को कम किया जा सकता है. साथ ही, धीमे या महंगे डेटा प्लान का इस्तेमाल करने वाले उपयोगकर्ताओं की लागत कम की जा सकती है.
अडैप्टिव प्रीफ़ेच लागू करने के लिए, सबसे पहले 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);
}
}
फ़ंक्शन इस तरह काम करता है:
- यह Network Information API की effectiveType प्रॉपर्टी की जांच करके पता लगाता है कि उपयोगकर्ता 4G (या तेज़) कनेक्शन का इस्तेमाल कर रहा है या नहीं.
- अगर यह शर्त पूरी हो जाती है, तो यह संकेत के टाइप के तौर पर
prefetchके साथ<link>टैग जनरेट करता है. साथ ही, उस यूआरएल को पास करता है जिसेhrefएट्रिब्यूट में प्रीफ़ेच किया जाएगा. साथ ही, यह बताता है किasएट्रिब्यूट में, रिसॉर्स एक एचटीएमएलdocumentहै. - आखिर में, यह पेज के
headमें डाइनैमिक तरीके से स्क्रिप्ट इंजेक्ट करता है.
इसके बाद, </body> टैग को बंद करने से ठीक पहले, script.js को views/index.html में जोड़ें:
<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 को प्रीफ़ेच करता है. इसकी पुष्टि करने के लिए:
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं.
- DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
- नेटवर्क टैब पर क्लिक करें.
- थ्रटलिंग ड्रॉप-डाउन सूची में, ऑनलाइन चुनें.
- ऐप्लिकेशन को फिर से लोड करें.
आपको नेटवर्क पैनल में product-details.html दिखाई देगा:
यह पुष्टि करने के लिए कि प्रॉडक्ट पेज, धीमे इंटरनेट कनेक्शन पर प्रीफ़ेच नहीं किया गया है:
- थ्रॉटलिंग ड्रॉप-डाउन सूची में, धीमा 3G चुनें.
- ऐप्लिकेशन को फिर से लोड करें.
नेटवर्क पैनल में सिर्फ़ ऐसे लैंडिंग पेज के संसाधन होने चाहिए जिनमें product-details.html न हो:
एचटीटीपी Link हेडर की मदद से, प्रॉडक्ट पेज के लिए स्टाइलशीट को प्रीफ़ेच करें
एचटीटीपी Link हेडर का इस्तेमाल, link टैग के जैसे रिसॉर्स को प्रीफ़ेच करने के लिए किया जा सकता है. किसी एक या दूसरे का इस्तेमाल कब करना है, यह फ़ैसला ज़्यादातर आपकी पसंद पर निर्भर करता है, क्योंकि परफ़ॉर्मेंस में फ़र्क़ बहुत कम होता है. इस मामले में, इसका इस्तेमाल प्रॉडक्ट पेज की मुख्य सीएसएस को प्रीफ़ेच करने के लिए किया जाएगा, ताकि रेंडरिंग को और बेहतर बनाया जा सके.
लैंडिंग पेज के लिए सर्वर रिस्पॉन्स में style-product.css के लिए एक एचटीटीपी Link हेडर जोड़ें:
server.jsफ़ाइल खोलें और रूट यूआरएल के लिएget()हैंडलर खोजें:/.- हैंडलर की शुरुआत में यह लाइन जोड़ें:
app.get('/', function(request, response) {
response.set('Link', '</style-product.css>; rel=prefetch');
response.sendFile(__dirname + '/views/index.html');
});
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं.
- DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
- नेटवर्क टैब पर क्लिक करें.
- ऐप्लिकेशन को फिर से लोड करें.
लैंडिंग पेज लोड होने के बाद, style-product.css को अब सबसे कम प्राथमिकता पर प्रीफ़ेच कर दिया जाएगा:
प्रॉडक्ट पेज पर जाने के लिए, अभी खरीदें पर क्लिक करें. नेटवर्क पैनल पर एक नज़र डालें:
style-product.css फ़ाइल को " प्रीफ़ेच कैश मेमोरी" से वापस लाया गया है और इसे लोड होने में सिर्फ़ 12 मि॰से॰ लगे.