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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

पहला पेंट

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

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

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

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

पहला संतोषप्रद पेंट

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

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

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

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

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

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

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

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

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

domContentLoadedEventEnd

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

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

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

लोडइवेंटएंड

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

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

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

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

प्रथम इनपुट विलंब

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

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

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

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

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

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

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

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

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

फायरबेस परफॉर्मेंस मॉनिटरिंग डैशबोर्ड में मेट्रिक्स बोर्ड की एक छवि

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

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

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

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

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

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

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

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

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

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

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

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

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

अगले कदम

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

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

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