क्या लंबे JavaScript टास्क की वजह से इंटरैक्टिव में लगने वाला समय बढ़ रहा है?

उपयोगकर्ता इंटरैक्शन को रोकने वाले महंगे काम के बारे में पता लगाने का तरीका जानें.

एडी ओस्मान
एडी उस्मान

लंबे टास्क, मुख्य थ्रेड को व्यस्त रख सकते हैं. इससे उपयोगकर्ता के इंटरैक्शन में देरी हो सकती है. Chrome DevTools अब लंबे टास्क को विज़ुअलाइज़ कर सकता है. इससे, ऑप्टिमाइज़ किए जाने वाले टास्क देखना आसान हो जाता है.

अगर आपने अपने पेजों को ऑडिट करने के लिए लाइटहाउस का इस्तेमाल किया है, तो आपको टाइम टू इंटरैक्टिव की जानकारी हो सकती है. यह एक ऐसी मेट्रिक है जिससे पता चलता है कि उपयोगकर्ता आपके पेज से कब इंटरैक्ट कर सकते हैं और उन्हें कब जवाब मिल सकता है. हालांकि, क्या आपको पता है कि लंबे (JavaScript) टास्क की मदद से, कमज़ोर टीटीआई के लिए बहुत ज़्यादा योगदान दिया जा सकता है?

लाइटहाउस रिपोर्ट में, इंटरैक्टिव में लगने वाला समय दिखाया गया है

लंबे टास्क क्या हैं?

लॉन्ग टास्क, एक JavaScript कोड होता है, जो मुख्य थ्रेड का लंबे समय तक एक साथ इस्तेमाल करता है. इसकी वजह से यूज़र इंटरफ़ेस (यूआई) "फ़्रीज़" हो जाता है.

किसी वेब पेज के लोड होने के दौरान, लंबे टास्क, मुख्य थ्रेड को जोड़ सकते हैं. साथ ही, पेज तैयार होने पर भी, वह उपयोगकर्ता के इनपुट के हिसाब से काम नहीं कर सकता. क्लिक और टैप अक्सर काम नहीं करते हैं, क्योंकि इवेंट लिसनर, क्लिक हैंडलर वगैरह अभी तक अटैच नहीं किए गए हैं.

सीपीयू में ज़्यादा लंबे टास्क होने की वजह से मुश्किल काम होता है. इसमें 50 मि॰से॰ से ज़्यादा समय लगता है. 50 मि॰से॰ क्यों? आरआईएल मॉडल आपको उपयोगकर्ता के इनपुट इवेंट को 50 मि॰से॰ में प्रोसेस करने का सुझाव देता है, ताकि 100 मि॰से॰ में जवाब दिख सके. अगर ऐसा नहीं किया जाता, तो कार्रवाई और प्रतिक्रिया के बीच का कनेक्शन टूट जाता है.

क्या मेरे पेज पर लंबे टास्क हैं, जिससे बातचीत में देरी हो सकती है?

अब तक, आपको Chrome DevTools में 50 मि॰से॰ से ज़्यादा लंबी स्क्रिप्ट के "लंबे पीले रंग के ब्लॉक" को मैन्युअल तरीके से खोजना पड़ता था. इसके अलावा, Long Tasks API का इस्तेमाल करके, यह पता लगाया जा सकता है कि किन टास्क की वजह से, इंटरैक्टिविटी में देरी हो रही है. यह काम थोड़ा मुश्किल हो सकता है.

DevTools परफ़ॉर्मेंस पैनल का स्क्रीनशॉट, जिसमें छोटे टास्क और लंबे टास्क के बीच अंतर दिखाया गया है

परफ़ॉर्मेंस ऑडिटिंग वर्कफ़्लो को आसान बनाने के लिए, Dev टूल अब लंबे टास्क को विज़ुअलाइज़ करता है. अगर टास्क लंबे टास्क हैं, तो उनमें लाल रंग के फ़्लैग दिखेंगे. ये स्लेटी रंग में दिखाए गए हैं.

DevTools, परफ़ॉर्मेंस पैनल में लंबे टास्क को स्लेटी रंग के बार के तौर पर दिखाता है. साथ ही, इसमें लंबे टास्क के लिए लाल रंग का फ़्लैग दिखता है

  • किसी वेब पेज को लोड करने के लिए, परफ़ॉर्मेंस पैनल में ट्रेस रिकॉर्ड करें.
  • मुख्य थ्रेड के व्यू में लाल फ़्लैग देखें. अब आपको टास्क स्लेटी रंग ("टास्क") में दिखेंगे.
  • किसी बार पर कर्सर घुमाने से, आपको टास्क में लगने वाला कुल समय पता चलेगा. साथ ही, यह भी पता चलेगा कि टास्क को "लंबा" माना गया है या नहीं.

मैंने जिन टास्क को ज़्यादा समय तक प्रोसेस करने की कोशिश की है उनकी वजह क्या है?

लंबे टास्क की वजह का पता लगाने के लिए, स्लेटी रंग के टास्क बार को चुनें. नीचे दिए गए पैनल में, बॉटम-अप और गतिविधि के हिसाब से ग्रुप बनाएं को चुनें. इसकी मदद से, यह देखा जा सकता है कि किसी टास्क को पूरा होने में ज़्यादा समय लगने वाली गतिविधि में, किन गतिविधियों का सबसे ज़्यादा योगदान (कुल मिलाकर) है. नीचे, यह DOM क्वेरी का एक महंगा सेट लगता है.

DevTools में कोई लंबा टास्क (जिसे 'टास्क' लेबल किया गया है) चुनने से, हमें उन गतिविधियों के बारे में ज़्यादा जानकारी मिलती है जिनकी वजह से यह टास्क पूरा हुआ था.

लंबे टास्क को ऑप्टिमाइज़ करने के आम तरीके क्या हैं?

बड़ी स्क्रिप्ट, अक्सर लंबे टास्क की मुख्य वजह होती हैं. इसलिए, उन्हें अलग-अलग हिस्सों में बांटें. तीसरे पक्ष की स्क्रिप्ट पर भी ध्यान दें. लंबे टास्क की वजह से, मुख्य कॉन्टेंट के इंटरैक्टिव होने में देरी हो सकती है.

अपने सारे काम को छोटे-छोटे हिस्सों में बांट दें (जो 50 मि॰से॰ से कम समय में चलते हैं) और इन हिस्सों को सही जगह और सही समय पर चलाएं. ऐसा भी हो सकता है कि किसी वर्कर में, मुख्य थ्रेड के बाहर सही जगह ही मौजूद हो. इस विषय पर, फ़िल वॉल्टन की किताब, Idle Only Ungent एक अच्छी किताब है. लंबे टास्क को मैनेज करने और उन्हें अलग-अलग कैटगरी में बांटने की सामान्य रणनीतियों के लिए, लंबे टास्क ऑप्टिमाइज़ करने से जुड़ा लेख भी देखें.

अपने पेजों को रिस्पॉन्सिव रखें. लंबे टास्क को कम करना, यह पक्का करने का एक शानदार तरीका है कि जब लोग आपकी साइट पर आएं, तो उन्हें उनका अनुभव अच्छा मिले. लंबे टास्क के बारे में ज़्यादा जानने के लिए, उपयोगकर्ता के बारे में बनाई गई परफ़ॉर्मेंस मेट्रिक देखें.