प्रदर्शन पैनल: अपनी वेबसाइट के प्रदर्शन का विश्लेषण करें

अपनी वेबसाइट की परफ़ॉर्मेंस का विश्लेषण करने के लिए, परफ़ॉर्मेंस पैनल का इस्तेमाल करें.

खास जानकारी

परफ़ॉर्मेंस पैनल की मदद से, अपने वेब ऐप्लिकेशन की सीपीयू परफ़ॉर्मेंस प्रोफ़ाइल रिकॉर्ड की जा सकती हैं. प्रोफ़ाइलों का विश्लेषण करके परफ़ॉर्मेंस में आने वाली रुकावटों का पता लगाएं. साथ ही, संसाधनों के इस्तेमाल को ऑप्टिमाइज़ करने के तरीके भी जानें.

ये काम करने के लिए, परफ़ॉर्मेंस पैनल का इस्तेमाल करें:

• परफ़ॉर्मेंस प्रोफ़ाइल रिकॉर्ड करें.
• कैप्चर सेटिंग में बदलाव करें.
• परफ़ॉर्मेंस रिपोर्ट का विश्लेषण करना.

अपनी वेबसाइट की परफ़ॉर्मेंस को बेहतर बनाने से जुड़ी गाइड के लिए, रनटाइम की परफ़ॉर्मेंस का विश्लेषण करना लेख पढ़ें.

परफ़ॉर्मेंस पैनल खोलें

परफ़ॉर्मेंस पैनल खोलने के लिए, DevTools खोलें और सबसे ऊपर मौजूद टैब के सेट से परफ़ॉर्मेंस चुनें.

इसके अलावा, कमांड मेन्यू की मदद से परफ़ॉर्मेंस पैनल खोलने के लिए, यह तरीका अपनाएं:

1. DevTools खोलें.
2. इसे दबाकर कमांड मेन्यू खोलें:
3. macOS: Command+Shift+P
4. Windows, Linux, ChromeOS: Control+Shift+P
5. Performance panel टाइप करना शुरू करें. इसके बाद, परफ़ॉर्मेंस पैनल दिखाएं को चुनें और Enter दबाएं.

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को लाइव देखना

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

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

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

किसी मेट्रिक के स्कोर का ब्रेकडाउन देखने के लिए, मेट्रिक की वैल्यू पर कर्सर घुमाएं. इससे आपको टूलटिप दिखेगा.

अपने अनुभव की तुलना अपने उपयोगकर्ताओं के अनुभव से करना

Chrome UX रिपोर्ट से भी फ़ील्ड का डेटा फ़ेच किया जा सकता है. साथ ही, अपनी साइट के उपयोगकर्ताओं के अनुभव की तुलना, स्थानीय मेट्रिक से की जा सकती है.

फ़ील्ड डेटा जोड़ने के लिए:

1. परफ़ॉर्मेंस में > अगले चरण > फ़ील्ड डेटा, सेट अप करें पर क्लिक करें.

   

2. फ़ील्ड डेटा फ़ेच करने की सुविधा कॉन्फ़िगर करें डायलॉग में, निजता से जुड़ी जानकारी देखें और ठीक है पर क्लिक करें.

   बेहतर: डेवलपमेंट और प्रोडक्शन एनवायरमेंट के बीच मैपिंग सेट अप करें...

   इसके अलावा, सबसे काम का फ़ील्ड डेटा अपने-आप पाने के लिए, अपने डेवलपमेंट और प्रोडक्शन ऑरिजिन के बीच कई मैपिंग सेट अप की जा सकती हैं:

   1. डायलॉग विंडो में, ऐडवांस सेक्शन को बड़ा करें और + नया पर क्लिक करें.

   2. मैपिंग टेबल में, अपने डेवलपमेंट और प्रोडक्शन के यूआरएल डालें और + पर क्लिक करें.

      

      उदाहरण के लिए, http://localhost:8080 को https://example.com पर मैप करने से, localhost:8080/page1 पर जाने पर example.com/page1 का फ़ील्ड डेटा दिखेगा.

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

      सेटअप के बाद, फ़ील्ड डेटा को फ़ेच करने की सेटिंग बदलने के लिए, फ़ील्ड डेटा पर क्लिक करें > कॉन्फ़िगर करें

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

   

   मेट्रिक स्कोर की जानकारी पाने के लिए, टूलटिप देखने के लिए मेट्रिक की वैल्यू पर कर्सर घुमाएं.

