Catch up on everything announced at Firebase Summit, and learn how Firebase can help you accelerate app development and run your app with confidence. Learn More

पृष्ठ लोडिंग प्रदर्शन डेटा (वेब ​​ऐप्स) के बारे में जानें

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

प्रदर्शन मॉनिटरिंग आपके ऐप में मॉनिटर की गई प्रक्रियाओं के बारे में डेटा एकत्र करने के लिए ट्रेस का उपयोग करता है। ट्रेस एक ऐसी रिपोर्ट होती है जिसमें आपके ऐप में दो समय के बीच कैप्चर किया गया डेटा होता है।

वेब ऐप्स के लिए, प्रदर्शन निगरानी स्वचालित रूप से आपके ऐप के प्रत्येक पृष्ठ के लिए एक ट्रेस एकत्र करती है जिसे पेज लोड ट्रेस कहा जाता है। प्रत्येक पृष्ठ लोड ट्रेस निम्न डिफ़ॉल्ट मीट्रिक एकत्रित करता है:

  • पहला पेंट — एक मीट्रिक जो उस समय को मापता है जब उपयोगकर्ता किसी पृष्ठ पर नेविगेट करता है और जब कोई दृश्य परिवर्तन होता है

  • पहला संतोषजनक पेंट - एक मीट्रिक जो उस समय को मापता है जब कोई उपयोगकर्ता किसी पृष्ठ पर नेविगेट करता है और जब सार्थक सामग्री प्रदर्शित होती है, जैसे छवि या टेक्स्ट

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

  • domContentLoadedEventEnd — एक मीट्रिक जो उस समय को मापता है जब उपयोगकर्ता किसी पृष्ठ पर नेविगेट करता है और जब प्रारंभिक HTML दस्तावेज़ पूरी तरह से लोड और पार्स किया जाता है

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

  • पहला इनपुट विलंब - एक मीट्रिक जो उस समय को मापता है जब उपयोगकर्ता किसी पृष्ठ के साथ इंटरैक्ट करता है और जब ब्राउज़र उस इनपुट का जवाब देने में सक्षम होता है

आप ट्रेस तालिका के पृष्ठ लोड उपटैब में इन ट्रेस से डेटा देख सकते हैं, जो प्रदर्शन डैशबोर्ड के नीचे है (इस पृष्ठ पर बाद में कंसोल का उपयोग करने के बारे में और जानें)।

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

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

पेज लोड ट्रेस आपको अपने ऐप के मुख्य वेब विटल्स को ट्रैक करने में मदद करते हैं, जैसे कि पहला कंटेंटफुल पेंट।

पेज लोड ट्रेस के लिए एकत्रित मीट्रिक

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

पहला पेंट

यह मीट्रिक उस समय को मापता है जब उपयोगकर्ता किसी पृष्ठ पर नेविगेट करता है और जब कोई दृश्य परिवर्तन होता है।

यह मीट्रिक उपयोगी है क्योंकि पहला पेंट आपके उपयोगकर्ताओं को संकेत देता है कि पृष्ठ लोड होना शुरू हो रहा है।

  • प्रारंभ होता है जब उपयोगकर्ता किसी पृष्ठ पर नेविगेट करता है।

  • पृष्ठभूमि का रंग बदलने या हेडर लोड करने सहित कोई भी दृश्य परिवर्तन होने पर रुक जाता है।

पहला संतोषजनक पेंट

यह मीट्रिक उस समय को मापता है जब कोई उपयोगकर्ता किसी पृष्ठ पर नेविगेट करता है और जब सार्थक सामग्री प्रदर्शित होती है, जैसे छवि या टेक्स्ट।

यह मीट्रिक इस जानकारी के लिए उपयोगी है कि आपके उपयोगकर्ता केवल एक नए पृष्ठभूमि रंग या हेडर के बजाय आपके ऐप की किसी भी वास्तविक सामग्री को कितनी जल्दी देखते हैं।

  • प्रारंभ होता है जब उपयोगकर्ता किसी पृष्ठ पर नेविगेट करता है।

  • किसी भी पाठ, छवि (पृष्ठभूमि छवियों सहित), गैर-सफेद कैनवास, या SVG सहित, DOM से पहली सामग्री को ब्राउज़र द्वारा प्रस्तुत करने के तुरंत बाद रुक जाता है।

डोम इंटरएक्टिव

यह मीट्रिक उस समय को मापता है जब उपयोगकर्ता किसी पृष्ठ पर नेविगेट करता है और जब पृष्ठ को उपयोगकर्ता के लिए इंटरैक्टिव माना जाता है।

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

  • प्रारंभ होता है जब उपयोगकर्ता किसी पृष्ठ पर नेविगेट करता है।

  • उपयोगकर्ता एजेंट वर्तमान HTML दस्तावेज़ की तैयारी को "इंटरैक्टिव" पर सेट करने से पहले तुरंत बंद हो जाता है।

domContentLoadedEventEnd

यह मीट्रिक उस समय को मापता है जब उपयोगकर्ता किसी पृष्ठ पर नेविगेट करता है और जब प्रारंभिक HTML दस्तावेज़ पूरी तरह से लोड और पार्स किया जाता है।

  • प्रारंभ होता है जब उपयोगकर्ता किसी पृष्ठ पर नेविगेट करता है।

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

लोडइवेंटएंड

यह मीट्रिक उस समय को मापता है जब उपयोगकर्ता पृष्ठ पर नेविगेट करता है और जब वर्तमान दस्तावेज़ का लोड ईवेंट पूरा होता है।

