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

जानें कि इनपुट डिले क्या होता है. साथ ही, इसे कम करने की तकनीकें जानें, ताकि इंटरैक्टिविटी को तेज़ किया जा सके.

Jeremy Wagner

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

इनपुट डिले क्या है?

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

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

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

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

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

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

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

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

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

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

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

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

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

ज़्यादा समय लेने वाले टास्क से बचें

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

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

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

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

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

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

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

नतीजा

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