इस कोडलैब में, आपको प्रीफ़ेच करने की सुविधा को दो तरीकों से लागू करना होगा: <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 (या इससे तेज़) कनेक्शन का इस्तेमाल कर रहा है या नहीं.
- अगर यह शर्त पूरी होती है, तो यह
<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
को प्रीफ़ेच करता है. इन चीज़ों की पुष्टि करने के लिए:
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन दबाएं.
- 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 मिलीसेकंड लगे.