यह मीट्रिक इस जानकारी के लिए उपयोगी है कि स्टाइलशीट और छवियों सहित आपकी सभी सामग्री को लोड करने में कितना समय लगता है।

  • प्रारंभ होता है जब उपयोगकर्ता किसी पृष्ठ पर नेविगेट करता है।

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

पहली इनपुट देरी

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

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

  • शुरू होता है जब उपयोगकर्ता पहली बार पृष्ठ पर किसी तत्व के साथ इंटरैक्ट करता है, जैसे बटन या हाइपरलिंक पर क्लिक करना।

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

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

प्रदर्शन डेटा ट्रैक करें, देखें और फ़िल्टर करें

रीयल-टाइम प्रदर्शन डेटा देखने के लिए, सुनिश्चित करें कि आपका ऐप प्रदर्शन निगरानी एसडीके संस्करण का उपयोग करता है जो रीयल-टाइम डेटा प्रोसेसिंग के साथ संगत है। रीयल-टाइम प्रदर्शन डेटा के बारे में अधिक जानें

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

यह जानने के लिए कि आपकी प्रमुख मीट्रिक कैसे चलन में हैं, उन्हें प्रदर्शन डैशबोर्ड के शीर्ष पर अपने मीट्रिक बोर्ड में जोड़ें। आप सप्ताह-दर-सप्ताह परिवर्तन देखकर जल्दी से प्रतिगमन की पहचान कर सकते हैं या यह सत्यापित कर सकते हैं कि आपके कोड में हाल के परिवर्तन प्रदर्शन में सुधार कर रहे हैं।

Firebase प्रदर्शन निगरानी डैशबोर्ड में मीट्रिक बोर्ड की एक छवि

अपने मीट्रिक बोर्ड में मीट्रिक जोड़ने के लिए, इन चरणों का पालन करें:

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

मेट्रिक्स बोर्ड समय के साथ एकत्र किए गए मीट्रिक डेटा को ग्राफिकल रूप में और संख्यात्मक प्रतिशत परिवर्तन दोनों के रूप में दिखाता है।

डैशबोर्ड का उपयोग करने के बारे में और जानें।

निशान और उनका डेटा देखें

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

प्रदर्शन निगरानी फायरबेस कंसोल में एक समस्या निवारण पृष्ठ प्रदान करता है जो मीट्रिक परिवर्तनों को हाइलाइट करता है, जिससे आपके ऐप्स और उपयोगकर्ताओं पर प्रदर्शन समस्याओं के प्रभाव को त्वरित रूप से संबोधित करना और कम करना आसान हो जाता है। जब आप संभावित प्रदर्शन समस्याओं के बारे में सीखते हैं, उदाहरण के लिए, निम्नलिखित परिदृश्यों में, आप समस्या निवारण पृष्ठ का उपयोग कर सकते हैं:

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

आप निम्न तरीकों से समस्या निवारण पृष्ठ तक पहुँच सकते हैं:

  • मीट्रिक डैशबोर्ड पर, मीट्रिक विवरण देखें बटन पर क्लिक करें.
  • किसी भी मीट्रिक कार्ड पर => विवरण देखें चुनें। समस्या निवारण पृष्ठ आपके द्वारा चयनित मीट्रिक के बारे में जानकारी प्रदर्शित करता है।
  • ट्रेस तालिका में, ट्रेस नाम या उस ट्रेस से संबद्ध पंक्ति में किसी भी मीट्रिक मान पर क्लिक करें।
  • ईमेल अलर्ट में, अभी जाँच करें पर क्लिक करें।

जब आप ट्रेस तालिका में किसी ट्रेस नाम पर क्लिक करते हैं, तब आप रुचि के मीट्रिक में ड्रिल-डाउन कर सकते हैं। विशेषता के आधार पर डेटा फ़िल्टर करने के लिए फ़िल्टर बटन पर क्लिक करें, उदाहरण के लिए:

विशेषता द्वारा फ़िल्टर किए जा रहे Firebase प्रदर्शन निगरानी डेटा की एक छवि
  • अपनी साइट के किसी विशिष्ट पृष्ठ का डेटा देखने के लिए पृष्ठ URL द्वारा फ़िल्टर करें
  • 3जी कनेक्शन आपके ऐप को कैसे प्रभावित करता है, यह जानने के लिए प्रभावी कनेक्शन प्रकार के आधार पर फ़िल्टर करें
  • यह सुनिश्चित करने के लिए देश के आधार पर फ़िल्टर करें कि आपका डेटाबेस स्थान किसी विशिष्ट क्षेत्र को प्रभावित नहीं कर रहा है

अपने ट्रेस के लिए डेटा देखने के बारे में और जानें।

अगले कदम

  • प्रदर्शन डेटा की जांच करने के लिए विशेषताओं का उपयोग करने के बारे में अधिक जानें।

  • Firebase कंसोल में प्रदर्शन समस्याओं को ट्रैक करने के तरीके के बारे में और जानें।

  • पेज लोड के लिए अलर्ट सेट करें जो आपके ऐप के प्रदर्शन को खराब कर रहे हैं। उदाहरण के लिए, आप अपनी टीम के लिए एक ईमेल अलर्ट कॉन्फ़िगर कर सकते हैं यदि किसी विशिष्ट पृष्ठ के लिए पहला इनपुट विलंब आपके द्वारा निर्धारित सीमा से अधिक हो जाता है।