इनपुट में देरी को ऑप्टिमाइज़ करें

पता लगाएं कि इनपुट में देरी क्या है. साथ ही, तेज़ी से बातचीत करने के लिए इसे कम करने की तकनीकें सीखें.

Jeremy Wagner

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

इनपुट में देरी क्या है?

इनपुट में देरी वह समयावधि होती है जो उपयोगकर्ता के पहली बार पेज के साथ इंटरैक्ट करने से लेकर, इंटरैक्शन के लिए इवेंट कॉलबैक चालू होने तक की समयावधि होती है. जैसे, स्क्रीन पर टैप करना, माउस से क्लिक करना या कोई कुंजी दबाना. हर इंटरैक्शन, इनपुट में कुछ देरी से शुरू होता है.

इनपुट में देरी होने की वजहें. जब ऑपरेटिंग सिस्टम को कोई इनपुट मिलता है, तो इंटरैक्शन शुरू होने से पहले उसे ब्राउज़र को पास किया जाना ज़रूरी है. इसमें कुछ समय लगता है. साथ ही, मौजूदा मुख्य थ्रेड के काम की मदद से, इसे बढ़ाया जा सकता है.

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

इनपुट में देरी के बारे में कैसे सोचें

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

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

इनपुट में देरी को कम करने का तरीका

जैसा कि पहले बताया गया है, इनपुट में देरी से बचा जा सकता है. हालांकि, दूसरी तरफ़, इनपुट में देरी के कुछ मामलों से बचा जा सकता है. अगर आपको इनपुट में देरी हो रही है, तो इन बातों का ध्यान रखें.

बार-बार होने वाले टाइमर न इस्तेमाल करें, क्योंकि मुख्य थ्रेड का बहुत ज़्यादा इस्तेमाल शुरू हो जाता है

JavaScript में आम तौर पर, दो तरह के टाइमर फ़ंक्शन इस्तेमाल किए जाते हैं. इनसे इनपुट में देरी हो सकती है: setTimeout और setInterval. दोनों के बीच यह अंतर है कि setTimeout, तय किए गए समय के बाद कॉलबैक को शेड्यूल करता है. दूसरी ओर, setInterval कॉलबैक को हर n मिलीसेकंड पर हमेशा के लिए या टाइमर को clearInterval पर रोकने के लिए शेड्यूल करता है.

setTimeout से कोई समस्या नहीं होती है. असल में, यह लंबे टास्क से बचने में मदद कर सकता है. हालांकि, यह इस बात पर निर्भर करता है कि टाइम आउट कब आता है और टाइम आउट कॉलबैक चालू होने पर, उपयोगकर्ता पेज से इंटरैक्ट करने की कोशिश करता है या नहीं.

इसके अलावा, setTimeout को लूप में या बार-बार चलाया जा सकता है. ऐसा तब होता है, जब यह setInterval की तरह काम करता है. हालांकि, अगला इटरेशन पूरा होने तक, इसे शेड्यूल करना बेहतर होता है. इसका मतलब है कि हर बार setTimeout को कॉल करने पर, लूप मुख्य थ्रेड में दिखेगा. इसलिए, आपको इस बात का ध्यान रखना चाहिए कि इसके कॉलबैक से ज़्यादा काम न हो.

setInterval एक इंटरवल पर कॉलबैक करता है. इस वजह से, इंटरैक्शन में रुकावट आने की संभावना ज़्यादा होती है. इसकी वजह यह है कि—setTimeout कॉल, एक बार इस्तेमाल होने वाला कॉलबैक के मामले में नहीं होता, जो एक बार इस्तेमाल होने वाला कॉलबैक होता है, जो उपयोगकर्ता के इंटरैक्शन के दौरान हो सकता है—setInterval के बार-बार होने की वजह से, इंटरैक्शन के रास्ते में रुकावट आने की संभावना बढ़ जाती है. इससे इंटरैक्शन के इनपुट में देरी बढ़ जाती है.

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

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

लंबे टास्क करने से बचें

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

एक विज़ुअलाइज़ेशन

एक टास्क में किए जाने वाले काम को कम करने के अलावा, आपको हमेशा मुख्य थ्रेड पर जितना हो सके उतना कम काम करना चाहिए. इससे, उपयोगकर्ता के इनपुट का रिस्पॉन्स बेहतर बनाने के लिए, लंबे टास्क को अलग-अलग हिस्सों में बांटा जा सकता है.

ध्यान दें: यील्डिंग की प्रक्रिया पूरी तरह सुरक्षित नहीं है, क्योंकि तीसरे पक्ष के JavaScript से मिलने वाले टास्क, पहले पक्ष के टास्क पूरे करने के बाद भी किए जा सकते हैं. इसकी वजह से, आने वाले समय में होने वाले इंटरैक्शन के लिए इनपुट में देरी हो सकती है. साथ ही, आपको तीसरे पक्ष के ऐसे टास्क पर ध्यान देना होगा जो तय अंतराल पर किए जाते हैं. इसके बारे में पिछले सेक्शन में बताया गया है. इस समस्या को सबमिट किया गया scheduler.yield एपीआई ठीक करने की कोशिश कर रहा है.

इंटरैक्शन ओवरलैप को ध्यान में रखें

अगर आपके इंटरैक्शन ओवरलैप हो रहे हैं, तो आईएनपी को ऑप्टिमाइज़ करने का एक चुनौती भरा हिस्सा यह हो सकता है. इंटरैक्शन ओवरलैप का मतलब है कि किसी एक एलिमेंट के साथ इंटरैक्ट करने के बाद, शुरुआती इंटरैक्शन से पहले अगले फ़्रेम को रेंडर करने से पहले, पेज के साथ दूसरा इंटरैक्शन किया जाता है.

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

इंटरैक्शन ओवरलैप के सोर्स, उतने ही आसान हो सकते हैं जितने कि कम समय में कई इंटरैक्शन करते हैं. ऐसा तब हो सकता है, जब उपयोगकर्ता ऐसे फ़ॉर्म फ़ील्ड में टाइप करते हैं जहां बहुत कम समय में कई कीबोर्ड इंटरैक्शन हो सकते हैं. अगर किसी मुख्य इवेंट पर किया जा रहा काम बहुत महंगा है—जैसे कि ऑटोकंप्लीट फ़ील्ड के सामान्य मामलों में, जहां नेटवर्क के अनुरोध वापस शुरू किए जाते हैं, तो आपके पास कुछ विकल्प हैं:

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

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

नतीजा

ऐसा हो सकता है कि इनपुट में देरी से, इंटरैक्शन को पूरा होने में ज़्यादा समय न लगे. हालांकि, यह समझना ज़रूरी है कि इंटरैक्शन के हर हिस्से में इतना समय लगता है, जिसे कम किया जा सकता है. अगर इनपुट में देरी का पता लगाया जा रहा है, तो आपके पास इसे कम करने का विकल्प है. बार-बार टाइमर कॉलबैक करने से बचने, लंबे टास्क को ब्रेक अप करने, और संभावित इंटरैक्शन ओवरलैप के बारे में पता होने से, इनपुट में देरी को कम करने में मदद मिल सकती है. इससे आपकी वेबसाइट इस्तेमाल करने वाले लोगों से इंटरैक्ट करने की प्रक्रिया तेज़ हो जाती है.

Unsplash की हीरो इमेज, जिसे एरिक मैकलीन ने बनाया है.