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