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