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

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

खास जानकारी

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 पर सेट करें. इसके अलावा, सीपीयू को 20 गुना धीमा पर सेट करें. इस सेक्शन में, नेटवर्क कैश मेमोरी में सेव करने की सुविधा बंद करें check_box को भी चुनें.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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