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