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