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