इस कोडलैब में, प्रीफ़ेच करने की प्रोसेस को दो तरीकों से लागू किया जाएगा: <link rel="prefetch"> के साथ और एचटीटीपी Link हेडर के साथ.
सैंपल ऐप्लिकेशन एक वेबसाइट है. इसमें प्रमोशन वाला लैंडिंग पेज है, जिसमें दुकान की सबसे ज़्यादा बिकने वाली टी-शर्ट पर खास छूट दी गई है. लैंडिंग पेज किसी एक प्रॉडक्ट से लिंक होता है. इसलिए, यह अनुमान लगाया जा सकता है कि ज़्यादातर उपयोगकर्ता, प्रॉडक्ट के बारे में जानकारी वाले पेज पर जाएंगे. इससे प्रॉडक्ट पेज को लैंडिंग पेज पर प्रीफ़ेच करने के लिए एक बेहतरीन विकल्प बना दिया जाता है.
परफ़ॉर्मेंस का आकलन करना
सबसे पहले बेसलाइन परफ़ॉर्मेंस तय करें:
- प्रोजेक्ट में बदलाव करने के लिए, बदलाव करने के लिए रीमिक्स करें पर क्लिक करें.
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद,
फ़ुलस्क्रीन
दबाएं. - DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
नेटवर्क टैब पर क्लिक करें.
धीमे इंटरनेट कनेक्शन का अनुकरण करने के लिए, थ्रॉटलिंग ड्रॉप-डाउन सूची में, फास्ट 3G चुनें.
प्रॉडक्ट पेज लोड करने के लिए, सैंपल ऐप्लिकेशन में अभी खरीदें पर क्लिक करें.
product-details.html पेज लोड होने में करीब 600 मिलीसेकंड लगते हैं:
<link rel="prefetch"> की मदद से प्रॉडक्ट पेज को पहले से लोड करना
नेविगेशन को बेहतर बनाने के लिए, 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, और अन्य.
यह पुष्टि करने के लिए कि प्रीफ़ेच करने की सुविधा काम कर रही है या नहीं:
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.
- DevTools खोलने के लिए, `Control+Shift+J` दबाएं. Mac पर, `Command+Option+J` दबाएं.
नेटवर्क टैब पर क्लिक करें.
धीमे इंटरनेट कनेक्शन का अनुकरण करने के लिए, थ्रॉटलिंग ड्रॉप-डाउन सूची में, फास्ट 3G चुनें.
'कैश मेमोरी की सुविधा बंद करें' चेकबॉक्स से सही का निशान हटाएं.
ऐप्लिकेशन को फिर से लोड करें.
अब जब लैंडिंग पेज लोड होता है, तो product-details.html पेज भी लोड होता है, लेकिन सबसे कम प्राथमिकता पर:
पेज को पांच मिनट तक एचटीटीपी कैश में रखा जाता है. इसके बाद, दस्तावेज़ के लिए सामान्य Cache-Control नियम लागू होते हैं. इस मामले में, product-details.html में cache-control हेडर है, जिसकी वैल्यू public, max-age=0 है. इसका मतलब है कि पेज को कुल पांच मिनट के लिए दिखाया जाता है.
परफ़ॉर्मेंस का फिर से आकलन करना
- ऐप्लिकेशन को फिर से लोड करें.
- प्रॉडक्ट पेज लोड करने के लिए, सैंपल ऐप्लिकेशन में अभी खरीदें पर क्लिक करें.
नेटवर्क पैनल पर एक नज़र डालें. शुरुआती नेटवर्क ट्रेस की तुलना में, इसमें दो अंतर हैं:
- साइज़ कॉलम में "प्रीफ़ेच कैश मेमोरी" दिखता है. इसका मतलब है कि इस संसाधन को नेटवर्क से नहीं, बल्कि ब्राउज़र के कैश मेमोरी से वापस पाया गया था.
- समय कॉलम से पता चलता है कि दस्तावेज़ को लोड होने में अब करीब 10 मिलीसेकंड लगते हैं.
यह पिछले वर्शन की तुलना में करीब 98% कम है. पिछले वर्शन में, 600 मिलीसेकंड लगते थे.
ज़्यादा क्रेडिट: 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 (या इससे तेज़) कनेक्शन का इस्तेमाल कर रहा है या नहीं.
- अगर वह शर्त पूरी हो जाती है, तो यह संकेत के टाइप के तौर पर
prefetchवाला एक<link>टैग जनरेट करती है. साथ ही, उस यूआरएल को पास करती है जिसे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 को पहले से लोड करता है. इसकी पुष्टि करने के लिए:
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद,
फ़ुलस्क्रीन
दबाएं.
- 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 मि॰से॰ लगे.