Catch up on everthing we announced at this year's Firebase Summit. Learn more

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

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

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

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

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

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

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

  • loadEventEnd - एक मीट्रिक कि उपायों पृष्ठ पर जब उपयोगकर्ता navigates और जब वर्तमान दस्तावेज़ लोड घटना कम्प्लिट्स के बीच का समय

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

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

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

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

पेज लोड निशान आप अपने ऐप के ट्रैक करने में मदद कोर वेब नब्ज , पहले contentful रंग की तरह।

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

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

पहला पेंट

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

यह मीट्रिक के बाद से अपने उपयोगकर्ताओं के लिए पहले पेंट संकेत है कि पेज लोड करने के लिए शुरू कर रहा है उपयोगी है।

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

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

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

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

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

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

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

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

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

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

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

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

domContentLoadedEventEnd

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

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

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

लोडइवेंटएंड

इस मीट्रिक उपयोगकर्ता पृष्ठ पर और जब वर्तमान दस्तावेज़ लोड घटना कम्प्लिट्स नेविगेट के बीच का समय।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

यदि आप ट्रेस तालिका में ट्रेस नाम पर क्लिक करते हैं, तो आप ट्रेस का पता लगाने के लिए विभिन्न स्क्रीन पर क्लिक कर सकते हैं और रुचि के मीट्रिक में ड्रिल डाउन कर सकते हैं। अधिकांश पृष्ठों पर, आप फ़िल्टर का उपयोग कर सकते विशेषता के आधार पर डेटा को फ़िल्टर करने, उदाहरण के लिए बटन (स्क्रीन के ऊपरी-बाएं):

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

बारे में और जानें अपने निशान के डाटा देखने की

अगला कदम