जानें कि Truebil ने किस तरह वेब को, आगे बढ़ने का चैनल बनाया

एक स्टार्टअप की कहानी, जिसमें बताया गया है कि कैसे उसने सबसे बेहतरीन वेब अनुभव तैयार किया.

इसके बारे में जानकारी

Truebil की स्थापना साल 2015 में हुई थी. यह भारत का एक ऑनलाइन मार्केटप्लेस है. यहां इस्तेमाल की गई 100% सर्टिफ़ाइड कारें बेची जाती हैं. इस प्लैटफ़ॉर्म पर हर महीने 14 लाख से ज़्यादा सक्रिय उपयोगकर्ता होते हैं.यह एक ऐसा प्लैटफ़ॉर्म है जहां आपको टाइटल ट्रांसफ़र, बीमा, लोन, और सेवा की वारंटी जैसी सुविधाएं मिलती हैं. संभावित खरीदार, इमेज और पूरी जानकारी वाली जांच रिपोर्ट के साथ-साथ अलग-अलग प्रॉडक्ट पेज देख सकते हैं. साथ ही, साइट की "तुलना करें" और "ट्रूसकोर" सुविधाओं का इस्तेमाल करके, वाहन का आकलन कर सकते हैं. Truebil अपने प्रॉडक्ट को कई सुविधाओं के साथ उपलब्ध कराता है. इनमें मशीन लर्निंग के आधार पर, लोगों की पसंद के हिसाब से सुझाव देने की सुविधा, पसंदीदा कारों की सूची में जोड़ने की सुविधा, कार शेयर करने की सुविधा वगैरह शामिल हैं.

चुनौती

Truebil एक छोटा स्टार्टअप है. इसमें कम फ़्रीक्वेंसी वाले, लेकिन ज़्यादा वैल्यू वाले लेन-देन होते हैं. इसलिए, प्राथमिकता देने और निवेश करने के लिए सही प्लैटफ़ॉर्म चुनना ज़रूरी था.

Truebil ने मोबाइल को अपना टारगेट प्लैटफ़ॉर्म माना. साथ ही, उन्होंने अपने पहले ऐप्लिकेशन, Truebil Lite के लिए वेब को चुना. इसकी वजह यह है कि वेब पर ऐप्लिकेशन को आसानी से खोजा जा सकता है और इसमें रुकावटें कम आती हैं. वेब टेक्नोलॉजी का इस्तेमाल करने पर, Android/iOS ऐप्लिकेशन बनाने की तुलना में डेवलपमेंट पर कम खर्च आता है. साथ ही, डेटा और मेमोरी का इस्तेमाल कम होता है. इसके अलावा, ग्राहक हासिल करने की लागत भी काफ़ी कम होती है. प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) बनाकर, Truebil को वेब के सभी फ़ायदे और iOS/Android के फ़ायदे मिल सकते हैं.

समाधान

इन-हाउस टीम को Truebil Lite को डेवलप करने में चार महीने लगे. इसके लिए, React, Django, और Preact (प्रोडक्शन माइग्रेशन के लिए) का इस्तेमाल किया गया. इन्होंने उपयोगकर्ता के लक्ष्यों के आधार पर, वेब ऐप्लिकेशन के लिए दिशा-निर्देश तय किए. उपयोगकर्ता अनुभव ऐसा होना चाहिए:

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

तेज़ी से लोड होने और नेविगेशन के लिए ऑप्टिमाइज़ करना

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

परफ़ॉर्मेंस बजट सेट करना

Truebil की टीम ने परफ़ॉर्मेंस को ध्यान में रखते हुए, अपने ऐप्लिकेशन को सिंगल पेज ऐप्लिकेशन के तौर पर डिज़ाइन किया. इसमें पहली बार लोड होने के लिए सर्वर-साइड रेंडरिंग और बाद में लोड होने के लिए क्लाइंट-साइड रेंडरिंग का इस्तेमाल किया गया. क्लाइंट साइड रेंडरिंग वाले वेब ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाए रखना मुश्किल हो सकता है. इसलिए, Truebil ने परफ़ॉर्मेंस बजट को बहुत ज़्यादा सीमित कर दिया है, ताकि यह पक्का किया जा सके कि स्पीड से समझौता न किया जाए. ऐसा खास तौर पर तब किया जाता है, जब वे ज़्यादा सुविधाएं जोड़ते हैं.

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

JavaScript बंडलों को ऑप्टिमाइज़ करना

टीम ने बुनियादी बातों से शुरुआत की. इसके लिए, उन्होंने JavaScript पेलोड को पहले से कैश मेमोरी में सेव करने और ऑप्टिमाइज़ करने के लिए, PRPL पैटर्न का इस्तेमाल किया. साथ ही, ज़रूरी JavaScript बंडल को दिखाने के लिए, HTTP/2 पर स्विच किया.

ग़ैर-ज़रूरी संसाधनों को लेज़ी लोड करने के लिए, उन्होंने फ़्रेमवर्क-लेवल के लेज़ी लोडिंग कॉम्पोनेंट का इस्तेमाल किया. इससे, फ़ोल्ड के नीचे मौजूद फ़्रैगमेंट लोड किए जा सके.

JavaScript बंडल से जुड़ी किसी भी समस्या को दूर करने के लिए, टीम ने कोड को अलग-अलग करके पेलोड को कम किया. उन्होंने मुख्य बंडल का साइज़ कम करने के लिए, कॉम्पोनेंट और रूट पर आधारित चंकिंग का इस्तेमाल किया. इससे पेज लोड होने में लगने वाले समय में 44% की कमी आई. साथ ही, टीटीआई 6 सेकंड से घटकर करीब 5 सेकंड और फ़र्स्ट मीनिंगफ़ुल पेंट (एफ़एमपी) 4.1 सेकंड से घटकर 3.6 सेकंड हो गया.

इनलाइन क्रिटिकल सीएसएस

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

किसी भी जगह से बार-बार और महंगे राउंड ट्रिप से बचें

डीएनएस और टीएलएस से होने वाले ओवरहेड को कम करने के लिए, Truebil ने <link rel="preconnect"> और <link rel="dns-prefetch"> का इस्तेमाल किया. इस तरीके से, ब्राउज़र पेज लोड होने पर टीएलएस हैंडशेक को जल्द से जल्द पूरा कर लेता है. साथ ही, क्रॉस-ऑरिजिन डोमेन नेम को पहले से हल कर लेता है. इससे उपयोगकर्ताओं को सुरक्षित और बेहतर अनुभव मिलता है.

अगले पेज को डाइनैमिक तरीके से प्रीफ़ेच करना

टीम ने अपने डेटा का विश्लेषण करके, उपयोगकर्ताओं के सबसे सामान्य सफ़र की पहचान की. इसके बाद, टीम ने इन सफ़र को ऑप्टिमाइज़ किया. इन मामलों में, ऐप्लिकेशन <link rel=prefetch> का इस्तेमाल करके अगले पेज के संसाधन को डाइनैमिक तरीके से डाउनलोड करता है, ताकि उपयोगकर्ताओं को आसानी से नेविगेट करने में मदद मिल सके. टीम, प्रीफ़ेच किए जाने वाले लिंक की पहचान मैन्युअल तरीके से करती है. साथ ही, उन लिंक के लिए JS को बंडल करने के लिए webpack का इस्तेमाल करती है.

इमेज और फ़ॉन्ट ऑप्टिमाइज़ करना

इमेज, Truebil के प्रॉडक्ट के अनुभव और विश्वसनीयता का एक अहम हिस्सा हैं. हर प्रॉडक्ट लिस्टिंग में ज़्यादा से ज़्यादा 40 फ़ोटो शामिल होती हैं. यह पक्का करने के लिए कि इमेज की वजह से पेज लोड होने में समय न लगे, टीम ने अपने सभी संसाधनों को सीडीएन से दिखाने का विकल्प चुना. साथ ही, इमेज को ऑप्टिमाइज़ करने के लिए imagemagick का इस्तेमाल किया. उन्होंने लोड होने में लगने वाले समय को और कम करने के लिए, कंप्रेस किए जा सकने वाले सभी रिसॉर्स को Gzip किया. इनमें इमेज, JavaScript, और सीएसएस शामिल हैं.

Truebil ने अपने सीएसएस को इस तरह से सेट अप किया है कि जब तक बाहरी फ़ॉन्ट लोड नहीं हो जाते, तब तक सिस्टम फ़ॉन्ट का इस्तेमाल किया जा सके. इससे टेक्स्ट के अचानक गायब होने की समस्या से बचा जा सकता है और लोड होने में कम से कम समय लगता है.

अन्य ऑप्टिमाइज़ेशन

जब ऐप्लिकेशन तैयार हो गया, तो टीम को वेंडर बंडल के साइज़ और JavaScript की कार्रवाई में लगने वाले समय को और कम करना था. इसलिए, उन्होंने अपने React ऐप्लिकेशन को प्रोडक्शन में Preact पर स्विच कर दिया. (ज़्यादा जानने के लिए, React कलेक्शन देखें.) इस तरीके से, वेंडर बंडल के साइज़ को 82.3 केबी से घटाकर 51.2 केबी किया जा सका.

भरोसेमंद तरीके से काम करने की सुविधा

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

भरोसेमंद तरीके से लोड करने के लिए हाइब्रिड कैशिंग की रणनीति

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

स्टैटिक पेजों के लिए, Truebil कैश मेमोरी में मौजूद डेटा को पहले इस्तेमाल करने की रणनीति अपनाता है. जैसे, सदस्यता वाले पेज के लिए, Truebil सबसे पहले सदस्यता वाले एपीआई की कैश मेमोरी में जाता है. अगर वहां डेटा नहीं मिलता है, तो वह नेटवर्क पर वापस आ जाता है.

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

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

ऑफ़लाइन मोड में पूरी तरह से काम करने के लिए सर्विस वर्कर

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

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

उपयोगकर्ताओं की दिलचस्पी बढ़ाएं, ताकि वे बार-बार आपके ऐप्लिकेशन पर आएं

दिलचस्प शुरुआती अनुभव

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

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

इंस्टॉल किया जा सकने वाला वेब ऐप्लिकेशन

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

टीम ने होम स्क्रीन पर जोड़ें सुविधा को लागू किया, ताकि उनके प्रॉडक्ट को पूरी तरह से प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) बनाया जा सके. इस तरीके से, उपयोगकर्ता Truebil Lite को होम स्क्रीन पर जोड़ सकते थे और इसे फ़ुल-स्क्रीन मोड में लॉन्च कर सकते थे. टीम ने पहले से ही ऑफ़लाइन मोड लागू किया हुआ था. इसलिए, टीम को नई सुविधा जोड़ने में आसानी हुई.

यह पक्का करने के लिए कि उनके उपयोगकर्ताओं को स्पैम न किया जाए और इस बात की संभावना बढ़ाने के लिए कि उपयोगकर्ता ऐप्लिकेशन इंस्टॉल करेंगे, टीम ने हाल ही में PWA इंस्टॉल करने का प्रमोशन करने की रणनीति को अपडेट किया है. इससे अलग-अलग तरह के उपयोगकर्ताओं के लिए, इंस्टॉल करने के प्रॉम्प्ट तब दिखेंगे, जब वे वाकई में उनके काम के होंगे. Truebil ने तीन चरणों वाली रणनीति अपनाई:

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

प्रोसेस पूरी होने पर और ज़्यादा ट्रैफ़िक वाले पेजों पर डिफ़ॉल्ट बैनर

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

ज़्यादा उम्र के उपयोगकर्ताओं के लिए कॉन्टेक्स्ट के हिसाब से प्रॉम्प्ट

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

समय के हिसाब से दिखने वाले प्रॉम्प्ट के लिए कस्टम बैनर

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

इन सुधारों की वजह से, Truebil के कन्वर्ज़न और यूज़र ऐक्टिविटी में काफ़ी बढ़ोतरी हुई है. साथ ही, उपयोगकर्ता के सेशन की अवधि में 26% की बढ़ोतरी और कन्वर्ज़न में 61% की बढ़ोतरी हुई है. यह उनके कारोबार के लिए काफ़ी अहम है, क्योंकि हर कन्वर्ज़न की ट्रांज़ैक्शन वैल्यू ज़्यादा होती है.

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

राकेश रमन, Truebil के सह-संस्थापक और प्रॉडक्ट और डेटा साइंस के प्रमुख