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

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

खास जानकारी

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

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

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

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

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

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

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

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

Core Web Vitals को रीयल टाइम में देखना

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

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

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

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

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

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

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

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: वेबसाइट की स्पीड ऑप्टिमाइज़ करना
• मेमोरी: मेमोरी पैनल की खास जानकारी
• रेंडरिंग: रेंडरिंग परफ़ॉर्मेंस से जुड़ी समस्याएं ढूंढना
• समस्याएं: समस्याएं ढूंढना और उन्हें ठीक करना
• परफ़ॉर्मेंस: लेयर की जानकारी देखना

अन्य संसाधन