Catch up on highlights from Firebase at Google I/O 2023. Learn more

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

पहला पेंट

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

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

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

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

पहला संतुष्ट पेंट

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

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

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

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

domInteractive

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

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

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

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

domContentLoadedEventEnd

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

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

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

loadEventEnd

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

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

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

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

पहला इनपुट विलंब

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

अगले कदम

  • परफ़ॉर्मेंस डेटा की जांच करने के लिए एट्रिब्यूट का इस्तेमाल करने के बारे में ज़्यादा जानें.

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

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