वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाला एक्सटेंशन अब आपको डीबग करने के बारे में ज़्यादा जानकारी दिखाता है. इससे आपको वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी से जुड़ी समस्याओं की मुख्य वजहों का पता लगाने में मदद मिलती है.
पब्लिश किया गया: 4 मई, 2023
वेबसाइट की परफ़ॉर्मेंस की मेट्रिक का एक्सटेंशन, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को आसानी से ऐक्सेस करने की सुविधा देता है. इससे डेवलपर को वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का आकलन करने और उससे जुड़ी समस्याओं को हल करने में मदद मिलती है. यह Chrome की टीम के उपलब्ध कराए गए अन्य टूल के साथ काम करता है. इससे डेवलपर को अपनी वेबसाइटों पर लोगों के अनुभव को बेहतर बनाने में मदद मिलती है.
हमने इस एक्सटेंशन को अपडेट किया है, ताकि डेवलपर को डीबग करने से जुड़ी ज़्यादा जानकारी मिल सके. इससे उन्हें परफ़ॉर्मेंस से जुड़ी समस्याओं को समझने और उन्हें हल करने में आसानी होगी.
कंसोल में डीबग की जानकारी दिखाना
वेब विटल्स एक्सटेंशन में, "कंसोल लॉगिंग" डीबग करने का विकल्प पहले से मौजूद है. इसे विकल्प स्क्रीन में चालू किया जा सकता है:
इस आखिरी अपग्रेड से पहले, यह web-vitals library (जो एक्सटेंशन के लिए काम करता है) के आउटपुट को JSON ऑब्जेक्ट में लॉग करता था:
इसके बाद, पूरी जानकारी पाने के लिए इस ऑब्जेक्ट को बड़ा किया जा सकता है. साथ ही, एलसीपी इमेज जैसे एलिमेंट को मुख्य पैनल में हाइलाइट करने के लिए, उन पर कर्सर घुमाया जा सकता है:
यह मददगार था, लेकिन आउटपुट फ़ॉर्मैट खास तौर पर उपयोगकर्ताओं के लिए आसान नहीं था. हमें लगा कि हम डेवलपर को बेहतर अनुभव दे सकते हैं. इसलिए, हमने एक्सटेंशन को बेहतर बनाया है, ताकि सबसे ज़रूरी जानकारी ज़्यादा साफ़ तौर पर दिखे. साथ ही, हमने ज़्यादा जानकारी पाने के लिए, पूरा ऑब्जेक्ट भी शामिल किया है.
हर मेट्रिक के लिए डीबग करने से जुड़ी नई जानकारी
नई रिलीज़ में, हमने डीबग की नई जानकारी को ऐसे फ़ॉर्मैट में जोड़ा है जिसे आसानी से पढ़ा जा सकता है. इससे आपको समस्याओं को ढूंढने और उन्हें हल करने में मदद मिलेगी. हर मेट्रिक के लिए अलग-अलग जानकारी दी जाती है, क्योंकि हर मेट्रिक अलग होती है.
एलसीपी डीबग की जानकारी
सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) के लिए, हम एलिमेंट और एलसीपी को ऑप्टिमाइज़ करने से जुड़ी गाइड में बताए गए चार चरणों की जानकारी देते हैं:
एलसीपी का समय (2,876 मिलीसेकंड या करीब 2.9 सेकंड) को ऐंबर रंग में हाइलाइट किया गया है, क्योंकि यह "सुधार की ज़रूरत है" कैटगरी में आता है.
इस उदाहरण में, हम देखते हैं कि Resource load time सबसे लंबी अवधि है. इसलिए, आपको अपने एलसीपी के समय को ऑप्टिमाइज़ करने की कोशिश करनी होगी. ऐसा करने के लिए, आपको इन्हें किसी अलग डोमेन पर होस्ट करने से बचना होगा. इसके अलावा, छोटी इमेज या बेहतर फ़ॉर्मैट का इस्तेमाल करके भी ऐसा किया जा सकता है. इस मामले में ऐसा इसलिए होता है, क्योंकि आउटपुट को दिखाने के लिए आर्टिफ़िशियल तरीके से धीमा कर दिया जाता है—web.dev एक तेज़ साइट है**
इमेज को हाइलाइट करने के लिए, एलिमेंट पर कर्सर घुमाया जा सकता है:
एलिमेंट पर राइट क्लिक करके भी, उसे एलिमेंट पैनल में दिखाया जा सकता है.
यहां एलसीपी एलिमेंट एक इमेज है. दाईं ओर मौजूद कंसोल में उस पर कर्सर घुमाने पर, बाईं ओर मौजूद साइट पर भी उस एलिमेंट को हाइलाइट किया जाता है.
सीएलएस डीबग करने की जानकारी
कुल लेआउट शिफ़्ट (सीएलएस) में योगदान देने वाले शिफ़्ट अब सूची में भी दिखते हैं. साथ ही, काम के एलिमेंट को हाइलाइट करने के लिए, उस पर कर्सर घुमाया जा सकता है:
ऊपर दिए गए स्क्रीनशॉट में दो बदलाव दिखाए गए हैं. पहला बदलाव दो एलिमेंट से बना है (जब बैनर इमेज लोड होती है और उसके नीचे मौजूद कॉन्टेंट को डाउनलोड किया जाता है). दूसरा बदलाव चार एलिमेंट से बना है (जब डाइनैमिक विज्ञापन लोड होता है और पेज का ज़्यादातर हिस्सा नीचे की ओर शिफ़्ट होता है).
इस स्क्रीनशॉट में, दाईं ओर मौजूद कंसोल में h2 एलिमेंट पर कर्सर घुमाया जा रहा है. इससे बाईं ओर मौजूद साइट पर एलिमेंट हाइलाइट हो जाता है.
एफ़आईडी की डीबग जानकारी
फ़र्स्ट इनपुट डिले (एफ़आईडी) के लिए, हम उस एलिमेंट को दिखाते हैं जिस पर असर पड़ा है. इस एलिमेंट को पेज पर हाइलाइट करने के लिए, उस पर कर्सर घुमाया जा सकता है. साथ ही, हम सामान्य तौर पर पूरे JSON ऑब्जेक्ट के साथ इंटरैक्शन टाइप भी दिखाते हैं:
INP डीबग की जानकारी
पेज के रिस्पॉन्स में लगने वाला समय (आईएनपी) के लिए, हमने दो नए लॉग जोड़े हैं:
- आईएनपी - सबसे लंबा इंटरैक्शन
- इंटरैक्शन - सभी इंटरैक्शन
आईएनपी मेट्रिक
सबसे पहले, हम INP मेट्रिक में बदलाव होने पर उसे हाइलाइट करते हैं:
LCP की तरह ही, एक्सटेंशन भी INP के समय को तीन चरणों में बांटता है:
- इनपुट में देरी
- प्रोसेस होने में लगने वाला समय
- प्रज़ेंटेशन में देरी
इससे आपको यह पता चलता है कि इवेंट दूसरे इवेंट (इनपुट में लगा समय) की वजह से धीमा हुआ था या आपके कोड (प्रोसेसिंग में लगने वाला समय) की वजह से इवेंट हैंडलर धीमा हुआ था. इसके अलावा, यह भी पता चलता है कि पोस्ट-प्रोसेसिंग रेंडर में लगा समय (प्रज़ेंटेशन में लगा समय) या इनमें से दो या उससे ज़्यादा वजहों से इवेंट धीमा हुआ था.
इंटरैक्शन
मुख्य थ्रेड को ब्लॉक करने वाले पिछले इंटरैक्शन की वजह से, INP धीमा हो सकता है. इससे इनपुट में ज़्यादा देरी हो सकती है. इस वजह से, हम सभी इंटरैक्शन को आईएनपी लॉगिंग के जैसे फ़ॉर्मैट में दिखाते हैं:
इसकी मदद से, किसी वेबसाइट के साथ इंटरैक्ट करके, उसे "लाइव ट्रेस" किया जा सकता है. साथ ही, कंसोल में यह देखा जा सकता है कि किन इंटरैक्शन के किन कॉम्बिनेशन से आईएनपी की समस्या हो सकती है.
इससे, आपको सबसे बड़े INP इंटरैक्शन के बजाय, कई धीमे इंटरैक्शन की पहचान करने में भी मदद मिलती है. इससे, आपको रिस्पॉन्सिवनेस को बेहतर बनाने के दौरान, अपने काम को दोहराने से बचने में मदद मिलती है.
कंसोल लॉग को फ़िल्टर करना
यह अतिरिक्त जानकारी काम की है, लेकिन अगर वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी से जुड़ी कोई दूसरी कार्रवाई की जा रही है या सिर्फ़ एक खास वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी में दिलचस्पी है, तो यह जानकारी ध्यान भटका सकती है.
कुछ या सभी मैसेज फ़िल्टर करने के लिए, DevTools में कंसोल फ़िल्टर करने के विकल्पों का इस्तेमाल किया जा सकता है:
- सभी एक्सटेंशन मैसेज हटाने के लिए, विकल्प में जाकर इस सुविधा को बंद करें या
-Extensionफ़िल्टर का इस्तेमाल करें. - सिर्फ़ एलसीपी देखने के लिए,
Web Vitals Extension LCPफ़िल्टर का इस्तेमाल किया जा सकता है. - सिर्फ़ आईएनपी और इंटरैक्शन देखने के लिए,
Web Vitals Extension -LCP -CLS -FIDफ़िल्टर का इस्तेमाल किया जा सकता है.
हम इस एक्सटेंशन के लिए विकल्पों की संख्या कम रखना चाहते हैं. हालांकि, अगर आपको DevTools की फ़िल्टर करने की सुविधा काफ़ी नहीं लगती और आपको यहां विकल्प चाहिए, तो GitHub पर समस्या दर्ज करके हमें बताएं.
नतीजा
हमें उम्मीद है कि आपको एक्सटेंशन के नए वर्शन में, डीबग करने के नए विकल्प काम के लगेंगे. साथ ही, इनसे आपको वेबसाइट की परफ़ॉर्मेंस की मेट्रिक से जुड़ी समस्याओं की पहचान करने और उन्हें हल करने में आसानी होगी. इससे आपकी वेबसाइट पर उपयोगकर्ताओं को बेहतर अनुभव मिलेगा.
याद रखें कि हो सकता है कि डेवलपर के कंप्यूटर पर आपको जो अनुभव मिले वह आपके असली उपयोगकर्ताओं को न मिले. एक्सटेंशन में अपनी साइट का CrUX फ़ील्ड डेटा देखने के तरीके के बारे में हमारी पिछली ब्लॉग पोस्ट पढ़ें. इससे आपको यह समझने में मदद मिलेगी कि उपयोगकर्ताओं को आपकी साइट का अनुभव कैसा मिल रहा है.
इन सुधारों के बारे में हमें आपका सुझाव, राय या शिकायत मिलना अच्छा लगेगा. इसके अलावा, GitHub पर समस्याओं के ट्रैकर पर भी हमें सुझाव दिए जा सकते हैं.