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

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

खास जानकारी

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

   

2. Configure field data fetching डायलॉग बॉक्स में, Privacy disclosure देखें. इसके बाद, Ok पर क्लिक करें.

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

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

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

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

      

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

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

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

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

   

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

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

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

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

1. हर मेट्रिक कार्ड में, अपना टेस्टिंग सेटअप तैयार करने के लिए, असल उपयोगकर्ता अनुभव पर गौर करें सेक्शन को बड़ा करें. अगर कोई सुझाव दिया गया है, तो उसे पढ़ें.

   

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

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

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

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

   

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

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

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

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

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

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

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

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

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

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

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

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

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

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

यहां गाइड में शामिल विषयों के ग्रुप के साथ-साथ, अन्य मददगार दस्तावेज़ों के बारे में बताया गया है:

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

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

अपनी वेबसाइट की परफ़ॉर्मेंस के बारे में अहम जानकारी पाने के लिए, परफ़ॉर्मेंस के बारे में अहम जानकारी का इस्तेमाल करें:

• परफ़ॉर्मेंस के बारे में अहम जानकारी

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

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

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

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

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

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

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

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

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