अपने एनवायरमेंट को कॉन्फ़िगर करना, ताकि यह आपके उपयोगकर्ताओं से बेहतर तरीके से मैच कर सके

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

अपने एनवायरमेंट को कॉन्फ़िगर करने के लिए:

1. अगर कोई मेट्रिक कार्ड है, तो हर मेट्रिक कार्ड में, जांच की स्थानीय शर्तों को ध्यान में रखें सेक्शन को बड़ा करें और सुझावों को पढ़ें.

   

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

2. इस उदाहरण के एनवायरमेंट कॉन्फ़िगरेशन का मिलान करने के लिए:

   1. अपने व्यूपोर्ट को स्क्रीन के सामान्य साइज़ में से किसी एक पर सेट करें (उदाहरण के लिए, 720p या 1080p). खास डिवाइसों और स्क्रीन साइज़ को एम्युलेट करने के लिए, एलिमेंट पैनल में डिवाइस मोड का इस्तेमाल किया जा सकता है.
   2. इस उदाहरण में, वेबसाइट के 82% उपयोगकर्ता ब्राउज़ करने के लिए डेस्कटॉप का इस्तेमाल करते हैं. अपनी स्थानीय मेट्रिक के स्कोर की तुलना सही फ़ील्ड डेटा से करने के लिए, फ़ील्ड डेटा से डेस्कटॉप चुनें > डिवाइस ड्रॉप-डाउन सूची.
   3. परिवेश सेटिंग सेक्शन में, नेटवर्क ड्रॉप-डाउन सूची को इस पर सेट करें, उदाहरण के लिए, तेज़ 4G और CPU, उदाहरण के लिए, 20x धीमा. यह भी पक्का करें कि आपने उसी सेक्शन में check_box नेटवर्क कैश मेमोरी बंद करें को चुना हो.

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

   

   ऐसा लगता है कि मेट्रिक के स्कोर अब आपके उपयोगकर्ताओं के अनुभव से ज़्यादा मिलते-जुलते हैं. इसलिए, मेट्रिक कार्ड से अपना टेस्टिंग सेटअप तैयार करने के लिए, असल उपयोगकर्ता अनुभव पर गौर करें सेक्शन हटा दिए गए हैं.

इसके बाद, अब अपनी वेबसाइट की वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को बेहतर बनाया जा सकता है:

• एलसीपी को ऑप्टिमाइज़ करना
• आईएनपी को ऑप्टिमाइज़ करना
• सीएलएस को ऑप्टिमाइज़ करें

परफ़ॉर्मेंस रिपोर्ट कैप्चर करना और उसका विश्लेषण करना

अगले सेक्शन में, प्रोफ़ाइल रिकॉर्ड करने, कैप्चर सेटिंग बदलने, और रिपोर्ट का विश्लेषण करने के तरीके के बारे में निर्देशों का पालन करें.

परफ़ॉर्मेंस प्रोफ़ाइल रिकॉर्ड करें

जब आप रिकॉर्ड करने के लिए तैयार होते हैं, तब परफ़ॉर्मेंस पैनल आपको ये विकल्प देता है:

• रनटाइम की परफ़ॉर्मेंस रिकॉर्ड करना
• लोड होने की परफ़ॉर्मेंस रिकॉर्ड करना
• रिकॉर्डिंग के दौरान स्क्रीनशॉट लेना
• रिकॉर्डिंग के दौरान गार्बेज कलेक्शन को फ़ोर्स करना
• रिकॉर्डिंग को सेव करना
• रिकॉर्डिंग लोड करना
• रिकॉर्डिंग मिटाना

कैप्चर करने की सेटिंग बदलें

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

कैप्चर सेटिंग मेन्यू में जाकर, ये विकल्प चुनें:

