आपके ब्राउज़र के DevTools में नेटवर्क पैनल से यह पहचान करने में मदद मिलती है कि कौनसे संसाधन लोड हुए हैं और वे कब लोड हुए हैं. नेटवर्क पैनल की हर पंक्ति एक खास यूआरएल से जुड़ी होती है, जिसे आपके वेब ऐप्लिकेशन ने लोड किया है.
जानें कि आपको क्या लोड करना है
अपने वेब ऐप्लिकेशन को कैश मेमोरी में सेव करने की सही रणनीतियां बनाने के लिए, आपको यह तय करना होगा कि आप क्या लोड कर रहे हैं. भरोसेमंद वेब ऐप्लिकेशन बनाते समय, नेटवर्क पर सभी तरह की डार्क फ़ोर्स आ सकती हैं. अगर आपको अपने ऐप्लिकेशन में, नेटवर्क से जुड़ी जोखिम की आशंकाओं का सामना करना है, तो उन्हें समझना होगा.
आपको लग सकता है कि आपको पहले से ही इस बारे में काफ़ी अच्छा आइडिया है कि आपका वेब ऐप्लिकेशन क्या लोड करता है. अगर स्टैटिक एचटीएमएल, JavaScript, CSS, और इमेज फ़ाइलों में से कुछ का ही इस्तेमाल किया जा रहा है, तो यह सही हो सकता है. हालांकि, जैसे ही आप कॉन्टेंट डिलीवरी नेटवर्क पर होस्ट किए गए तीसरे पक्ष के रिसॉर्स को मिक्स करना शुरू करते हैं, तो डाइनैमिक एपीआई अनुरोधों और सर्वर से जनरेट किए गए रिस्पॉन्स का इस्तेमाल करके, इमेज तुरंत दिखने लगती है.
उदाहरण के लिए, कुछ छोटी सीएसएस फ़ाइलों के लिए कैश मेमोरी में सेव करने की रणनीति, सैकड़ों बड़ी इमेज के लिए शायद सही न हो.
जानें कि कब लोड किया जाता है
लोड होने वाली पूरी तस्वीर का एक और हिस्सा यह है कि सब कुछ जब लोड हो जाता है.
जैसे ही उपयोगकर्ता, दिए गए यूआरएल पर जाता है, नेटवर्क को भेजे जाने वाले कुछ अनुरोध, जैसे कि आपके शुरुआती एचटीएमएल के लिए नेविगेशन अनुरोध, बिना किसी शर्त के किए जाते हैं. उस एचटीएमएल में ज़रूरी सीएसएस या JavaScript फ़ाइलों के हार्डकोड किए गए रेफ़रंस हो सकते हैं, जिन्हें आपका इंटरैक्टिव पेज दिखाने के लिए लोड होना भी ज़रूरी है. ये सभी अनुरोध, आपके पेज लोड होने के ज़रूरी पाथ में मौजूद होते हैं. आपको तेज़ी से तेज़ी से पेमेंट करने के लिए, इन्हें तेज़ी से कैश मेमोरी में सेव करना होगा.
एपीआई अनुरोध या लेज़ी-लोडेड एसेट जैसे दूसरे संसाधन, शायद तब तक लोड न हों, जब तक कि लोड होने की शुरुआती प्रोसेस पूरी नहीं हो जाती. अगर ऐसे अनुरोध सिर्फ़ उपयोगकर्ता इंटरैक्शन के किसी खास क्रम के बाद किए जाते हैं, तो हो सकता है कि एक ही पेज पर कई विज़िट के लिए संसाधनों के बिलकुल अलग सेट का अनुरोध किया जाए. आपकी पहचान जो कॉन्टेंट लोड होने के ज़रूरी पाथ से बाहर है, उसके लिए कैश मेमोरी में सेव करने की कम सख्त रणनीति अपनाना अक्सर सही होती है.
नाम और टाइप कॉलम में दी गई जानकारी को समझने में
नाम और टाइप कॉलम से यह समझने में मदद मिलती है कि क्या लोड किया जा रहा है. ऊपर दिए गए उदाहरण में, "क्या लोड हो रहा है?" का जवाब कुल चार यूआरएल हैं. हर यूआरएल एक खास तरह का कॉन्टेंट है.
नाम उस यूआरएल के बारे में बताता है जिसका आपके ब्राउज़र ने अनुरोध किया था—हालांकि, आपको सूची में यूआरएल के पाथ का सिर्फ़ आखिरी हिस्सा दिखेगा. उदाहरण के लिए, अगर
https://example.com/main.css लोड किया गया है, तो आपको सिर्फ़ main.css
सूची में नाम दिखेगा.
पीरियड (उदाहरण के लिए, "css") के बाद यूआरएल के पाथ के आखिरी कुछ वर्ण, यूआरएल का एक्सटेंशन कहा जाता है.
यूआरएल का एक्सटेंशन आम तौर पर आपको बताता है कि किस तरह के संसाधन का अनुरोध किया जा रहा है. साथ ही, यह सीधे 'टाइप' कॉलम में दिखाई गई जानकारी से मैप करता है. उदाहरण के लिए,
v2.html एक दस्तावेज़ है और main.css एक स्टाइलशीट है.
वॉटरफ़ॉल कॉलम कॉलम में
वॉटरफ़ॉल कॉलम की जांच करें. यह कॉलम सबसे ऊपर से शुरू होता है और नीचे की ओर जाता है. हर बार की लंबाई, हर संसाधन को लोड करने में लगने वाले कुल समय को दिखाती है. आप पेज के शुरुआती लोड होने के काफ़ी समय बाद, लोड होने वाले ज़रूरी पाथ के हिस्से के तौर पर किए गए अनुरोध और डाइनैमिक तौर पर बंद होने वाले अनुरोध के बीच का फ़र्क़ कैसे जान सकते हैं?
वॉटरफ़ॉल में पहला अनुरोध हमेशा एचटीएमएल दस्तावेज़,
जैसे, v2.html के लिए किया जाता है. नेविगेशन के इस शुरुआती अनुरोध से, बाद के सभी अनुरोध (जैसे, कोई वॉटरफ़ॉल!) फ़्लो करेंगे. यह इस बात पर निर्भर करेगा कि एचटीएमएल दस्तावेज़ में दी गई इमेज, स्क्रिप्ट, और
स्टाइल के हिसाब से कौनसी इमेज हैं.
वॉटरफ़ॉल दिखाता है कि v2.html के लोड होते ही, उससे जुड़ी ऐसेट के लिए अनुरोध मिलने शुरू हो जाते हैं. इन ऐसेट को सबरिसॉर्स भी कहा जाता है. ब्राउज़र एक ही समय पर कई सबरिसॉर्स का अनुरोध कर सकता है. इन्हें main.css और logo.svg के लिए, वॉटरफ़ॉल कॉलम में ओवरलैप होने वाले बार दिखाते हैं. आखिर में, स्क्रीनशॉट से देखा जा सकता है कि main.js, सबसे आखिर में लोड होना शुरू करता है और अन्य तीन यूआरएल के लोड होने के बाद ही, लोड होने की प्रोसेस पूरी करता है.