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

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

Amit Kumar

Saurabh Rajpal

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

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

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

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

मुख्य लक्ष्य

redBus ने अपनी वेबसाइट के आईएनपी को ऑप्टिमाइज़ करने के लिए, तीन लक्ष्य तय किए थे:

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

सफ़र

redBus ने इंटरैक्शन लेटेंसी को दो तरीकों से बांटा है:

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

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

redBus ने INP को कैसे मेज़र किया

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

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

जब redBus के पास INP को ट्रैक करने के लिए सिस्टम हो गया, तब वे डेटा का विश्लेषण करके यह समझ पाए कि इंटरैक्टिविटी की समस्या कहां थी.

उपयोग के उदाहरण

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

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

redBus ने खोज पेज के लिए आईएनपी को कैसे ऑप्टिमाइज़ किया

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

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

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

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

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

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

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

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

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

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