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

एक बेहतरीन वेब अनुभव तैयार करने की एक स्टार्टअप की कहानी.

Harleen Batra

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

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

चैलेंज

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

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

समस्या का हल

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

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

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

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

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

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

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

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

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

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

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

चंक के साइज़ को कम करने का असर.

ज़रूरी सीएसएस को इनलाइन करना

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

ज़रूरी सीएसएस को इनलाइन करने का असर.

किसी भी यात्रा की जगह के लिए एक से ज़्यादा, महंगी दोतरफ़ा यात्रा से बचें

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

<link rel=preconnect> को जोड़ने का असर.

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

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

उपयोगकर्ता की सामान्य गतिविधियों के लिए, ऐसेट को प्रीफ़ेच करने का असर.

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

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

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

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

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

भरोसा कायम करें

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

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

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

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

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

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

पूरे ऑफ़लाइन अनुभव के लिए सर्विस वर्कर

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

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

ऑफ़लाइन मोड में Truebl Lite की सुविधा.

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

एक दिलचस्प पहला अनुभव

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

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

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

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

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

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

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

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

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

वयस्क उपयोगकर्ताओं के लिए काम के प्रॉम्प्ट

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

समय के हिसाब से प्रॉम्प्ट के लिए पसंद के मुताबिक बनाया गया बैनर

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

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

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

राकेश रमन, को-फ़ाउंडर और ट्रूबिल में प्रॉडक्ट और डेटा साइंस के चीफ़

44_%

कॉन्टेंट लोड होने में लगने वाले समय में सुधार

26_%

लंबे उपयोगकर्ता सेशन

61_%

कन्वर्ज़न में हुई बढ़ोतरी

80_%

रेवेन्यू और मार्केटिंग के खर्च में बढ़ोतरी