पेज लोड होने की परफ़ॉर्मेंस के डेटा के बारे में जानें (वेब ऐप्लिकेशन)

Performance Monitoring आपके ऐप्लिकेशन में निगरानी की जा रही प्रोसेस का डेटा इकट्ठा करने के लिए, ट्रेस का इस्तेमाल करता है. ट्रस एक रिपोर्ट होती है, जिसमें आपके ऐप्लिकेशन में किसी समय के दो पॉइंट के बीच कैप्चर किया गया डेटा होता है.

वेब ऐप्लिकेशन के लिए, Performance Monitoring आपके ऐप्लिकेशन के हर पेज के लिए पेज लोड ट्रेस नाम का ट्रेस अपने-आप इकट्ठा करता है. हर पेज लोड ट्रेस, ये डिफ़ॉल्ट मेट्रिक इकट्ठा करता है:

  • फ़र्स्ट पेंट — यह मेट्रिक, उपयोगकर्ता के किसी पेज पर जाने और पेज पर कोई विज़ुअल बदलाव होने के बीच के समय को मेज़र करती है

  • फ़र्स्ट कॉन्टेंटफ़ुल पेंट — यह मेट्रिक, उपयोगकर्ता के किसी पेज पर जाने से लेकर, उस पेज पर इमेज या टेक्स्ट जैसे काम का कॉन्टेंट दिखने में लगने वाले समय को मेज़र करती है

  • domInteractive — यह मेट्रिक, उपयोगकर्ता के किसी पेज पर जाने और उस पेज को उपयोगकर्ता के लिए इंटरैक्टिव मानने के बीच के समय को मेज़र करती है

  • domContentLoadedEventEnd — यह मेट्रिक, उपयोगकर्ता के किसी पेज पर जाने से लेकर, शुरुआती एचटीएमएल दस्तावेज़ के पूरी तरह से लोड और पार्स होने के बीच के समय को मेज़र करती है

  • loadEventEnd — यह मेट्रिक, उपयोगकर्ता के पेज पर जाने और मौजूदा दस्तावेज़ के लोड इवेंट के पूरा होने के बीच के समय को मेज़र करती है

  • फ़र्स्ट इनपुट डिले — यह मेट्रिक, उपयोगकर्ता के किसी पेज से इंटरैक्ट करने और ब्राउज़र के उस इनपुट का जवाब देने के बीच लगने वाले समय को मेज़र करती है

इन ट्रेस का डेटा, ट्रेस टेबल के पेज लोड सब-टैब में देखा जा सकता है. यह परफ़ॉर्मेंस डैशबोर्ड में सबसे नीचे होता है. इस पेज पर, कंसोल इस्तेमाल करने के बारे में ज़्यादा जानें.

पेज लोड ट्रेस की परिभाषा

यह ट्रेस, आपके ऐप्लिकेशन के पेजों के लोड होने के तरीके के बारे में कई मेट्रिक को मेज़र करता है. खास तौर पर, यह पता लगाता है कि किसी रिस्पॉन्सिव ऐप्लिकेशन जैसे सामान्य लोडिंग पॉइंट तक पहुंचने में कितना समय लगता है.

पेज लोड होने के ट्रैक से, आपको अपने ऐप्लिकेशन के वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को ट्रैक करने में मदद मिलती है. जैसे, सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय.

पेज लोड होने के ट्रैस के लिए इकट्ठा की गई मेट्रिक

ये ट्रेस, पहले से मौजूद ट्रेस होते हैं. इसलिए, इनमें कस्टम मेट्रिक या कस्टम एट्रिब्यूट नहीं जोड़े जा सकते.

फ़र्स्ट पेंट

यह मेट्रिक, उपयोगकर्ता के किसी पेज पर जाने और किसी विज़ुअल में बदलाव होने के बीच के समय को मेज़र करती है.

यह मेट्रिक इसलिए काम की है, क्योंकि पहली बार पेज पर दिखने वाले कॉन्टेंट से उपयोगकर्ताओं को पता चलता है कि पेज लोड होना शुरू हो गया है.

  • यह तब शुरू होता है, जब उपयोगकर्ता किसी पेज पर जाता है.

  • विज़ुअल में कोई भी बदलाव होने पर रुक जाता है. जैसे, बैकग्राउंड का रंग बदलना या हेडर लोड होना.

साइट का पहला एलिमेंट लोड होने में लगने वाला समय

