इस कोडलैब में, कुछ रिसॉर्स को प्रीलोड और प्रीफ़ेच करके, इस वेब पेज की परफ़ॉर्मेंस को बेहतर बनाया गया है:
मापें
ऑप्टिमाइज़ेशन जोड़ने से पहले, वेबसाइट की परफ़ॉर्मेंस का आकलन करें.
- साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन
दबाएं.
Glitch के लाइव वर्शन पर, Lighthouse परफ़ॉर्मेंस ऑडिट (Lighthouse > विकल्प > परफ़ॉर्मेंस) चलाएं. इसके बारे में ज़्यादा जानने के लिए, Lighthouse की मदद से परफ़ॉर्मेंस बेहतर बनाने के अवसर ढूंढना लेख पढ़ें.
Lighthouse, देर से फ़ेच किए गए किसी संसाधन के लिए, ऑडिट के फ़ेल होने की यह जानकारी दिखाता है:
- DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
- नेटवर्क टैब पर क्लिक करें.
main.css फ़ाइल को एचटीएमएल दस्तावेज़ में मौजूद लिंक एलिमेंट (<link>) से फ़ेच नहीं किया जाता है. हालांकि, एक अलग JavaScript फ़ाइल, fetch-css.js, window.onLoad इवेंट के बाद लिंक एलिमेंट को DOM से अटैच करती है. इसका मतलब है कि ब्राउज़र, JS फ़ाइल को पार्स और एक्ज़ीक्यूट करने के बाद ही फ़ाइल को फ़ेच करता है. इसी तरह, main.css में तय किया गया वेब फ़ॉन्ट (K2D.woff2) सिर्फ़ तब फ़ेच किया जाता है, जब सीएसएस फ़ाइल डाउनलोड हो जाती है.
अहम अनुरोध चेन से पता चलता है कि ब्राउज़र, किन संसाधनों को प्राथमिकता देता है और उन्हें किस क्रम में फ़ेच करता है. इस वेब पेज के लिए, फ़िलहाल यह ऐसा दिखता है:
├─┬ / (initial HTML file)
└── fetch-css.js
└── main.css
└── K2D.woff2
सीएसएस फ़ाइल, अनुरोध चेन के तीसरे लेवल पर है. इसलिए, Lighthouse ने इसे देर से पता चला संसाधन के तौर पर पहचाना है.
ज़रूरी संसाधनों को प्रीलोड करना
main.css फ़ाइल एक ज़रूरी ऐसेट है. पेज लोड होते ही इसकी ज़रूरत होती है. इस तरह के ज़रूरी रिसॉर्स के लिए, लिंक प्रीलोड टैग का इस्तेमाल करें. ये रिसॉर्स आपके ऐप्लिकेशन में देर से फ़ेच किए जाते हैं. इससे ब्राउज़र को यह जानकारी मिलती है कि दस्तावेज़ के हेड में लिंक एलिमेंट जोड़कर, इसे जल्द डाउनलोड किया जा सकता है.
इस ऐप्लिकेशन के लिए प्रीलोड टैग जोड़ें:
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
</head>
as एट्रिब्यूट का इस्तेमाल यह पता लगाने के लिए किया जाता है कि किस तरह के संसाधन को फ़ेच किया जा रहा है. साथ ही, as="style" का इस्तेमाल स्टाइलशीट फ़ाइलों को प्रीलोड करने के लिए किया जाता है.
ऐप्लिकेशन को फिर से लोड करें और DevTools में नेटवर्क पैनल देखें.
ध्यान दें कि ब्राउज़र, सीएसएस फ़ाइल को JavaScript से पहले फ़ेच करता है. JavaScript, सीएसएस फ़ाइल को फ़ेच करने के लिए ज़िम्मेदार होती है. प्रीलोड करने की सुविधा की मदद से, ब्राउज़र को यह पता होता है कि संसाधन को पहले से फ़ेच करना है. ऐसा इसलिए, क्योंकि ब्राउज़र को लगता है कि यह वेब पेज के लिए ज़रूरी है.
अगर प्रीलोडिंग का इस्तेमाल सही तरीके से नहीं किया जाता है, तो इससे परफ़ॉर्मेंस पर असर पड़ सकता है. ऐसा इसलिए होता है, क्योंकि यह उन संसाधनों के लिए गैर-ज़रूरी अनुरोध करता है जिनका इस्तेमाल नहीं किया जाता है. इस ऐप्लिकेशन में, details.css एक और सीएसएस फ़ाइल है. यह प्रोजेक्ट के रूट में मौजूद है, लेकिन इसका इस्तेमाल किसी दूसरे /details route के लिए किया जाता है. प्रीलोड का गलत तरीके से इस्तेमाल करने का उदाहरण दिखाने के लिए, इस संसाधन के लिए भी प्रीलोड हिंट जोड़ें.
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
<link rel="preload" href="details.css" as="style">
</head>
ऐप्लिकेशन को फिर से लोड करें और नेटवर्क पैनल देखें.
details.css को वापस पाने का अनुरोध किया गया है, जबकि वेब पेज इसका इस्तेमाल नहीं कर रहा है.
जब कोई प्रीलोड किया गया संसाधन, पेज के लोड होने के कुछ सेकंड के अंदर इस्तेमाल नहीं किया जाता है, तो Chrome, Console पैनल में एक चेतावनी दिखाता है.
इस चेतावनी का इस्तेमाल करके यह पता लगाएं कि क्या आपके पास ऐसे प्रीलोड किए गए संसाधन हैं जिनका इस्तेमाल आपका वेब पेज तुरंत नहीं कर रहा है. अब इस पेज के लिए, गैर-ज़रूरी प्रीलोड लिंक को हटाया जा सकता है.
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
<link rel="preload" href="details.css" as="style">
</head>
as एट्रिब्यूट के लिए इस्तेमाल की जाने वाली सही वैल्यू के साथ फ़ेच किए जा सकने वाले सभी तरह के संसाधनों की सूची के लिए, MDN का प्रीलोडिंग से जुड़ा लेख पढ़ें.
आने वाले समय में इस्तेमाल होने वाले संसाधनों को पहले से फ़ेच करना
प्रीफ़ेच, ब्राउज़र के लिए एक और निर्देश है. इसका इस्तेमाल, किसी ऐसी ऐसेट के लिए अनुरोध करने के लिए किया जा सकता है जिसका इस्तेमाल किसी दूसरे नेविगेशन रूट के लिए किया जाता है. हालांकि, इसकी प्राथमिकता, मौजूदा पेज के लिए ज़रूरी अन्य अहम ऐसेट की तुलना में कम होती है.
इस वेबसाइट में, इमेज पर क्लिक करने से आपको किसी दूसरे details/
रास्ते पर ले जाया जाता है.
एक अलग सीएसएस फ़ाइल, details.css में इस सामान्य पेज के लिए ज़रूरी सभी स्टाइल शामिल हैं. इस संसाधन को प्रीफ़ेच करने के लिए, index.html में लिंक एलिमेंट जोड़ें.
<head>
<!-- ... -->
<link rel="prefetch" href="details.css">
</head>
यह समझने के लिए कि इससे फ़ाइल का अनुरोध कैसे ट्रिगर होता है, DevTools में नेटवर्क पैनल खोलें और कैश मेमोरी बंद करें विकल्प से सही का निशान हटाएं.
ऐप्लिकेशन को फिर से लोड करें. देखें कि अन्य सभी फ़ाइलें फ़ेच होने के बाद, details.css के लिए बहुत कम प्राथमिकता वाला अनुरोध किया गया है.
DevTools खुला होने पर, वेबसाइट पर मौजूद इमेज पर क्लिक करें. इससे आप details पेज पर पहुंच जाएंगे.
details.html में लिंक एलिमेंट का इस्तेमाल करके details.css को फ़ेच किया जाता है. इसलिए, उम्मीद के मुताबिक संसाधन के लिए अनुरोध किया जाता है.
इसकी जानकारी देखने के लिए, DevTools में details.css नेटवर्क अनुरोध पर क्लिक करें. आपको दिखेगा कि फ़ाइल को ब्राउज़र की डिस्क कैश मेमोरी से वापस लाया गया है.
प्रीफ़ेच, ब्राउज़र के आइडल टाइम का फ़ायदा उठाकर, किसी दूसरे पेज के लिए ज़रूरी संसाधन का अनुरोध पहले ही कर देता है. इससे, ब्राउज़र को ऐसेट को कैश मेमोरी में सेव करने और ज़रूरत पड़ने पर उसे कैश मेमोरी से दिखाने की अनुमति मिलती है. इससे, नेविगेशन के अनुरोधों को तेज़ी से पूरा किया जा सकता है.
webpack की मदद से पहले से लोड करना और प्रीफ़ेच करना
कोड को अलग-अलग करके JavaScript पेलोड कम करें पोस्ट में, डाइनैमिक इंपोर्ट का इस्तेमाल करके बंडल को कई हिस्सों में बांटने के बारे में बताया गया है. इसे एक ऐसे सामान्य ऐप्लिकेशन की मदद से दिखाया गया है जो फ़ॉर्म सबमिट किए जाने पर, Lodash से किसी मॉड्यूल को डाइनैमिक तरीके से इंपोर्ट करता है.
इस ऐप्लिकेशन के लिए Glitch को यहां ऐक्सेस किया जा सकता है.
यहां दिया गया कोड ब्लॉक, src/index.js, में मौजूद है. यह बटन पर क्लिक करने पर, डाइनैमिक तरीके से इंपोर्ट करने के लिए ज़िम्मेदार है.
form.addEventListener("submit", e => {
e.preventDefault()
import('lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
बंडल को अलग-अलग हिस्सों में बांटने से, पेज लोड होने में लगने वाला समय कम हो जाता है. ऐसा इसलिए होता है, क्योंकि बंडल का शुरुआती साइज़ कम हो जाता है. webpack का 4.6.0 वर्शन, डाइनैमिक तरीके से इंपोर्ट किए गए चंक को प्रीलोड या प्रीफ़ेच करने की सुविधा देता है. इस ऐप्लिकेशन को उदाहरण के तौर पर इस्तेमाल करके, ब्राउज़र के आइडल टाइम पर lodash तरीके को प्रीफ़ेच किया जा सकता है. जब कोई उपयोगकर्ता बटन दबाता है, तो संसाधन को फ़ेच करने में कोई देरी नहीं होती.
किसी खास हिस्से को पहले से फ़ेच करने के लिए, डाइनैमिक इंपोर्ट में webpackPrefetch comment पैरामीटर का इस्तेमाल करें.
यहां बताया गया है कि यह सुविधा इस ऐप्लिकेशन में कैसी दिखेगी.
form.addEventListener("submit", e => {
e.preventDefault()
import(/* webpackPrefetch: true */ 'lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
ऐप्लिकेशन फिर से लोड होने के बाद, webpack दस्तावेज़ के हेड में संसाधन के लिए प्रीफ़ेच टैग डालता है. इसे DevTools के Elements पैनल में देखा जा सकता है.
नेटवर्क पैनल में अनुरोधों को देखने से यह भी पता चलता है कि इस चंक को कम प्राथमिकता के साथ फ़ेच किया जाता है. ऐसा तब होता है, जब सभी अन्य संसाधनों का अनुरोध किया जा चुका हो.
हालांकि, इस उदाहरण के लिए प्रीफ़ेच ज़्यादा सही है, लेकिन Webpack, डाइनैमिक तरीके से इंपोर्ट किए गए चंक को प्रीलोड करने की सुविधा भी देता है.
import(/* webpackPreload: true */ 'module')
नतीजा
इस कोडलैब की मदद से, आपको यह अच्छी तरह से समझ आ जाएगा कि कुछ ऐसेट को प्रीलोड या प्रीफ़ेच करने से, आपकी साइट पर उपयोगकर्ता अनुभव को कैसे बेहतर बनाया जा सकता है. यह बताना ज़रूरी है कि इन तकनीकों का इस्तेमाल हर संसाधन के लिए नहीं किया जाना चाहिए. साथ ही, इनका गलत तरीके से इस्तेमाल करने से परफ़ॉर्मेंस पर बुरा असर पड़ सकता है. सबसे अच्छे नतीजे सिर्फ़ चुनिंदा पेजों को प्रीलोड या प्रीफ़ेच करने से मिलते हैं.
खास जानकारी पाने के लिए:
- ऐसे संसाधनों के लिए preload का इस्तेमाल करें जो देर से मिलते हैं, लेकिन मौजूदा पेज के लिए ज़रूरी हैं.
- उन संसाधनों के लिए prefetch का इस्तेमाल करें जिनकी ज़रूरत आने वाले समय में नेविगेशन रूट या उपयोगकर्ता की कार्रवाई के लिए होती है.
फ़िलहाल, सभी ब्राउज़र में प्रीलोड और प्रीफ़ेच, दोनों सुविधाएं काम नहीं करती हैं. इसका मतलब है कि आपके ऐप्लिकेशन के सभी उपयोगकर्ताओं को परफ़ॉर्मेंस में सुधार नहीं दिख सकता.
अगर आपको इस बारे में ज़्यादा जानकारी चाहिए कि प्रीलोडिंग और प्रीफ़ेचिंग से आपके वेब पेज पर क्या असर पड़ सकता है, तो ये लेख पढ़ें: