कोडलैब (कोड बनाना सीखना): कॉन्टेंट लोड होने की स्पीड बढ़ाने के लिए, अहम एसेट को पहले से लोड करना

हुसैन ज़िरदेह

इस कोडलैब में, कुछ संसाधनों को पहले से लोड और प्रीफ़ेच करके नीचे दिए गए वेब पेज की परफ़ॉर्मेंस बेहतर होती है:

ऐप्लिकेशन का स्क्रीनशॉट

दूरी मापें

कोई भी ऑप्टिमाइज़ेशन जोड़ने से पहले, मेज़र करें कि वेबसाइट की परफ़ॉर्मेंस कैसी है.

  • साइट की झलक देखने के लिए, ऐप्लिकेशन देखें दबाएं. इसके बाद, फ़ुलस्क्रीन फ़ुलस्क्रीन दबाएं.

अपने Glitch के लाइव वर्शन पर, लाइटहाउस परफ़ॉर्मेंस ऑडिट (Lighthouse > विकल्प > परफ़ॉर्मेंस) चलाएं. साथ ही, Lighthouse की मदद से परफ़ॉर्मेंस के अवसरों के बारे में जानें भी देखें.

लाइटहाउस, देर से फ़ेच किए गए संसाधन के लिए नीचे दिया गया ऐसा ऑडिट दिखाता है जो पूरा नहीं हो सका:

लाइटहाउस: मुख्य अनुरोधों का ऑडिट पहले से लोड करें
  • DevTools खोलने के लिए, `Control+Shift+J` (या Mac पर `Command+Option+J`) दबाएं.
  • नेटवर्क टैब पर क्लिक करें.
देर से खोजे गए संसाधन वाला नेटवर्क पैनल

main.css फ़ाइल, एचटीएमएल दस्तावेज़ में मौजूद लिंक एलिमेंट (<link>) से फ़ेच नहीं की जाती. हालांकि, अलग JavaScript फ़ाइल, fetch-css.js, लिंक एलिमेंट को window.onLoad इवेंट के बाद डीओएम में जोड़ती है. इसका मतलब है कि ब्राउज़र, 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 को फ़ेच करने से पहले ही ब्राउज़र, सीएसएस फ़ाइल को कैसे फ़ेच करता है और उसकी पार्सिंग भी पूरी हो चुकी है. पहले से लोड करने की सुविधा से, ब्राउज़र को यह पता चलता है कि रिसॉर्स को पहले से फ़ेच कर लिया जाए, तो उसे यह मानते हुए कि वह वेब पेज के लिए अहम है.

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

कंसोल में, पहले से लोड होने की चेतावनी

इस चेतावनी को इंडिकेटर के तौर पर इस्तेमाल करें. इससे पता लगाया जा सकता है कि कहीं आपके पास पहले से लोड किए गए ऐसे संसाधन तो नहीं हैं जिनका इस्तेमाल आपके वेब पेज पर तुरंत नहीं किया जा रहा. अब इस पेज के लिए, पहले से लोड किए गए ग़ैर-ज़रूरी लिंक को हटाया जा सकता है.

<head>
  <!-- ... -->
  <link rel="preload" href="main.css" as="style">
  <link rel="preload" href="details.css" as="style">
</head>

as एट्रिब्यूट के लिए इस्तेमाल की जाने वाली सही वैल्यू के साथ, फ़ेच किए जा सकने वाले सभी तरह के संसाधनों की सूची के लिए, पेज को पहले से लोड करने से जुड़ी जानकारी के बारे में एमडीएन का लेख देखें.

आने वाले समय के संसाधनों को प्रीफ़ेच करें

Prefetch, ब्राउज़र का एक और संकेत है. इसका इस्तेमाल किसी ऐसे ऐसेट का अनुरोध करने के लिए किया जा सकता है जिसका इस्तेमाल किसी दूसरे नेविगेशन रूट के लिए किया जाता है. हालांकि, यह मौजूदा पेज के लिए ज़रूरी अन्य ज़रूरी ऐसेट की तुलना में कम प्राथमिकता पर होता है.

इस वेबसाइट में, इमेज पर क्लिक करने से आपको एक अलग details/ रूट पर ले जाया जाता है.

रास्ते की जानकारी

एक अलग CSS फ़ाइल, details.css, में इस सामान्य पेज के लिए ज़रूरी सभी स्टाइल शामिल होती हैं. इस संसाधन को प्रीफ़ेच करने के लिए, index.html में लिंक एलिमेंट जोड़ें.

<head>
  <!-- ... -->
  <link rel="prefetch" href="details.css">
</head>

यह समझने के लिए कि यह फ़ाइल के लिए अनुरोध कैसे ट्रिगर करता है, DevTools में नेटवर्क पैनल खोलें और कैश मेमोरी बंद करें विकल्प से सही का निशान हटाएं.

Chrome DevTools में कैश मेमोरी की सुविधा को बंद करें

ऐप्लिकेशन को फिर से लोड करें और देखें कि कैसे बाकी सभी फ़ाइलें फ़ेच हो जाने के बाद, details.css के लिए बहुत कम प्राथमिकता वाला अनुरोध किया जाता है.

प्रीफ़ेच किए गए संसाधन वाला नेटवर्क पैनल

DevTools खोलने के बाद, details पेज पर जाने के लिए, वेबसाइट में इमेज पर क्लिक करें. details.css को फ़ेच करने के लिए, details.html में लिंक एलिमेंट का इस्तेमाल किया जाता है. इसलिए, ज़रूरत के मुताबिक रिसॉर्स के लिए अनुरोध किया जाता है.

ज़्यादा जानकारी वाले पेज के नेटवर्क अनुरोध

DevTools में details.css नेटवर्क अनुरोध की जानकारी देखने के लिए, उस पर क्लिक करें. आप देखेंगे कि फ़ाइल ब्राउज़र के डिस्क कैश से वापस लाई गई है.

डिस्क की कैश मेमोरी से डेटा का अनुरोध फ़ेच किया गया

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

वेबपैक की मदद से, पहले से लोड और प्रीफ़ेच करना

कोड को अलग-अलग हिस्सों में बांटने की मदद से 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) });
});

किसी बंडल को अलग-अलग करने से, पेज का शुरुआती साइज़ कम हो जाता है और पेज लोड होने की अवधि बढ़ जाती है. वेबपैक के वर्शन 4.6.0 में, डाइनैमिक तौर पर इंपोर्ट किए गए डेटा को पहले से लोड या प्रीफ़ेच करने की सुविधा होती है. इस ऐप्लिकेशन का इस्तेमाल उदाहरण के तौर पर करने से, ब्राउज़र का कुछ समय तक इस्तेमाल न होने पर lodash तरीके को प्रीफ़ेच किया जा सकता है. जब कोई उपयोगकर्ता बटन दबाता है, तो संसाधन को फ़ेच करने में कोई देरी नहीं होती है.

किसी खास हिस्से को प्रीफ़ेच करने के लिए, डाइनैमिक इंपोर्ट में webpackPrefetch टिप्पणी पैरामीटर का इस्तेमाल करें. यहां बताया गया है कि इस खास ऐप्लिकेशन पर यह कैसा दिखेगा.

form.addEventListener("submit", e => {
  e.preventDefault()
  import(/* webpackPrefetch: true */ 'lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

ऐप्लिकेशन के फिर से लोड होने पर, वेबपैक संसाधन के लिए दस्तावेज़ के सबसे ऊपर प्रीफ़ेच टैग इंजेक्ट करता है. इसे DevTools के एलिमेंट पैनल में देखा जा सकता है.

प्रीफ़ेच टैग वाला एलिमेंट पैनल

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

प्रीफ़ेच किए गए अनुरोध वाला नेटवर्क पैनल

हालांकि, इस्तेमाल के इस उदाहरण के लिए प्रीफ़ेच करना ज़्यादा बेहतर होता है, लेकिन वेबपैक डाइनैमिक तौर पर इंपोर्ट किए गए हिस्सों को पहले से लोड करने की सुविधा भी देता है.

import(/* webpackPreload: true */ 'module')

नतीजा

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

खास जानकारी:

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

फ़िलहाल, सभी ब्राउज़र प्रीलोड और प्रीफ़ेच की सुविधा नहीं देते. इसका मतलब है कि हो सकता है कि आपके ऐप्लिकेशन के सभी उपयोगकर्ताओं को परफ़ॉर्मेंस में सुधार न दिखे.

पेजों को पहले से लोड करने और प्रीफ़ेच करने से आपके वेब पेज पर क्या असर हो सकता है, इस बारे में ज़्यादा जानने के लिए, ये लेख पढ़ें: