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

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

Jeremy Wagner

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

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

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

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

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

इनपुट में देरी को कैसे समझें

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

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

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

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

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

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

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

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

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

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

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

लंबे समय तक चलने वाले टास्क से बचना

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

एक विज़ुअलाइज़ेशन जो यह बताता है कि जब टास्क ज़्यादा लंबे होते हैं, तब इंटरैक्शन क्या होता है और ब्राउज़र इंटरैक्शन के लिए जल्दी जवाब नहीं दे पाता या जब लंबे टास्क को छोटे-छोटे टास्क में बांट दिया जाता है.

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

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

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

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

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

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

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

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

नतीजा

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

एरिक मैकलीन की Unस्प्लैश की हीरो इमेज.