पब्लिश करने की तारीख: 04 अप्रैल, 2025
असल दुनिया में परफ़ॉर्मेंस से जुड़ी समस्याओं को ठीक करने का मतलब है, डेवलपमेंट एनवायरमेंट और उपयोगकर्ताओं को मिलने वाली परफ़ॉर्मेंस के अलग-अलग अनुभवों के बीच का अंतर कम करना. इस पोस्ट में, हम Chrome DevTools की नई सुविधाओं के बारे में जानेंगे. इनकी मदद से, परफ़ॉर्मेंस की गड़बड़ियों को ठीक करने के लिए, अनुमान लगाने के बजाय असल डेटा का इस्तेमाल किया जा सकता है.
उम्मीदों को कैलिब्रेट करना
Chrome 134 से, DevTools में सीपीयू थ्रॉटलिंग कैलिब्रेशन शामिल है. यह एक नया टूल है, जो सीपीयू थ्रॉटलिंग का सही लेवल चुनने में मदद करता है. कैलिब्रेशन की प्रोसेस एक बार चलाएं. इसके बाद, DevTools आपके लिए "लो-टीयर मोबाइल" और "मेड-टीयर मोबाइल" थ्रॉटलिंग प्रीसेट जनरेट करेगा. ये प्रीसेट, आपके डेवलपमेंट मशीन के हिसाब से होंगे.
वेब पर साइट की परफ़ॉर्मेंस को बेहतर बनाने के दौरान, अक्सर यह गड़बड़ी होती है कि डेवलपर के तौर पर हम तेज़ डेस्कटॉप डिवाइसों पर साइटें बनाते हैं, जबकि हमारे कई उपयोगकर्ता धीमे मोबाइल डिवाइसों का इस्तेमाल करते हैं. अगर परफ़ॉर्मेंस की समस्या सिर्फ़ बहुत धीमे सीपीयू वाले डिवाइस पर आती है, तो उसे ट्रैक करना मुश्किल हो सकता है.
असल मोबाइल डिवाइस पर रिमोट डीबगिंग सबसे सही तरीका है. हालांकि, Chrome में करीब एक दशक से सीपीयू थ्रॉटलिंग की सुविधा भी काम करती है. इससे डेवलपमेंट के दौरान, तेज़ और कम साइज़ वाले आइटरेशन साइकल का इस्तेमाल किया जा सकता है.
लेकिन, आपको सीपीयू की स्पीड कम करने का कौनसा लेवल चुनना चाहिए? 4x? 20x? आपको कैसे पता चलेगा कि आपकी साइट पर आने वाले डिवाइसों के हिसाब से, कौनसा डिवाइस सबसे अच्छा है? साथ ही, आपके डिवाइस की स्पीड से यह फ़ैसला कैसे बदलता है कि आपको कौनसा वर्शन इस्तेमाल करना है? भले ही, आपके पास हाई-एंड वर्कस्टेशन हो या आठ साल पुराना Chromebook.
थ्रॉटलिंग कैलिब्रेशन की प्रोसेस
परफ़ॉर्मेंस पैनल खोलने पर, एनवायरमेंट सेटिंग में एक ड्रॉप-डाउन होता है. इसकी मदद से, सीपीयू थ्रॉटलिंग लेवल सेट किया जा सकता है. अगर आपने पहले कभी कैलिब्रेशन नहीं किया है, तो आपको ड्रॉप-डाउन में "कैलिब्रेट किए गए प्रीसेट" में दो बंद विकल्प दिखेंगे. साथ ही, सबसे नीचे कैलिब्रेट करें… विकल्प दिखेगा.
इसे चुनने पर, आपको सेटिंग में सीपीयू थ्रॉटलिंग के प्रीसेट दिखेंगे. सीधे वहां भी जाया जा सकता है.
- कैलिब्रेट करें बटन पर क्लिक करें
- जब आपको चेतावनी मिले कि यह आपको मौजूदा पेज से कुछ समय के लिए दूसरे पेज पर ले जाएगा, तो जारी रखें पर क्लिक करें
- आपकी मौजूदा मशीन की स्पीड मेज़र करने के लिए, एक छोटा बेंचमार्क चलेगा. इसके बाद, कैलिब्रेशन पूरा हो जाएगा
अब, कम और मध्यम टीयर वाले डिवाइसों के लिए, कैलिब्रेट किए गए प्रीसेट के साथ, बैंडविड्थ कम करने के विकल्प दिखेंगे.
डेवलपमेंट के ज़्यादातर इस्तेमाल के उदाहरणों के लिए, ये दो प्रीसेट काफ़ी होने चाहिए. आम तौर पर, हमारा सुझाव है कि वेब पर दिखने वाले "सामान्य" मोबाइल डिवाइस से मैच करने के लिए, "मिड-टीयर" प्रीसेट का इस्तेमाल करें. अगर आपको पता है कि आपके कई उपयोगकर्ताओं के डिवाइस ज़्यादा धीमे हैं या परफ़ॉर्मेंस से जुड़ी समस्या सिर्फ़ उन उपयोगकर्ताओं के लिए होती है, तो "लो-टीयर" विकल्प को इतना धीमा होना चाहिए कि वह लो-एंड डिवाइसों की लांग टेल को भी कैप्चर कर सके.
आखिर में, अगर आपको लगता है कि कैलिब्रेशन में कोई गड़बड़ी हुई है या आपकी लोकल मशीन में कोई बदलाव हुआ है, तो आपके पास कभी भी थ्रॉटलिंग ड्रॉप-डाउन या सेटिंग में जाकर, कैलिब्रेशन को फिर से शुरू करने का विकल्प होता है. इससे, बेंचमार्क फिर से चलेगा और प्रीसेट अपडेट हो जाएंगे.
DevTools में सीपीयू थ्रॉटलिंग की सुविधा कैसे काम करती है
अगर आपको कभी यह जानना है कि DevTools में सीपीयू थ्रॉटलिंग कैसे काम करती है, तो यह समझना काफ़ी आसान है. किसी टैब के लिए थ्रॉटलिंग की सुविधा चालू करने पर, Chrome एक अलग थ्रॉटलिंग थ्रेड लॉन्च करता है. यह थ्रेड, टैब के मुख्य थ्रेड को बाधित करता है और उसे कुछ समय के लिए निलंबित कर देता है. इसका मकसद, मुख्य थ्रेड को ज़रूरत के हिसाब से रोकना है, ताकि किसी भी टास्क को पूरा करने में लगने वाला समय, थ्रॉटलिंग फ़ैक्टर की वजह से बढ़ जाए.
उदाहरण के लिए, सीपीयू को चार गुना कम करने पर, मुख्य थ्रेड करीब 75% समय के लिए निलंबित हो जाएगा. इससे मुख्य थ्रेड के किसी भी काम को पूरा होने में चार गुना ज़्यादा समय लगेगा.
इस तरीके का फ़ायदा यह है कि यह Chrome के बाकी हिस्सों के लिए ज़्यादातर पारदर्शी होता है. JavaScript, लेआउट या ब्राउज़र को करने वाले कई अन्य कामों को धीमा करने के लिए, किसी खास कोड की ज़रूरत नहीं होती. मुख्य थ्रेड पर किए जाने वाले सभी कामों में ज़्यादा समय लगता है, क्योंकि थ्रेड को सिर्फ़ कुछ समय के लिए ही चलाने की अनुमति होती है.
जब सीपीयू थ्रॉटलिंग, किसी असल मोबाइल डिवाइस की तरह काम करती है
इस वजह से, सीपीयू थ्रॉटलिंग की मदद से, मोबाइल के सीपीयू पर काम करने वाले कई तरह के कामों को बेहतर तरीके से सिम्युलेट किया जाता है. उदाहरण के लिए, अगर कोई इंटरैक्शन JavaScript और लेआउट को ट्रिगर करता है, तो हो सकता है कि वह मोबाइल डिवाइस पर चलने वाले इंटरैक्शन की तरह ही काम करे.
किसी बटन पर क्लिक करने से ट्रिगर होने वाले टास्क को देखें. यह टास्क, DOM में नए एलिमेंट जोड़ने के लिए JavaScript चलाता है. इसके बाद, ब्राउज़र को नए कॉन्टेंट को पोज़िशन करने के लिए, स्टाइल और लेआउट कैलकुलेशन चलाने की ज़रूरत होती है:
कैलिब्रेट किए गए "मिड-टीयर मोबाइल" सीपीयू थ्रॉटलिंग प्रीसेट (इस डेवलपमेंट मशीन पर 3.7x) के साथ, इंटरैक्शन काफ़ी हद तक मिलता-जुलता दिखता है. हालांकि, इसमें लगने वाला समय काफ़ी बढ़ जाता है और यह एक लंबा टास्क बन जाता है:
रीमोट डीबगिंग का इस्तेमाल करके, किसी असल मिड-टीयर डिवाइस पर उसी इंटरैक्शन की जांच करने पर, इंटरैक्शन के ट्रेस के आकार और अवधि, दोनों में काफ़ी मिलते-जुलते नतीजे मिलते हैं. यह टास्क ज़्यादातर मुख्य थ्रेड में सीपीयू पर निर्भर करता है. इसमें पेज का JavaScript कोड और Chrome के स्टाइल और लेआउट कोड को लागू किया जाता है. इसलिए, कैलिब्रेट की गई थ्रॉटलिंग से, मोबाइल की असल परफ़ॉर्मेंस को सटीक तरीके से फिर से बनाया जा सकता है:
जब आपको किसी असल मोबाइल डिवाइस पर टेस्ट करना हो
सीपीयू थ्रॉटलिंग बहुत मददगार है, लेकिन यह मोबाइल हार्डवेयर के सभी पहलुओं को सिम्युलेट नहीं कर सकती. फ़ोन पर, डिस्क की स्पीड धीमी होती है, मेमोरी बैंडविथ ज़्यादा सीमित होती है, और एक्ज़ीक्यूशन स्पीड कम करने के लिए, थर्मल थ्रॉटलिंग किसी भी समय चालू हो सकती है.
थ्रॉटलिंग की एक सामान्य सीमा, जीपीयू पर ज़्यादा काम करने से जुड़ी होती है. मोबाइल और डेस्कटॉप के जीपीयू, आर्किटेक्चर के हिसाब से अलग-अलग होते हैं. साथ ही, Chrome, जीपीयू के ऑपरेशन को पेज के मुख्य थ्रेड से अलग प्रोसेस में चलाता है. इस वजह से, DevTools के सीपीयू को कम करने की सुविधा, जीपीयू प्रोसेस पर असर नहीं डालती. ऐसा करना बेहतर होता है, क्योंकि इससे DevTools और बाकी ब्राउज़र की परफ़ॉर्मेंस पर असर पड़ता है.
जटिल पेंटिंग, कॉम्पोज़िटिंग, और ज़्यादा इफ़ेक्ट वाली स्टाइल, परफ़ॉर्मेंस से जुड़ी आम समस्याएं हैं. ये समस्याएं डेवलपमेंट मशीन पर ठीक लग सकती हैं, लेकिन मोबाइल पर अचानक से धीमी हो सकती हैं. साथ ही, डेवलपमेंट मशीन पर समस्या को फिर से बनाने की कोशिश करते समय, यह समझना मुश्किल हो सकता है कि कोई समस्या है.
पहले की तरह ही इंटरैक्शन करें (डीओएम में क्लिक करके कई एलिमेंट जोड़ें). हालांकि, इस बार नए एलिमेंट को ज़्यादा जीपीयू-भारी बॉक्स-शैडो और ब्लर फ़िल्टर के साथ स्टाइल किया गया है.
इंटरैक्शन की शुरुआत का आकार और अवधि एक जैसी दिखती है. हालांकि, इसमें जोड़े गए इफ़ेक्ट के लिए, आखिर में एक लंबी नई मुख्य-थ्रेड पेंट होती है:
किसी असली मिड-टीयर फ़ोन पर, इंटरैक्शन का मुख्य-थ्रेड हिस्सा, सिम्युलेट किए गए हिस्से से काफ़ी मिलता-जुलता दिखता है. इसमें अतिरिक्त पेंट भी शामिल है. हालांकि, इंटरैक्शन का नतीजा स्क्रीन पर दिखने से पहले, ज़्यादा काम करने के लिए एक ज़बरदस्त GPU प्रोसेस दिखती है:
GPU के काम की वजह से, इंटरैक्शन में 300 मिलीसेकंड और लगते हैं. यह ऐसा काम है जो लैपटॉप के GPU के लिए मुश्किल से होता है. भले ही, (मुख्य-थ्रेड) सीपीयू थ्रॉटलिंग चालू हो.
कुछ अन्य मामलों में भी, इम्यूलेशन की कई समस्याएं आती हैं. जैसे, डीप-डिपेंडेंसी पेज लोड, जहां सिम्युलेट किए गए नेटवर्क थ्रॉटलिंग, इंटर-प्रोसेस कम्यूनिकेशन, और डिस्क और मेमोरी कैश मेमोरी को ऐक्सेस करने के बीच इंटरप्ले होता है.
कभी-कभी असल मोबाइल डिवाइसों पर भी जांच करना न भूलें. अगर आपको डेस्कटॉप मशीन पर लैब में, फ़ील्ड डेटा से पता चलने वाली उस समस्या को दोबारा नहीं बनाया जा सकता जिसका असर मोबाइल उपयोगकर्ताओं पर पड़ रहा है, तो किसी असली डिवाइस से रिमोट डीबगिंग ज़रूर आज़माएं. इससे आपको पता चलेगा कि क्या कोई ऐसा अंतर है जिसे आपने अनदेखा किया है.
डेटा-ड्रिवन डीबगिंग में और सुधार
हाल ही में, कुछ और नई सुविधाएं लॉन्च की गई हैं. इनकी मदद से, डीबगिंग सेटिंग और अपने असली उपयोगकर्ताओं के आधार पर फ़ैसले लेने में आसानी होगी.
अगर आपने फ़ील्ड डेटा चालू किया है, तो परफ़ॉर्मेंस पैनल, Chrome उपयोगकर्ता अनुभव रिपोर्ट (CrUX) के हिसाब से, 75वें पर्सेंटाइल के उपयोगकर्ताओं के आधार पर, थ्रॉटलिंग के बारे में सुझाव देगा. साथ ही, अगर लोकल तौर पर मेज़र की गई मेट्रिक, फ़ील्ड डेटा से अलग होती हैं, तो रीयल-टाइम मेट्रिक व्यू आपको इसकी सूचना देगा. इस बारे में DevTools में, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का असल डेटा लाने के बारे में पिछली पोस्ट में पूरी जानकारी दी गई थी.
एक नया बदलाव यह है कि साइडबार में मौजूद परफ़ॉर्मेंस पैनल की अहम जानकारी से अब आपको यह भी पता चलेगा कि ट्रैक में मेज़र की गई मेट्रिक, असल में आपके उपयोगकर्ताओं को मिलने वाले अनुभव से मेल खाती हैं या नहीं.
फ़ील्ड डेटा चालू होने पर, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाले मेट्रिक के 75वें पर्सेंटाइल का इस्तेमाल भी किया जा सकेगा. इससे साइडबार में अहम जानकारी को रैंक करने में मदद मिलेगी. उदाहरण के लिए, अगर आपके उपयोगकर्ताओं का सबसे बड़ा कॉन्टेंटफ़ुल पेंट (एलसीपी) अच्छा है, लेकिन पेज के रिस्पॉन्स में लगने वाला समय (आईएनपी) खराब है, तो आईएनपी को बेहतर बनाने में मदद करने वाली इनसाइट, सूची में सबसे ऊपर दिखेंगी.
आखिर में, अगर आपने कभी कई ट्रेस के बीच स्विच किया है या डिस्क से ट्रेस लोड किए हैं, तो यह याद रखना मुश्किल हो सकता है कि आपने हर ट्रेस में मोबाइल इम्यूलेशन और थ्रॉटलिंग की कौनसी सेटिंग का इस्तेमाल किया था. परफ़ॉर्मेंस पैनल में सबसे ऊपर मौजूद, ट्रेस चुनने के लिए ड्रॉप-डाउन में अब हर ट्रेस के लिए, इम्यूलेशन की जानकारी दिखती है.
रोकना, कैलिब्रेट करना, और सुनना
आखिर में, हमें डीबग करने के अपने फ़ैसले असल दुनिया के हिसाब से लेने होंगे: समस्याओं का पता लगाने के लिए, एनालिटिक्स और उपयोगकर्ता रिपोर्ट से मिले फ़ील्ड डेटा से शुरुआत करें. इसके बाद, गड़बड़ी का पता लगाने के लिए लैब में उन उपयोगकर्ता अनुभवों को फिर से बनाएं. DevTools में जोड़े गए इन नए फ़ीचर की मदद से, यह प्रोसेस थोड़ी आसान हो जाएगी.
सीपीयू थ्रॉटलिंग कैलिब्रेशन और फ़ील्ड और लैब के अलग-अलग अनुभवों के बारे में सूचनाएं मिलने से, यह तय करने में मदद मिलती है कि आप सही रास्ते पर हैं या नहीं. साथ ही, इससे रीयल-वर्ल्ड परफ़ॉर्मेंस का अनुमान लगाने में भी मदद मिलती है. DevTools का मकसद, कॉन्फ़िगरेशन से अनुमान लगाने की ज़रूरत को खत्म करना और संभावित अंतर को हाइलाइट करना है. इससे, आपको परफ़ॉर्मेंस से जुड़ी उन असल समस्याओं को ठीक करने में ज़्यादा समय बिताने में मदद मिलती है जिनका असर आपके उपयोगकर्ताओं पर पड़ता है.
क्या आपको इस सुविधा को और बेहतर बनाने या नई सुविधाओं के सुझाव देने हैं? हमें बताएं!