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

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

Jeremy Wagner

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

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

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

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

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

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

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

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

इनपुट में लगने वाले समय को कम करने का तरीका

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

नतीजा

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

एरिक मैकलीन की Unsplash से ली गई हीरो इमेज.