यह मेट्रिक, उपयोगकर्ता के किसी पेज पर जाने और इमेज या टेक्स्ट जैसे काम का कॉन्टेंट दिखने के बीच के समय को मेज़र करती है.

इस मेट्रिक से यह अहम जानकारी मिलती है कि आपके उपयोगकर्ताओं को आपके ऐप्लिकेशन का असल कॉन्टेंट, नए बैकग्राउंड कलर या हेडर के बजाय कितनी जल्दी दिखता है.

  • यह तब शुरू होता है, जब उपयोगकर्ता किसी पेज पर जाता है.

  • ब्राउज़र, डीओएम से पहला कॉन्टेंट रेंडर करने के तुरंत बाद रुक जाता है. इसमें कोई भी टेक्स्ट, इमेज (बैकग्राउंड इमेज शामिल है), नॉन-व्हाइट कैनवस या एसवीजी शामिल है.

domInteractive

यह मेट्रिक, उपयोगकर्ता के किसी पेज पर जाने और उस पेज को उपयोगकर्ता के लिए इंटरैक्टिव मानने के बीच के समय को मेज़र करती है.

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

  • यह तब शुरू होता है, जब उपयोगकर्ता किसी पेज पर जाता है.

  • उपयोगकर्ता एजेंट, मौजूदा एचटीएमएल दस्तावेज़ को "इंटरैक्टिव" के तौर पर सेट करने से ठीक पहले रुक जाता है.

domContentLoadedEventEnd

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

  • यह तब शुरू होता है, जब उपयोगकर्ता किसी पेज पर जाता है.

  • यह मेट्रिक, शुरुआती एचटीएमएल दस्तावेज़ के पूरी तरह लोड होने और पार्स होने (DOMContentLoaded) के तुरंत बाद बंद हो जाती है. हालांकि, इसका मतलब यह नहीं है कि स्टाइलशीट, इमेज, और सबफ़्रेम लोड हो चुके हैं.

loadEventEnd

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

इस मेट्रिक से यह जानकारी मिलती है कि आपके पूरे कॉन्टेंट को लोड होने में कितना समय लगता है. इसमें स्टाइलशीट और इमेज भी शामिल हैं.

  • यह तब शुरू होता है, जब उपयोगकर्ता किसी पेज पर जाता है.

  • मौजूदा HTML दस्तावेज़ का लोड इवेंट पूरा होने के तुरंत बाद बंद हो जाता है.

फ़र्स्ट इनपुट डिले

यह मेट्रिक, उपयोगकर्ता के किसी पेज से इंटरैक्ट करने और ब्राउज़र के उस इनपुट का जवाब देने के बीच के समय को मेज़र करती है.

यह मेट्रिक इसलिए काम की है, क्योंकि उपयोगकर्ता के इंटरैक्शन का जवाब देने वाला ब्राउज़र, आपके उपयोगकर्ताओं को आपके ऐप्लिकेशन के रिस्पॉन्सिव होने के बारे में पहला इंप्रेशन देता है.

  • यह तब शुरू होता है, जब उपयोगकर्ता पेज पर किसी एलिमेंट के साथ पहली बार इंटरैक्ट करता है. जैसे, किसी बटन या हाइपरलिंक पर क्लिक करना.

  • ब्राउज़र, इनपुट का जवाब देने के तुरंत बाद रुक जाता है. इसका मतलब है कि ब्राउज़र आपके कॉन्टेंट को लोड या पार्स नहीं कर रहा है.

ध्यान दें कि पहली इनपुट देरी मेट्रिक को मेज़र करने के लिए, आपको इस मेट्रिक के लिए polyfill लाइब्रेरी जोड़नी होगी. इंस्टॉल करने के निर्देशों के लिए, लाइब्रेरी का दस्तावेज़ देखें.

परफ़ॉर्मेंस डेटा को ट्रैक करना, देखना, और फ़िल्टर करना

रीयल-टाइम परफ़ॉर्मेंस डेटा देखने के लिए, पक्का करें कि आपका ऐप्लिकेशन, परफ़ॉर्मेंस मॉनिटरिंग SDK टूल के ऐसे वर्शन का इस्तेमाल करता हो जो रीयल-टाइम डेटा प्रोसेसिंग के साथ काम करता हो. रीयल-टाइम परफ़ॉर्मेंस डेटा के बारे में ज़्यादा जानें.

अपने डैशबोर्ड में मुख्य मेट्रिक ट्रैक करना

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

