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

Dale St. Marthe
Dale St. Marthe
LinkedIn

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

खास जानकारी

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

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

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

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

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

परफ़ॉर्मेंस पैनल खोलने के लिए, 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 के लिए फ़ील्ड डेटा दिखेगा.

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

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

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

    फ़ेच किए जाने के बाद, फ़ील्ड डेटा का कलेक्शन.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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