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

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

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

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

  • पेज के रिस्पॉन्स में लगने वाला समय - यह एक ऐसी मेट्रिक है जो यह मेज़र करती है कि उपयोगकर्ता के किसी पेज से इंटरैक्ट करने और अगले पेंट के होने के बीच सबसे ज़्यादा समय कितना लगता है

  • लेआउट शिफ़्ट होने में लगने वाला समय - यह एक ऐसी मेट्रिक है जो किसी पेज में होने वाले अनचाहे लेआउट शिफ़्ट को मेज़र करती है और उन्हें स्कोर देती है

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

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

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

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

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

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

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

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

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

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

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

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

सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय

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

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

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

  • यह तब बंद होता है, जब सबसे बड़ा विज़ुअल बदलाव होता है. इसमें इमेज, टेक्स्ट या वीडियो एलिमेंट शामिल होते हैं. ज़्यादा जानकारी के लिए, कोर वेब वाइटल देखें.

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

पेज के रिस्पॉन्स में लगने वाला समय

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

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

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

  • यह तब बंद होता है, जब अगला पेंट होता है. ज़्यादा जानकारी के लिए, कोर वेब वाइटल देखें.

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

लेआउट शिफ़्ट होने में लगने वाला समय

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

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

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

फ़र्स्ट पेंट

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

यह मेट्रिक काम की है, क्योंकि फ़र्स्ट पेंट से आपके उपयोगकर्ताओं को यह सिग्नल मिलता है कि पेज लोड होना शुरू हो गया है.

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

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

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

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

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

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

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

domInteractive

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

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

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

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

domContentLoadedEventEnd

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

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

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

loadEventEnd

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

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

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

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

क्लिक के बाद रिस्पॉन्स में लगा समय

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

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

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

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

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

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

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

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

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

<span class=Firebase प्रदर्शन मॉनिटर करना डैशबोर्ड" />

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

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

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

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

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

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

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

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

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

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

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

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

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

अगले चरण