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

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

Jeremy Wagner

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

नतीजा

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

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