अपनी वेबसाइट की परफ़ॉर्मेंस के बारे में काम की और इस्तेमाल के उदाहरणों के हिसाब से अहम जानकारी पाने के लिए, परफ़ॉर्मेंस के बारे में अहम जानकारी पैनल का इस्तेमाल करें.
खास जानकारी
परफ़ॉर्मेंस के बारे में अहम जानकारी पैनल की मदद से, ये काम किए जा सकते हैं:
- पेज लोड की परफ़ॉर्मेंस को रिकॉर्ड करना और उसे मेज़र करना.
- वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक देखें.
- नेटवर्क गतिविधि देखें.
- सीपीयू और नेटवर्क की धीमी स्पीड को सिम्युलेट करना.
- रिकॉर्डिंग इंपोर्ट और एक्सपोर्ट करना.
नया पैनल क्यों बनाया जाए?
परफ़ॉर्मेंस की अहम जानकारी वाला नया पैनल, मौजूदा परफ़ॉर्मेंस पैनल के साथ काम करते समय डेवलपर की इन तीन समस्याओं को हल करने के लिए एक प्रयोग है:
- बहुत ज़्यादा जानकारी दी गई है. रीडिज़ाइन किए गए यूज़र इंटरफ़ेस (यूआई) की मदद से, परफ़ॉर्मेंस की अहम जानकारी पैनल, डेटा को आसानी से समझने लायक बनाता है और सिर्फ़ काम की जानकारी दिखाता है.
- इस्तेमाल के उदाहरणों के बीच अंतर करना मुश्किल है. परफ़ॉर्मेंस के बारे में अहम जानकारी देने वाला पैनल, इस्तेमाल के उदाहरण के हिसाब से विश्लेषण की सुविधा देता है. फ़िलहाल, इस सुविधा का इस्तेमाल सिर्फ़ पेज लोड के इस्तेमाल के उदाहरण के लिए किया जा सकता है. आने वाले समय में, आपके सुझाव, शिकायत या राय (जैसे कि इंटरैक्टिव) के आधार पर, इस सुविधा के और भी फ़ायदे मिलेंगे.
- ब्राउज़र को असरदार तरीके से इस्तेमाल करने के लिए, उसके काम करने के तरीके की अच्छी जानकारी होना ज़रूरी है. परफ़ॉर्मेंस की अहम जानकारी पैनल, अहम जानकारी पैनल में मौजूद अहम जानकारी को हाइलाइट करता है. साथ ही, समस्याओं को ठीक करने के तरीके के बारे में अहम सुझाव भी देता है.
परिचय
इस ट्यूटोरियल में, परफ़ॉर्मेंस की अहम जानकारी पैनल की मदद से, पेज लोड की परफ़ॉर्मेंस को मेज़र करने और समझने का तरीका बताया गया है. ऊपर दिए गए इस ट्यूटोरियल का वीडियो वर्शन पढ़ना या देखना जारी रखें.
परफ़ॉर्मेंस की अहम जानकारी वाला पैनल खोलें
- DevTools खोलें.
ज़्यादा विकल्प > ज़्यादा टूल > परफ़ॉर्मेंस की अहम जानकारी पर क्लिक करें.
इसके अलावा, परफ़ॉर्मेंस की अहम जानकारी पैनल खोलने के लिए, कमांड मेन्यू का इस्तेमाल करें.
परफ़ॉर्मेंस रिकॉर्ड करना
परफ़ॉर्मेंस के बारे में अहम जानकारी पैनल, सामान्य और इस्तेमाल के उदाहरण के हिसाब से (उदाहरण के लिए, पेज लोड) परफ़ॉर्मेंस रिकॉर्ड कर सकता है.
- नए टैब में यह डेमो पेज खोलें. इसके बाद, पेज पर परफ़ॉर्मेंस की अहम जानकारी वाला पैनल खोलें.
रिकॉर्डिंग के दौरान, नेटवर्क और सीपीयू को कम किया जा सकता है. इस ट्यूटोरियल के लिए, कैश मेमोरी बंद करें को चुनें. इसके बाद, ड्रॉप-डाउन मेन्यू में सीपीयू को चार गुना धीमा करें पर सेट करें:
पेज लोड मेज़र करें पर क्लिक करें. पेज के फिर से लोड होने के दौरान, DevTools परफ़ॉर्मेंस मेट्रिक रिकॉर्ड करता है. पेज लोड होने के कुछ सेकंड बाद, रिकॉर्डिंग अपने-आप बंद हो जाती है.
परफ़ॉर्मेंस की रिकॉर्डिंग फिर से चलाना
रिकॉर्डिंग को फिर से चलाने के लिए, सबसे नीचे मौजूद कंट्रोल का इस्तेमाल करें.
इसका तरीका यहां बताया गया है.
- रिकॉर्डिंग चलाने के लिए चलाएं पर क्लिक करें.
- रीप्ले को रोकने के लिए, रोकें पर क्लिक करें.
- ड्रॉप-डाउन की मदद से, वीडियो चलाने की स्पीड को कम या ज़्यादा करें.
- विज़ुअल की झलक दिखाने या छिपाने के लिए, विज़ुअल की झलक टॉगल करें पर क्लिक करें.
परफ़ॉर्मेंस रिकॉर्डिंग पर जाना
DevTools अपने-आप ज़ूम आउट हो जाता है, ताकि पूरी रिकॉर्डिंग की टाइमलाइन दिख सके. ज़ूम करके, रिकॉर्डिंग को नेविगेट किया जा सकता है और टाइमलाइन को मूव किया जा सकता है.
टाइमलाइन को ज़ूम करने और बाईं और दाईं ओर ले जाने के लिए, इन नेविगेशन बटन का इस्तेमाल करें:
- किसी खास फ़्रेम को देखने के लिए, प्लेलिस्ट को आगे-पीछे करने के लिए टाइमलाइन पर क्लिक करें.
- ज़ूम करने के लिए, सबसे नीचे मौजूद ज़ूम इन करें और ज़ूम आउट करें कंट्रोल पर क्लिक करें. इस मामले में, प्लेहेड के आधार पर ज़ूम किया जाता है.
- टाइमलाइन को बाईं और दाईं ओर ले जाने के लिए, नीचे मौजूद हॉरिज़ॉन्टल स्क्रोल बार को खींचें और छोड़ें.
इसके अलावा, आपके पास कीबोर्ड शॉर्टकट का इस्तेमाल करने का विकल्प भी है. शॉर्टकट देखने के लिए, बटन पर क्लिक करें.
शॉर्टकट का इस्तेमाल करते समय, माउस कर्सर के आधार पर ज़ूम किया जाता है.
परफ़ॉर्मेंस के बारे में अहम जानकारी देखें
अहम जानकारी पैनल में, परफ़ॉर्मेंस की अहम जानकारी की सूची पाएं. परफ़ॉर्मेंस से जुड़ी संभावित समस्याओं का पता लगाकर उन्हें ठीक करें.
हर अहम जानकारी पर कर्सर घुमाकर उसे मुख्य ट्रैक में हाइलाइट करें.
किसी इनसाइट पर क्लिक करके, उसे जानकारी पैनल में खोलें. जैसे, रेंडर ब्लॉकिंग का अनुरोध. समस्या को और समझने के लिए, इसके फ़ाइल, समस्या, कैसे ठीक करें सेक्शन वगैरह की जांच करें.
वेबसाइट की परफ़ॉर्मेंस के बारे में अहम जानकारी देने वाली मेट्रिक देखना
वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी, Google की एक पहल है. इसमें क्वालिटी सिग्नल के लिए एक साथ दिशा-निर्देश दिए गए हैं, जो वेब पर उपयोगकर्ता को शानदार अनुभव देने के लिए ज़रूरी हैं.
इन मेट्रिक को टाइमलाइन और अहम जानकारी पैनल में देखा जा सकता है.
मेट्रिक के बारे में ज़्यादा जानने के लिए, टाइमलाइन में दी गई अहम जानकारी पर कर्सर घुमाएं.
सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय के बारे में जानें
सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय (एलसीपी), वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक में से एक है. यह मेट्रिक, व्यूपोर्ट में दिखने वाले सबसे बड़े इमेज या टेक्स्ट ब्लॉक को रेंडर होने में लगने वाले समय की जानकारी देती है. यह इस बात से तय होता है कि पेज पहली बार लोड होना कब शुरू हुआ था.
अच्छा एलसीपी स्कोर 2.5 सेकंड या उससे कम होता है.
अगर आपके पेज के सबसे बड़े कॉन्टेंटफ़ुल पेंट को रेंडर होने में ज़्यादा समय लगता है, तो आपको टाइमलाइन में पीले रंग के स्क्वेयर या लाल त्रिभुज के साथ एलसीपी बैज दिखेगा.
जानकारी पैनल खोलने के लिए, टाइमलाइन पर या दाईं ओर मौजूद अहम जानकारी पैनल में एलसीपी बैज पर क्लिक करें. पैनल में, देरी की संभावित वजहों और उन्हें ठीक करने के सुझाव देखे जा सकते हैं.
इस उदाहरण में, कोई अनुरोध रेंडरिंग को ब्लॉक करता है. इसे ठीक करने के लिए, इनलाइन में ज़रूरी स्टाइल लागू की जा सकती हैं. ज़्यादा जानने के लिए, रेंडर ब्लॉक करने वाले संसाधनों को हटाएं देखें.
एलसीपी रेंडर होने में लगने वाले समय के सब-पार्ट देखने के लिए, नीचे की ओर स्क्रोल करके, जानकारी > समय की जानकारी सेक्शन पर जाएं.
एलसीपी रेंडर होने में लगने वाले समय में ये सब-पार्ट शामिल होते हैं:
| एलसीपी का सबसे छोटा हिस्सा | ब्यौरा |
|---|---|
| टाइम टू फ़र्स्ट बाइट (TTFB) | उपयोगकर्ता के पेज लोड करने के अनुरोध करने से लेकर, ब्राउज़र को एचटीएमएल दस्तावेज़ के जवाब का पहला बाइट मिलने तक लगने वाला समय. |
| संसाधन लोड होने में देरी | टीटीएफ़बी और ब्राउज़र के एलसीपी रिसॉर्स को लोड करने के बीच का अंतर. |
| संसाधन लोड होने में लगने वाला समय | एलसीपी संसाधन को लोड होने में लगने वाला समय. |
| एलिमेंट के रेंडर होने में लगने वाला समय | एलसीपी रिसॉर्स के पूरी तरह लोड होने के बीच का अंतर, जब तक एलसीपी एलिमेंट के पूरी तरह रेंडर नहीं हो जाता. |
अगर किसी एलसीपी एलिमेंट को रेंडर करने के लिए संसाधन लोड करने की ज़रूरत नहीं होती है, तो संसाधन लोड होने में लगने वाली देरी और समय को हटा दिया जाता है. उदाहरण के लिए, अगर एलिमेंट एक टेक्स्ट नोड है जिसे सिस्टम फ़ॉन्ट के साथ रेंडर किया गया है.
लेआउट में हुए बदलावों की गतिविधि देखना
लेआउट शिफ़्ट ट्रैक में, लेआउट शिफ़्ट की गतिविधि देखें.
लेआउट शिफ़्ट एक सेशन विंडो में ग्रुप किए जाते हैं. इस उदाहरण में, दो सेशन विंडो हैं. सेशन विंडो के बीच में अंतर होता है.
कुल लेआउट शिफ़्ट (सीएलएस), वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक में से एक है. लेआउट में होने वाले बदलावों की संभावित समस्याओं और उनकी वजहों की पहचान करने के लिए, लेआउट में बदलाव ट्रैक का इस्तेमाल करें.
सीएलएस मेट्रिक को बेहतर बनाते समय, हमेशा सबसे बड़ी सेशन विंडो से शुरू करें. हमारे उदाहरण में, सेशन विंडो 1 सबसे बड़ी विंडो है. यह बैकग्राउंड के रंग और लेवल के आधार पर तय होती है.
लेआउट में बदलाव की जानकारी देखने, संभावित मुख्य वजहों और जिन एलिमेंट पर असर पड़ा है उनकी पहचान करने के लिए, स्क्रीनशॉट पर क्लिक करें.
हमारे उदाहरण में, इसकी मुख्य वजह मीडिया का साइज़ नहीं है. इसे ठीक करने का तरीका जानने के लिए, कुल लेआउट शिफ़्ट को ऑप्टिमाइज़ करना लेख पढ़ें.
लेआउट शिफ़्ट स्कोर को समझना
स्कोर की गिनती करने का तरीका समझने के लिए, जानकारी पैनल में विंडो सेक्शन का इस्तेमाल करें. विंडो से पता चलता है कि मौजूदा लेआउट शिफ़्ट किस सेशन विंडो से जुड़ा है.
अगर पूरा पेज शिफ़्ट हो जाता है, तो हर लेआउट शिफ़्ट का ज़्यादा से ज़्यादा स्कोर 1 होता है. हमारे उदाहरण में, पहले लेआउट शिफ़्ट का स्कोर 0.15 था. दूसरे लेआउट शिफ़्ट को 0.041 स्कोर मिला.
इस सेशन विंडो का कुल स्कोर 0.19 है. सीएलएस थ्रेशोल्ड के आधार पर, इसमें सुधार की ज़रूरत है. सेशन विंडो के बैकग्राउंड का रंग भी यही होता है.
सेशन विंडो का बैकग्राउंड ग्राफ़, समय के साथ बढ़ता है. लेआउट शिफ़्ट का कुल स्कोर, उस समय हुई बढ़ोतरी को दिखाता है.
नेटवर्क पर की जाने वाली गतिविधि देखना
नेटवर्क ट्रैक में नेटवर्क गतिविधि देखें. नेटवर्क की सभी गतिविधियां देखने के लिए, नेटवर्क ट्रैक को बड़ा किया जा सकता है. साथ ही, जानकारी देखने के लिए हर आइटम पर क्लिक किया जा सकता है.
रेंडरर की गतिविधि देखें
रेंडरर ट्रैक में रेंडर करने की गतिविधि देखें. गतिविधियां देखने के लिए, हर रेंडरर को बड़ा किया जा सकता है. साथ ही, जानकारी देखने के लिए हर आइटम पर क्लिक किया जा सकता है.
जीपीयू पर की गई गतिविधि देखें
GPU ट्रैक में, जीपीयू की गतिविधि देखें. जीपीयू ट्रैक डिफ़ॉल्ट रूप से छिपा होता है. इसे चालू करने के लिए, सेटिंग में जाकर जीपीयू पर सही का निशान लगाएं.
उपयोगकर्ता समय देखें
परफ़ॉर्मेंस के कस्टम मेज़र देखने के लिए, उपयोगकर्ता के ऐप्लिकेशन में बिताए गए समय का इस्तेमाल करें. साथ ही, समय ट्रैक की मदद से, ऐप्लिकेशन में बिताए गए समय को विज़ुअलाइज़ करें. ज़्यादा जानकारी के लिए, User Timing API देखें.
यह डेमो पेज देखें, जो टेक्स्ट लोड होने में लगने वाले समय का हिसाब लगाता है.
उपयोगकर्ता के ऐप्लिकेशन पर आने के समय देखने के लिए:
- अपने ऐप्लिकेशन में
performance.mark()से स्थानों को चिह्नित करें. performance.measure()का इस्तेमाल करके, मार्क के बीच बीता हुआ समय मेज़र करें.- परफ़ॉर्मेंस रिकॉर्ड करना.
- समय ट्रैक पर मेज़रमेंट देखें. अगर आपको ट्रैक नहीं दिख रहा है, तो सेटिंग में जाकर उपयोगकर्ता के ट्रैक पर बिताए गए समय की जानकारी देखें.
- ज़्यादा जानकारी के लिए, ट्रैक पर दिखने वाले समय पर क्लिक करें.
यूज़र इंटरफ़ेस (यूआई) को पसंद के मुताबिक बनाना
टाइमलाइन और ट्रैक को पसंद के मुताबिक बनाने के लिए, पैनल के सेटिंग आइकॉन पर क्लिक करें. इसके बाद, अपने पसंदीदा विकल्प चुनें.
रिकॉर्डिंग को एक्सपोर्ट करना
रिकॉर्डिंग सेव करने के लिए, एक्सपोर्ट करें पर क्लिक करें.
रिकॉर्डिंग इंपोर्ट करना
किसी रिकॉर्डिंग को लोड करने के लिए, इंपोर्ट करें को चुनें.
रिकॉर्डिंग मिटाना
रिकॉर्डिंग मिटाने के लिए:
- मिटाएं पर क्लिक करें. पुष्टि करने वाला डायलॉग बॉक्स खुलता है.
- डायलॉग में, मिटाने की पुष्टि करने के लिए मिटाएं पर क्लिक करें.