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

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 उपयोगकर्ता अनुभव रिपोर्ट से भी फ़ील्ड डेटा फ़ेच किया जा सकता है. साथ ही, अपनी साइट के उपयोगकर्ताओं के अनुभव की तुलना, लोकल मेट्रिक से की जा सकती है.

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

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

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

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

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

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

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

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

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

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

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

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