<span class=Firebase परफ़ॉर्मेंस मॉनिटरिंग डैशबोर्ड" />

अपने मेट्रिक बोर्ड में कोई मेट्रिक जोड़ने के लिए, यह तरीका अपनाएं:

  1. Firebase कंसोल में, परफ़ॉर्मेंस डैशबोर्ड पर जाएं.
  2. किसी खाली मेट्रिक कार्ड पर क्लिक करें. इसके बाद, अपने बोर्ड में जोड़ने के लिए कोई मौजूदा मेट्रिक चुनें.
  3. ज़्यादा विकल्पों के लिए, जानकारी वाले मेट्रिक कार्ड पर पर क्लिक करें. उदाहरण के लिए, किसी मेट्रिक को बदलने या हटाने के लिए.

मेट्रिक बोर्ड, समय के साथ इकट्ठा की गई मेट्रिक का डेटा दिखाता है. यह डेटा, ग्राफ़िक के तौर पर और संख्या के प्रतिशत में, दोनों तरह से दिखता है.

डैशबोर्ड का इस्तेमाल करने के बारे में ज़्यादा जानें.

ट्रेस और उनका डेटा देखना

अपने ट्रेस देखने के लिए, Firebase कंसोल में परफ़ॉर्मेंस डैशबोर्ड पर जाएं. इसके बाद, नीचे की ओर स्क्रोल करके ट्रेस टेबल पर जाएं और सही सब-टैब पर क्लिक करें. टेबल में हर ट्रेस के लिए कुछ मुख्य मेट्रिक दिखती हैं. साथ ही, किसी खास मेट्रिक के लिए, सूची को प्रतिशत में हुए बदलाव के हिसाब से क्रम से लगाया जा सकता है.

Performance Monitoring, Firebase कंसोल में समस्या हल करने वाला पेज उपलब्ध कराता है. इस पेज पर, मेट्रिक में हुए बदलावों को हाइलाइट किया जाता है. इससे, ऐप्लिकेशन और उपयोगकर्ताओं पर परफ़ॉर्मेंस से जुड़ी समस्याओं के असर को कम करने और उन्हें तुरंत ठीक करने में मदद मिलती है. परफ़ॉर्मेंस से जुड़ी संभावित समस्याओं के बारे में जानने पर, समस्या हल करने वाले पेज का इस्तेमाल किया जा सकता है. उदाहरण के लिए, इन स्थितियों में:

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

समस्या हल करने वाले पेज को इन तरीकों से ऐक्सेस किया जा सकता है:

  • मेट्रिक डैशबोर्ड पर, मेट्रिक की जानकारी देखें बटन पर क्लिक करें.
  • किसी भी मेट्रिक कार्ड पर, => जानकारी देखें को चुनें. समस्या हल करने वाले पेज पर, आपने जो मेट्रिक चुनी है उसके बारे में जानकारी दिखती है.
  • ट्रेस टेबल में, किसी ट्रेस के नाम या उससे जुड़ी लाइन में मौजूद किसी मेट्रिक वैल्यू पर क्लिक करें.
  • ईमेल सूचना में, अभी जांच करें पर क्लिक करें.

ट्रेस टेबल में किसी ट्रेस के नाम पर क्लिक करने के बाद, अपनी पसंद के हिसाब से मेट्रिक में ड्रिल-डाउन किया जा सकता है. एट्रिब्यूट के हिसाब से डेटा को फ़िल्टर करने के लिए, फ़िल्टर करें बटन पर क्लिक करें. उदाहरण के लिए:

<span class=एट्रिब्यूट के हिसाब से फ़िल्टर किया जा रहा Firebase परफ़ॉर्मेंस मॉनिटरिंग डेटा" />
  • अपनी साइट के किसी पेज का डेटा देखने के लिए, पेज के यूआरएल के हिसाब से फ़िल्टर करें
  • इस्तेमाल किए जा रहे इंटरनेट कनेक्शन के टाइप के हिसाब से फ़िल्टर करें. इससे आपको यह जानने में मदद मिलेगी कि 3G कनेक्शन आपके ऐप्लिकेशन पर क्या असर डालता है
  • देश के हिसाब से फ़िल्टर करें, ताकि यह पक्का किया जा सके कि आपके डेटाबेस की जगह से किसी खास इलाके पर असर नहीं पड़ रहा है

अपने ट्रैस का डेटा देखने के बारे में ज़्यादा जानें.

अगले चरण