पता लगाएं कि इनपुट डिले क्या है. साथ ही, कम से कम इंटरैक्शन के लिए इसे कम करने की तकनीकें सीखें.
वेब पर इंटरैक्शन करना जटिल काम है. इन्हें चलाने के लिए, ब्राउज़र में हर तरह की गतिविधियां की जाती हैं. हालांकि, उन सभी में एक जैसी बात यह है कि इवेंट कॉलबैक चालू होने से पहले, इनपुट में कुछ देरी होती है. इस गाइड में, यह बताया गया है कि इनपुट में देरी का क्या मतलब है. साथ ही, यह भी पता चलेगा कि इसे कम करने के लिए क्या किया जा सकता है, ताकि आपकी वेबसाइट का इंटरैक्शन तेज़ी से हो.
इनपुट डिले क्या है?
इनपुट में देरी वह समय होता है जो उपयोगकर्ता के पहली बार किसी पेज से इंटरैक्ट करने के बाद से शुरू होता है. जैसे, स्क्रीन पर टैप करना, माउस से क्लिक करना या कोई कुंजी दबाना. इससे यह तय होता है कि इंटरैक्शन के लिए इवेंट कॉलबैक चलना शुरू हो जाते हैं. हर इंटरैक्शन, इनपुट देरी से शुरू होता है.
इनपुट में देरी के कुछ हिस्से को खारिज करना ज़रूरी है: ऑपरेटिंग सिस्टम को इनपुट इवेंट की पहचान करने और उसे ब्राउज़र को भेजने में हमेशा कुछ समय लगता है. हालांकि, इनपुट में देरी के उस हिस्से का अक्सर ध्यान भी नहीं दिया जाता है और पेज पर ही कुछ और चीज़ें भी होती हैं, जिनकी वजह से इनपुट में ज़्यादा देर लग सकती है. इस वजह से समस्याएं पैदा हो सकती हैं.
इनपुट डिले के बारे में कैसे सोचें
आम तौर पर, इंटरैक्शन के हर हिस्से को जितना हो सके उतना छोटा रखना चाहिए, ताकि वेबसाइट इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) मेट्रिक के "अच्छे" थ्रेशोल्ड को पूरा कर सके. भले ही, उपयोगकर्ता का डिवाइस कुछ भी हो. इनपुट में देरी की जांच करना, उस सीमा को पूरा करने का सिर्फ़ एक हिस्सा है.
इनपुट में देरी की अनुमति के लिए, आप फ़र्स्ट इनपुट डिले (एफ़आईडी) के थ्रेशोल्ड के बारे में जानना चाहेंगे, लेकिन एफ़आईडी के लिए "अच्छा" थ्रेशोल्ड 100 मिलीसेकंड या उससे कम होना चाहिए. अगर आप इस थ्रेशोल्ड तक पहुंच जाते हैं, तो आईएनपी के लिए आपके बजट का आधा हिस्सा, सिर्फ़ इनपुट देरी के लिए होगा. जब आपको लगता है कि इंटरैक्शन को इवेंट कॉलबैक चलाने के लिए समय की ज़रूरत होती है, तब इसका इस्तेमाल नहीं किया जा सकता. साथ ही, ब्राउज़र को अगले फ़्रेम को पेंट करने के लिए भी समय की ज़रूरत होती है.
आईएनपी के "अच्छे" थ्रेशोल्ड को हासिल करने के लिए, इनपुट में होने वाली सबसे कम देरी को टारगेट करने की कोशिश करें. हालांकि, इसे पूरी तरह खत्म नहीं किया जाना चाहिए, क्योंकि ऐसा करना मुमकिन नहीं है. जब तक उपयोगकर्ता आपके पेज से इंटरैक्ट करने की कोशिश कर रहे हैं, तब तक मुख्य थ्रेड के काम करने में ज़रूरत से ज़्यादा काम न करें. इसके लिए, इनपुट डिले इतना कम होना चाहिए कि समस्याओं से बचा जा सके.
इनपुट डिले को कम करने का तरीका
जैसा कि पहले बताया गया है, कुछ इनपुट देरी से बचा नहीं जा सकता, लेकिन दूसरी ओर, कुछ इनपुट देरी से बचा जा सकता है. अगर आपको इनपुट मिलने में देरी हो रही है, तो इन बातों को ध्यान में रखें.
बार-बार होने वाले टाइमर से बचें. इससे, मुख्य थ्रेड का बहुत ज़्यादा काम शुरू हो जाता है
JavaScript में आम तौर पर इस्तेमाल किए जाने वाले दो टाइमर फ़ंक्शन हैं, जो इनपुट डिले में योगदान दे सकते हैं: setTimeout और setInterval. इन दोनों के बीच यह अंतर है कि setTimeout, कॉलबैक को तय समय के बाद चलाने के लिए शेड्यूल करता है. वहीं दूसरी ओर, setInterval एक कॉलबैक को शेड्यूल करता है, ताकि उसे हर n मिलीसेकंड में लगातार चलने के लिए या clearInterval के साथ टाइमर के बंद होने तक चलाया जा सके.
setTimeout से अपने-आप में कोई समस्या नहीं है—असल में, यह लंबे टास्क से बचने में मदद कर सकता है. हालांकि, यह इस बात पर निर्भर करता है कि टाइम आउट कब आता है और टाइम आउट कॉलबैक चलने पर उपयोगकर्ता, पेज से इंटरैक्ट करने की कोशिश करता है या नहीं.
इसके अलावा, setTimeout को लूप में या बार-बार चलाया जा सकता है. ऐसा तब होता है, जब यह setInterval की तरह काम करता है. हालांकि, बेहतर है कि अगली प्रोसेस को तब तक शेड्यूल न किया जाए, जब तक पिछला प्रोसेस पूरा न हो जाए. इसका मतलब है कि जब भी setTimeout को कॉल किया जाएगा, लूप मुख्य थ्रेड में आएगा, तो आपको यह पक्का करना चाहिए कि इसका कॉलबैक बहुत ज़्यादा काम न करे.
setInterval, इंटरवल में कॉलबैक चलाता है. इसलिए, इंटरैक्शन के दौरान इससे इंटरैक्शन की संभावना ज़्यादा होती है. ऐसा इसलिए, क्योंकि setTimeout कॉल के एक इंस्टेंस के उलट, जो एक बार कॉल करने वाला ऐसा कॉलबैक है जो एक बार होता है, जो उपयोगकर्ता के इंटरैक्शन के दौरान आ सकता है हो सकता है. setInterval के बार-बार होने की वजह से, इंटरैक्शन के लिए इंटरैक्शन शुरू होने की संभावना बढ़ जाती है. इस वजह से, इंटरैक्शन के इनपुट में देरी होती है.
setInterval कॉल से रजिस्टर किया गया टाइमर, जो इनपुट में देरी में योगदान देता है. इस टाइमर को Chrome DevTools के परफ़ॉर्मेंस पैनल में दिखाया गया है. इनपुट में देरी की वजह से, इंटरैक्शन के लिए इवेंट कॉलबैक बाद में चलते हैं.
अगर पहले पक्ष के कोड में टाइमर हो रहे हैं, तो उनका कंट्रोल आपके पास होता है. यह आकलन करें कि आपको उनकी ज़रूरत है या नहीं. इसके अलावा, ऐसे काम को जितना हो सके कम करने की कोशिश करें. हालांकि, तीसरे पक्ष की स्क्रिप्ट के टाइमर अलग होते हैं. तीसरे पक्ष की स्क्रिप्ट के काम करने के तरीके को कंट्रोल नहीं किया जा सकता. तीसरे पक्ष के कोड में परफ़ॉर्मेंस की समस्याओं को ठीक करने के लिए, अक्सर हिस्सेदारों की मदद ली जाती है. इससे यह पता लगाया जाता है कि तीसरे पक्ष की कोई स्क्रिप्ट ज़रूरी है या नहीं. अगर ऐसा है, तो तीसरे पक्ष के स्क्रिप्ट वेंडर से संपर्क करके, यह पता लगाएं कि वे आपकी वेबसाइट पर परफ़ॉर्मेंस से जुड़ी समस्याएं कैसे हल कर सकते हैं.
लंबे टास्क करने से बचें
इनपुट में होने वाली देरी को कम करने का एक तरीका यह है कि लंबे टास्क करने से बचें. जब आपके पास बहुत ज़्यादा मुख्य थ्रेड काम होता है और वह इंटरैक्शन के दौरान मुख्य थ्रेड को ब्लॉक करता है, तो इससे लंबे टास्क पूरे होने से पहले, इनपुट डिले बढ़ जाएगा.
किसी टास्क में कम से कम काम करने के अलावा, आपको हमेशा मुख्य थ्रेड पर कम से कम काम करने की कोशिश करनी चाहिए—लंबे टास्क को अलग-अलग करके, उपयोगकर्ता के इनपुट का रिस्पॉन्स बेहतर बनाया जा सकता है.
इंटरैक्शन ओवरलैप का ध्यान रखें
अगर आपके कुछ इंटरैक्शन ओवरलैप हो रहे हैं, तो आईएनपी को ऑप्टिमाइज़ करने का मुश्किल काम यह हो सकता है. इंटरैक्शन ओवरलैप का मतलब है कि किसी एक एलिमेंट के साथ इंटरैक्ट करने के बाद, शुरुआती इंटरैक्शन से पहले ही अगला फ़्रेम रेंडर होने से पहले, पेज के साथ दूसरा इंटरैक्शन किया जाता है.
इंटरैक्शन ओवरलैप के सोर्स, उतने ही आसान हो सकते हैं जितने कि कम समय में उपयोगकर्ता कई इंटरैक्शन करते हैं. ऐसा तब हो सकता है, जब उपयोगकर्ता फ़ॉर्म फ़ील्ड में टाइप करते हैं, जहां बहुत कम समय में कई कीबोर्ड इंटरैक्शन हो सकते हैं. अगर किसी मुख्य इवेंट पर काम करना काफ़ी महंगा है, तो आपके पास ये विकल्प हैं:
- किसी दी गई समयावधि में, इवेंट कॉलबैक कितनी बार काम करे, इसे सीमित करने के लिए डिबाउंसिंग इनपुट के बारे में सोचें.
fetchकॉलबैक को रद्द करने के लिए,AbortControllerका इस्तेमाल करें, ताकि मुख्य थ्रेड,fetchकॉलबैक को हैंडल करने वाली भीड़-भाड़ न हो. ध्यान दें:AbortControllerइंस्टेंस कीsignalप्रॉपर्टी का इस्तेमाल, इवेंट को रद्द करने के लिए भी किया जा सकता है.
ओवरलैप होने वाले इंटरैक्शन की वजह से इनपुट में देरी की एक वजह महंगे ऐनिमेशन हो सकते हैं. खास तौर पर, JavaScript में मौजूद ऐनिमेशन कई requestAnimationFrame कॉल ट्रिगर कर सकते हैं. इससे उपयोगकर्ताओं के इंटरैक्शन में रुकावट आ सकती है. ऐसा करने के लिए, जब भी हो सके सीएसएस ऐनिमेशन का इस्तेमाल करें, ताकि महंगे ऐनिमेशन फ़्रेम की सूची न बनाई जा सके. हालांकि, ऐसा करने पर, यह पक्का करें कि कंपोज़िट नहीं किए गए ऐनिमेशन इस्तेमाल न करें. इससे ऐनिमेशन मुख्य तौर पर जीपीयू और कंपोज़िटर थ्रेड पर चलें, न कि मुख्य थ्रेड पर.
नतीजा
हालांकि, हो सकता है कि इनपुट में देरी, इंटरैक्शन में लगने वाला ज़्यादातर समय न दिखाती हो, लेकिन यह समझना ज़रूरी है कि इंटरैक्शन के हर हिस्से में इतना समय लगता है कि उसे कम किया जा सकता है. अगर डेटा इनपुट में ज़्यादा समय लग रहा है, तो आपके पास इसे कम करने का विकल्प है. बार-बार होने वाले टाइमर कॉलबैक से बचना, लंबे टास्क को ब्रेक करना, और संभावित इंटरैक्शन ओवरलैप के बारे में पता होना, ये सभी इनपुट में देरी को कम करने में मदद कर सकते हैं. इससे आपकी वेबसाइट इस्तेमाल करने वालों के साथ तेज़ी से इंटरैक्ट करने की सुविधा मिलती है.
Unsplash की हीरो इमेज, जिसे एरिक मैकलीन ने बनाया है.