• JavaScript सैंपल बंद करें: इससे मुख्य ट्रैक में दिखने वाले JavaScript कॉल स्टैक की रिकॉर्डिंग बंद हो जाती है. ये स्टैक, रिकॉर्डिंग के दौरान कॉल किए जाते हैं. इससे परफ़ॉर्मेंस में होने वाले खर्च में कमी आएगी.
• बेहतर पेंट इंस्ट्रुमेंटेशन चालू करें (धीमा): इससे बेहतर पेंट इंस्ट्रुमेंटेशन कैप्चर किया जाता है. परफ़ॉर्मेंस में काफ़ी रुकावट डालता है.
• सीएसएस सिलेक्टर के आंकड़े दिखाने की सुविधा (धीमा): इससे सीएसएस सिलेक्टर के आंकड़ों को कैप्चर किया जाता है. परफ़ॉर्मेंस में काफ़ी रुकावट डालता है.
• सीपीयू थ्रॉटलिंग: सीपीयू की धीमी स्पीड को सिम्युलेट करें.
• नेटवर्क को थ्रॉटलिंग: नेटवर्क की धीमी स्पीड को सिम्युलेट करें.
• हार्डवेयर को एक साथ कई काम करने की सुविधा: navigator.hardwareConcurrency की रिपोर्ट की गई वैल्यू को कॉन्फ़िगर करें.

परफ़ॉर्मेंस रिपोर्ट का विश्लेषण करना

परफ़ॉर्मेंस पैनल का इस्तेमाल करने के तरीके की पूरी गाइड के लिए, परफ़ॉर्मेंस रिकॉर्डिंग का विश्लेषण करना लेख पढ़ें.

नीचे गाइड के विषयों के समूह के साथ-साथ अन्य उपयोगी दस्तावेज़ दिए गए हैं:

रिपोर्ट में नेविगेट करने का तरीका जानने के लिए:

• रिकॉर्डिंग में एक जगह से दूसरी जगह जाना
• खोज गतिविधियां
• इवेंट शुरू करने वालों को ट्रैक करना

अपने वर्कफ़्लो के लिए ज़रूरी चीज़ों पर फ़ोकस करने का तरीका जानने के लिए:

• ट्रैक का क्रम बदलना और उन्हें छिपाना
• फ़्लेम चार्ट में फ़ंक्शन और उनके चाइल्ड को छिपाना
• ब्रेडक्रंब बनाना और ज़ूम लेवल के बीच स्विच करना

बॉटम-अप, कॉल ट्री, और इवेंट लॉग टैब के बारे में जानने के लिए:

• टेबल में गतिविधियां देखना

रिपोर्ट का विश्लेषण करने का तरीका जानने के लिए:

• मुख्य थ्रेड की गतिविधि देखना
• फ़्लेम चार्ट को पढ़ना
• स्क्रीनशॉट देखना
• यादें की मेट्रिक देखना
• रिकॉर्डिंग के किसी हिस्से की अवधि देखना
• स्टाइल को फिर से कैलकुलेट करने वाले इवेंट के दौरान, सीएसएस सिलेक्टर की परफ़ॉर्मेंस का विश्लेषण करना
• परफ़ॉर्मेंस पैनल के साथ प्रोफ़ाइल Node.js की परफ़ॉर्मेंस
• फ़्रेम प्रति सेकंड (एफ़पीएस) का विश्लेषण करना
• टाइमलाइन इवेंट का रेफ़रंस

इन पैनल की मदद से परफ़ॉर्मेंस को बेहतर बनाएं

ऐसे अन्य पैनल खोजें जिनसे आपको अपनी वेबसाइट की परफ़ॉर्मेंस को बेहतर बनाने में मदद मिल सकती है:

• Lighthouse: वेबसाइट की स्पीड को ऑप्टिमाइज़ करें
• मेमोरी: मेमोरी पैनल की खास जानकारी
• परफ़ॉर्मेंस के बारे में अहम जानकारी: अपनी वेबसाइट की परफ़ॉर्मेंस के बारे में अहम जानकारी पाना
• रेंडरिंग: रेंडरिंग की परफ़ॉर्मेंस से जुड़ी समस्याओं के बारे में जानें
• समस्याएं: समस्याओं का पता लगाना और उन्हें ठीक करना
• परफ़ॉर्मेंस: लेयर की जानकारी देखना