RedBus ने अपनी वेबसाइट के इंटरैक्शन टू नेक्स्ट पेंट (INP) में कैसे सुधार किया और बिक्री में 7% की बढ़ोतरी कैसे हुई

INP ऑप्टिमाइज़ेशन की मदद से, RedBus की बिक्री में करीब 7% की बढ़ोतरी हुई

अमित कुमार

सौरभ राजपाल

वेब और इसकी क्षमताओं में तेज़ी से बदलाव हो रहा है. अब वेब पर बेहतर और सभी सुविधाओं का इस्तेमाल किया जा सकता है, ताकि अपनी क्षमताओं के हिसाब से वह बहुत कुछ किया जा सके जो नेटिव ऐप्लिकेशन में किया जा सकता है.

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

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

भारत में बस की बुकिंग और टिकट बेचने वाली वेबसाइट redBus ने अपनी वेबसाइट की आईएनपी को बेहतर बनाने की पूरी कोशिश की. उस दौरान भी इसे प्रयोग के तौर पर उपलब्ध मेट्रिक माना जाता था. उनकी कोशिशों की वजह से, कंपनी अपनी बिक्री में 7% की बढ़ोतरी कर पाई. यह भी पता चला कि वेब परफ़ॉर्मेंस और कारोबार की परफ़ॉर्मेंस, दोनों के बीच एक बार फिर से संबंध देखने को मिला है. यहां बताया गया है कि RedBus ने अपनी वेबसाइट की आईएनपी को बेहतर बनाने के लिए क्या किया.

टॉप लक्ष्य

जब RedBus ने अपनी वेबसाइट के आईएनपी को ऑप्टिमाइज़ करने का फ़ैसला लिया, तब उनके दिमाग में तीन लक्ष्य थे:

1. नेटवर्क की स्पीड और डिवाइस की क्षमताओं पर ध्यान दिए बिना, इंटरैक्शन के इंतज़ार में लगने वाले समय पर ध्यान देकर, उपयोगकर्ताओं को बेहतर अनुभव दें.
2. इंटरैक्शन को जल्द से जल्द बनाए रखने के लिए उनकी वेबसाइट को ऑप्टिमाइज़ करें.
3. पक्का करें कि उनके एपीआई से मिलने वाले जवाब कम से कम हों, ताकि फ़्रंट एंड में तेज़ी से डेटा ट्रांसफ़र हो सके.

सफ़र

RedBus ने इंटरैक्शन के इंतज़ार के समय को दो तरीकों से कैटगरी में बांटा:

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

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

RedBus ने आईएनपी को कैसे मापा

RedBus ने न सिर्फ़ आईएनपी को ट्रैक करने के लिए, बल्कि अपनी वेबसाइट के सभी पेजों के लिए उपयोगकर्ता अनुभव की सभी अहम मेट्रिक को ट्रैक करने के लिए, Google की बनाई web-vitals JavaScript लाइब्रेरी का भी इस्तेमाल किया. web-vitals JavaScript लाइब्रेरी के अलावा, RedBus ने फ़्रंट एंड पर इकट्ठा किए गए INP डेटा का विश्लेषण करने के लिए ELK का इस्तेमाल किया.

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

एक समय RedBus के पास आईएनपी को ट्रैक करने के लिए सिस्टम तैयार करने के बाद, वे डेटा का विश्लेषण कर सकते थे, ताकि यह बेहतर तरीके से समझ सकें कि देर किस बात की है.

इस्तेमाल के उदाहरण

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

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

RedBus ने खोज वाले पेज के लिए INP को कैसे ऑप्टिमाइज़ किया

खोज पेज के आईएनपी को बेहतर बनाने के लिए, RedBus ने कई ऑप्टिमाइज़ेशन किए हैं:

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

इसके अलावा, खोज नतीजों के पेज में ये ऑप्टिमाइज़ेशन किए गए हैं:

• नतीजों के नए बैच, खोज नतीजों के पेज पर, दूसरे से आखिरी कार्ड पर फ़ेच किए गए. ऐसा इसलिए किया गया, ताकि उपयोगकर्ता के अनुभव और विज़ुअल परफ़ॉर्मेंस को बेहतर बनाया जा सके. ऐसा, लेज़ी लोडिंग को पहले से ट्रिगर करने के लिए किया जाता है.
• लेज़ी लोडिंग के दौरान, हर नेटवर्क कॉल पर कम नतीजे फ़ेच किए गए. फ़ेच करने की दर को 30 से घटाकर 10 करने पर, आईएनपी रेंज में 870 से 900 की कमी देखी गई. यह संख्या 350 से 370 के बीच है.

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

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

इस बदलाव के बाद, पेज के आईएनपी में 72% की बढ़ोतरी हुई. इससे उपयोगकर्ता को फटाफट और बेहतर अनुभव मिलेगा. इससे, उपयोगकर्ताओं के इंटरैक्ट करने की संभावना बढ़ जाएगी.

कारोबार पर असर

कारोबार की परफ़ॉर्मेंस और पेज की परफ़ॉर्मेंस के बीच का संबंध साफ़ तौर पर बताया गया है. वेबसाइट की परफ़ॉर्मेंस की अन्य अहम जानकारी की तुलना में, आईएनपी एक नई मेट्रिक है. फिर भी, RedBus को उपयोगकर्ताओं को ध्यान में रखकर बनाई गई परफ़ॉर्मेंस मेट्रिक को बेहतर बनाने पर फ़ोकस करके कारोबार के बेहतर नतीजे मिले. इससे बिक्री में 7% की बढ़ोतरी हुई.

कम शब्दों में कहें, तो INP ने RedBus की वेबसाइट पर रनटाइम की परफ़ॉर्मेंस की समस्याओं को एक साथ दिखाने में मदद की. सुधार होने की जानकारी मिलने के बाद, RedBus ने समस्या को समझा, उसे फिर से बनाया, और उस अहम जानकारी का इस्तेमाल, ऑप्टिमाइज़ेशन के लिए किया. इससे RedBus और इसके कारोबार को फ़ायदा हुआ.