किसी स्टार्टअप की, वेब पर सबसे बेहतर अनुभव देने वाली वेबसाइट बनाने की कहानी.
इसके बारे में जानकारी
Truebil एक भारतीय ऑनलाइन मार्केटप्लेस है. इसकी स्थापना 2015 में हुई थी. यहां 100% सर्टिफ़ाइड, इस्तेमाल की गई कारें बेची जाती हैं. इस ऐप्लिकेशन के हर महीने 1.4 लाख से ज़्यादा सक्रिय उपयोगकर्ता हैं. इसमें वाहन का मालिकाना हक ट्रांसफ़र करने, इंश्योरेंस, क़र्ज़, और सेवा की वारंटी से जुड़ी सभी सुविधाएं एक ही जगह पर मिलती हैं. संभावित ग्राहक, इमेज और जांच की पूरी जानकारी वाली रिपोर्ट के साथ अलग-अलग प्रॉडक्ट पेज देख सकते हैं. साथ ही, साइट की "तुलना करें" और "Truescore" सुविधाओं की मदद से, वाहन की जांच की जानकारी पा सकते हैं. Truebil अपने प्रॉडक्ट को बेहतर सुविधाओं के साथ उपलब्ध कराता है. इनमें मशीन लर्निंग के आधार पर, लोगों के हिसाब से सुझाव देना, पसंदीदा में जोड़ने की सुविधा, कार शेयर करने की सुविधा वगैरह शामिल हैं.
चुनौती
Truebil एक ऐसा स्टार्टअप है जिसमें कम फ़्रीक्वेंसी और ज़्यादा वैल्यू वाले लेन-देन होते हैं. इसलिए, प्राथमिकता तय करने और उसमें निवेश करने के लिए, सही प्लैटफ़ॉर्म चुनना ज़रूरी था.
Truebil ने मोबाइल को अपने टारगेट प्लैटफ़ॉर्म के तौर पर चुना. साथ ही, वेब को अपने पहले ऐप्लिकेशन Truebil Lite के लिए चुना, क्योंकि वेब को आसानी से खोजा जा सकता है और इसमें कम रुकावटें आती हैं. वेब टेक्नोलॉजी की मदद से, Android/iOS ऐप्लिकेशन बनाने की तुलना में कम डेवलपमेंट लागत, कम डेटा और मेमोरी का इस्तेमाल होता है. साथ ही, ग्राहक हासिल करने की लागत भी काफ़ी कम होती है. प्रगतिशील वेब ऐप्लिकेशन (PWA) बनाकर, Truebil को वेब के सभी फ़ायदे और iOS/Android के फ़ायदे मिल सकते हैं.
समाधान
Truebil Lite को बनाने में हमारी इन-हाउस टीम को चार महीने लगे. इसमें React, Django, और Preact (प्रोडक्शन माइग्रेशन के लिए) का इस्तेमाल किया गया. उन्होंने उपयोगकर्ता के लक्ष्यों के आधार पर, वेब ऐप्लिकेशन के लिए दिशा-निर्देश तय किए. यह अनुभव ऐसा होना चाहिए:
- पहले लोड और उसके बाद के नेविगेशन पर तेज़,
- भरोसेमंद हो. यह उपयोगकर्ता के नेटवर्क या डिवाइस की सीमाओं पर निर्भर नहीं होना चाहिए. साथ ही,
- दिलचस्प, खास तौर पर मोबाइल की छोटी स्क्रीन के लिए, ताकि उपयोगकर्ता उस पर वापस आना चाहें.
पहले लोड और नेविगेशन के लिए ऑप्टिमाइज़ करना
परफ़ॉर्मेंस को ऑप्टिमाइज़ करने के लिए Lighthouse का इस्तेमाल करके, टीम ने नई सुविधाओं को लागू करते समय परफ़ॉर्मेंस को प्राथमिकता दी. Truebil ने फ़र्स्ट कॉन्टेंटफ़ुल पेंट और इंटरैक्टिव होने में लगने वाला समय (टीटीआई) मेट्रिक को प्राथमिकता देकर, उपयोगकर्ता अनुभव को काफ़ी बेहतर बनाया. साथ ही, पेज को तेज़ी से लोड करने, बार-बार आने, और आसानी से नेविगेट करने के लिए उसे ऑप्टिमाइज़ किया. टीम ने परफ़ॉर्मेंस बजट सेट करके और अलग-अलग तकनीकों का इस्तेमाल करके ये नतीजे हासिल किए.
परफ़ॉर्मेंस बजट सेट करना
परफ़ॉर्मेंस को प्राथमिकता देते हुए, Truebil की टीम ने अपने अनुभव को एक पेज वाले ऐप्लिकेशन के तौर पर डिज़ाइन किया. इसमें, पहले लोड के लिए सर्वर-साइड रेंडरिंग और बाद के लोड के लिए क्लाइंट-साइड रेंडरिंग का इस्तेमाल किया गया. क्लाइंट साइड रेंडरिंग वाले वेब ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाए रखना मुश्किल हो सकता है. इसलिए, Truebil ने परफ़ॉर्मेंस बजट को बहुत सख्त सेट किया है, ताकि वे गति से समझौता न करें. खास तौर पर, जब वे ज़्यादा सुविधाएं जोड़ते हैं.
टीम ने TTI के लिए, माइलस्टोन पर आधारित सख्त बजट सेट किए, ताकि इसे पांच सेकंड से कम रखा जा सके. इस लक्ष्य को पूरा करने के लिए, उन्होंने मैन्युअल तरीके से पक्का किया कि कोई भी बिल्ड, 250 केबी के JavaScript बंडल साइज़ से ज़्यादा न हो. साथ ही, उन्होंने इमेज के साइज़ पर लगातार नज़र रखी और ऐप्लिकेशन के Lighthouse परफ़ॉर्मेंस स्कोर को लगातार ट्रैक किया.
JavaScript बंडल ऑप्टिमाइज़ करना
टीम ने ज़रूरी बातों से शुरुआत की. इसके लिए, JavaScript पेलोड को पहले से कैश मेमोरी में सेव करने और ऑप्टिमाइज़ करने के लिए, PRPL पैटर्न का इस्तेमाल किया. साथ ही, ज़रूरी JavaScript बंडल को दिखाने के लिए, HTTP/2 पर स्विच किया.
गै़र-ज़रूरी रिसॉर्स को लेज़ी लोड करने के लिए, उन्होंने फ़्रेमवर्क-लेवल के लेज़ी लोडिंग कॉम्पोनेंट का इस्तेमाल किया, ताकि वे फ़ोल्ड के नीचे मौजूद फ़्रैगमेंट को लोड कर सकें.
JavaScript बंडल से जुड़ी किसी भी रुकावट को दूर करने के लिए, टीम ने कोड को अलग-अलग करके पेलोड को कम किया. उन्होंने मुख्य बंडल का साइज़ कम करने और लोड होने में लगने वाले समय को 44% तक बेहतर बनाने के लिए, कॉम्पोनेंट और रूट के हिसाब से चंकिंग का इस्तेमाल किया. इससे TTI, 6 सेकंड से घटकर करीब 5 सेकंड और First Meaningful Paint (FMP), 4.1 सेकंड से घटकर 3.6 सेकंड हो गया.
ज़रूरी सीएसएस को इनलाइन करना
एफ़एमपी को और बेहतर बनाने के लिए, टीम ने लाइटहाउस का इस्तेमाल किया. इससे, परफ़ॉर्मेंस ऑप्टिमाइज़ेशन के अवसरों को ढूंढने और उनके असर की पुष्टि करने में मदद मिली. Lighthouse ने बताया कि रेंडर ब्लॉक करने वाली सीएसएस को कम करने से सबसे ज़्यादा फ़ायदा होगा. इसलिए, Truebil ने सभी ज़रूरी सीएसएस को इनलाइन किया और ग़ैर-ज़रूरी सीएसएस को कुछ समय के लिए रोका. इस तकनीक से, एफ़एमपी में करीब दो सेकंड की कमी आई.
किसी भी ऑरिजिन के लिए, एक से ज़्यादा बार और ज़्यादा किराये के लिए, राउंड ट्रिप से बचें
डीएनएस और TLS से होने वाले ओवरहेड को कम करने के लिए, Truebil ने <link rel="preconnect"> और <link rel="dns-prefetch"> का इस्तेमाल किया. इस तरीके से, ब्राउज़र पेज लोड होने पर टीएलएस हैंडशेक को जल्द से जल्द पूरा कर लेता है. साथ ही, क्रॉस-ऑरिजिन डोमेन नेम को पहले से हल कर लेता है. इससे, उपयोगकर्ता को सुरक्षित और तेज़ अनुभव मिलता है.
<link rel=preconnect> जोड़ने का असर.अगले पेज को डाइनैमिक तौर पर पहले से लोड करना
अपने डेटा का विश्लेषण करके, टीम ने सबसे सामान्य उपयोगकर्ता अनुभवों की पहचान की, ताकि उन्हें ऑप्टिमाइज़ किया जा सके. ऐसे मामलों में, ऐप्लिकेशन <link rel=prefetch> का इस्तेमाल करके अगले पेज का संसाधन डाइनैमिक तौर पर डाउनलोड करता है, ताकि उपयोगकर्ताओं को आसानी से नेविगेट करने में मदद मिल सके. टीम, प्रीफ़ेच करने के लिए लिंक की मैन्युअल तौर पर पहचान करती है. साथ ही, उन लिंक के लिए JS को बंडल करने के लिए वेबपैक का इस्तेमाल करती है.
इमेज और फ़ॉन्ट ऑप्टिमाइज़ करना
Truebil पर प्रॉडक्ट की लिस्टिंग में ज़्यादा से ज़्यादा 40 फ़ोटो शामिल की जा सकती हैं. ये फ़ोटो, प्रॉडक्ट को बेहतर तरीके से दिखाने और लोगों का भरोसा जीतने में अहम भूमिका निभाती हैं. यह पक्का करने के लिए कि इमेज पेज लोड होने में रुकावट न डालें, टीम ने अपने सभी रिसॉर्स को सीडीएन से दिखाने का विकल्प चुना. साथ ही, इमेज ऑप्टिमाइज़ेशन के लिए imagemagick का इस्तेमाल किया. उन्होंने लोड होने में लगने वाले समय को और कम करने के लिए, इमेज, JavaScript, और सीएसएस जैसे सभी कंप्रेस किए जा सकने वाले रिसॉर्स को भी Gzip किया.
Truebil ने अपनी सीएसएस को इस तरह सेट अप किया है कि बाहरी फ़ॉन्ट लोड होने तक, सिस्टम फ़ॉन्ट का इस्तेमाल फ़ॉलबैक के तौर पर किया जा सके. इससे, अदृश्य टेक्स्ट के फ़्लैश होने से बचा जा सकता है और लोड होने में लगने वाला समय भी कम हो जाता है.
अन्य ऑप्टिमाइज़ेशन
ऐप्लिकेशन तैयार होने के बाद, टीम को वेंडर बंडल का साइज़ और JavaScript को लागू करने में लगने वाला समय और कम करना था. इसलिए, उन्होंने अपने React ऐप्लिकेशन को प्रोडक्शन में Preact पर स्विच कर दिया. (इस बारे में ज़्यादा जानने के लिए, React कलेक्शन पर जाएं.) इस तरीके से, वेंडर बंडल का साइज़ 82.3 केबी से घटाकर 51.2 केबी कर दिया गया.
भरोसेमंदता बनाए रखना
Truebil के ज़्यादातर उपयोगकर्ता, भारत के ऐसे नेटवर्क से अपने प्रॉडक्ट को ऐक्सेस करते हैं जो कभी-कभी 2G तक के बैंडविड्थ तक गिर जाते हैं. इसलिए, नेटवर्क की खराब स्थिति में परफ़ॉर्मेंस को बेहतर बनाने के लिए, यह ज़रूरी था कि उपयोगकर्ताओं को ऐसा अनुभव दिया जाए जिस पर वे भरोसा कर सकें. साथ ही, यह भी ज़रूरी था कि प्रॉडक्ट हमेशा काम करता रहे.
भरोसेमंद तरीके से लोड करने के लिए, हाइब्रिड कैश मेमोरी की रणनीति
Truebil के कॉन्टेंट में इंटरैक्टिविटी और बदलाव की दर काफ़ी अलग-अलग होती है. Truebil की टीम ने यह पक्का करने के लिए कि उसका सभी कॉन्टेंट अप-टू-डेट और भरोसेमंद हो, नेटवर्क-फ़र्स्ट, कैश-फ़र्स्ट, और फ़ास्टेस्ट-फ़र्स्ट रणनीतियों का इस्तेमाल करके एपीआई कैश मेमोरी लागू की.
सदस्यता पेज जैसे स्टैटिक पेजों के लिए, Truebil पहले अपने सदस्यता एपीआई कैश मेमोरी का इस्तेमाल करता है. इसके बाद, नेटवर्क का इस्तेमाल करता है.
Truebil, नेटवर्क-फ़र्स्ट की रणनीति का इस्तेमाल उन पेजों के लिए करता है जिनमें डाइनैमिक कॉन्टेंट होता है और जो शायद ही कभी बदलता हो. जैसे, प्रॉडक्ट लिस्टिंग या जानकारी वाले पेज. इससे, नेटवर्क उपलब्ध न होने पर ब्राउज़र, एपीआई कैश मेमोरी का इस्तेमाल करने से पहले, कॉन्टेंट के लिए नेटवर्क की जांच कर पाता है.
साथ ही, अक्सर बदलने वाले डाइनैमिक पेजों, जैसे कि होम, फ़िल्टर, खोज, और शहर के पेजों के लिए, Truebil सबसे तेज़ स्ट्रेटजी का इस्तेमाल करता है. इससे, नेटवर्क या कैश मेमोरी में सेव किए गए कॉन्टेंट में से, सबसे पहले मिलने वाले कॉन्टेंट को दिखाया जाता है. यह पक्का करने के लिए कि कॉन्टेंट अप-टू-डेट हो, जब भी नेटवर्क का जवाब कैश मेमोरी में मौजूद जवाब से अलग हो, तो कैश मेमोरी को अपडेट कर दिया जाता है.
पूरी तरह से ऑफ़लाइन काम करने के लिए सर्विस वर्कर
Truebil के कॉन्टेंट का ज़्यादातर हिस्सा डाइनैमिक होता है. इसमें कभी भी कारें जोड़ी या खरीदी जा सकती हैं. हालांकि, टीम यह पक्का करना चाहती थी कि उनके उपयोगकर्ताओं के पास कुछ कॉन्टेंट हो, ताकि वे उससे जुड़ सकें. भले ही, वे खराब नेटवर्क का इस्तेमाल कर रहे हों या पूरी तरह से ऑफ़लाइन हों.
सर्विस वर्कर्स का इस्तेमाल करके, टीम ने स्टैटिक डेटा और डाइनैमिक डेटा, दोनों को कैश मेमोरी में सेव किया. उपयोगकर्ता ने पहले से ही इन डेटा के साथ इंटरैक्ट किया है, ताकि उपयोगकर्ता इसे ऑफ़लाइन देख सके. उपयोगकर्ताओं को यह जानकारी देने के लिए कि ऑनलाइन आने पर कॉन्टेंट बदल सकता है, टीम ने यूज़र इंटरफ़ेस (यूआई) को ग्रेस्केल में बदल दिया है, ताकि यह पता चल सके कि डिवाइस ऑफ़लाइन है. Truebil पर प्रॉडक्ट पेजों को ब्राउज़ करना, उपयोगकर्ता अनुभव का एक अहम हिस्सा है. ऐसे उपयोगकर्ता जो PWA पर कम से कम एक बार आ चुके हैं वे उन स्टोर पेजों और प्रॉडक्ट पेजों को ब्राउज़ कर सकते हैं जिन पर वे पहले आ चुके हैं. हालांकि, उन्हें स्टोर पेज या प्रॉडक्ट में कोई अपडेट नहीं दिखेगा.
उपयोगकर्ताओं को वापस लाने के लिए, यूज़र ऐक्टिविटी को बेहतर बनाना
दिलचस्प शुरुआती अनुभव
ज़्यादातर उपयोगकर्ता, पैसे चुकाकर इस्तेमाल किए जाने वाले चैनलों से आते हैं. इसलिए, Truebil को अपने तेज़ी से लोड होने वाले वेब ऐप्लिकेशन के साथ, ऐसे प्रॉडक्ट की ज़रूरत थी जो कन्वर्ज़न बढ़ाने के लिए, ज़्यादा काम के सुझाव दिखाता हो. टीम, मौजूदा उपयोगकर्ताओं के लिए सुझाव देने वाले सिस्टम का इस्तेमाल करती है. यह सिस्टम, बेहतर फ़िल्टरिंग पर आधारित होता है. हालांकि, यह सिस्टम पहली बार लॉग इन करने वाले उपयोगकर्ताओं के लिए काम नहीं करता.
पहली बार ऐप्लिकेशन इस्तेमाल करने वाले लोगों को कोल्ड स्टार्ट से बचाने के लिए, टीम ने डिजिटल मार्केटिंग की मदद से सुझाव देने वाला सिस्टम इंटिग्रेट किया. वे यूटीएम पैरामीटर की मदद से, विज्ञापन के डेस्टिनेशन यूआरएल में कार के मॉडल, कीमत, और बॉडी टाइप जैसी प्रॉडक्ट की जानकारी जोड़ते हैं. इस जानकारी को उनके सुझाव देने वाले सिस्टम से पढ़ा जाता है और दिखाए गए प्रॉडक्ट में दिखाया जाता है. अगर सिस्टम को यूआरएल में कोई जानकारी नहीं मिलती है, तो वह लोकप्रिय कारों के सुझाव दिखाता है. इनमें लोकप्रिय मॉडल, लोकप्रिय बजट, और पिछले कुछ हफ़्तों या दिनों में लोकप्रिय रही कारों की जानकारी शामिल होती है.
इंस्टॉल किया जा सकने वाला वेब ऐप्लिकेशन
Truebil ने बेहतर उपयोगकर्ता अनुभव देने वाला, तेज़ और सभी सुविधाओं वाला वेब ऐप्लिकेशन बनाया है. अब वह यह पक्का करना चाहता है कि उसके उपयोगकर्ता बार-बार आते रहें. उन्हें पता चला कि ऐप्लिकेशन को इंस्टॉल करने की सुविधा देने से, बार-बार आने वाले लोगों को आसानी से ऐप्लिकेशन पर लाया जा सकता है.
टीम ने होम स्क्रीन पर जोड़ें सुविधा को लागू किया, ताकि उनके प्रॉडक्ट को पूरी तरह से प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) बनाया जा सके. इस तरीके से, उपयोगकर्ताओं को Truebil Lite को होम स्क्रीन पर जोड़ने और उसे फ़ुल-स्क्रीन मोड में लॉन्च करने की सुविधा मिली. साथ ही, उन्होंने पहले से ही ऑफ़लाइन मोड लागू कर रखा था. इसलिए, टीम ने आसानी से नई सुविधा जोड़ दी.
यह पक्का करने के लिए कि उनके उपयोगकर्ताओं को स्पैम न मिले और उपयोगकर्ता ऐप्लिकेशन इंस्टॉल करें, टीम ने हाल ही में PWA इंस्टॉल करने का प्रमोशन करने के लिए अपनी रणनीति अपडेट की है. इससे, इंस्टॉल करने के प्रॉम्प्ट तब दिखेंगे, जब वे अलग-अलग तरह के उपयोगकर्ताओं के लिए ज़रूरी होंगे. Truebil ने तीन हिस्सों वाली रणनीति बनाई:
- जब उपयोगकर्ता कोई कार्रवाई पूरी कर ले या डिवाइस इस्तेमाल न कर रहा हो, तब प्रॉम्प्ट दिखाएं.
- वयस्क उपयोगकर्ताओं को संदर्भ के हिसाब से प्रॉम्प्ट दिखाएं.
- जब उपयोगकर्ता साइट पर तय समय बिता दे, तब बैनर दिखाएं.
प्रोसेस पूरी होने पर और ज़्यादा ट्रैफ़िक वाले पेजों पर डिफ़ॉल्ट बैनर
टीम ने यह फ़ैसला लिया है कि जब कोई उपयोगकर्ता कोई टास्क पूरा कर ले या ज़्यादा ट्रैफ़िक वाले पेजों पर हो, लेकिन कोई कार्रवाई न कर रहा हो, तो उसे इंस्टॉलेशन बैनर दिखाया जाए. कार्रवाई न करने का मतलब है कि उपयोगकर्ता स्क्रोल न कर रहा हो या कोई फ़ॉर्म न भर रहा हो. इस तरीके से, उपयोगकर्ता की गतिविधि में रुकावट नहीं आती.
वयस्क उपयोगकर्ताओं के लिए, कॉन्टेक्स्ट के हिसाब से मिलने वाले प्रॉम्प्ट
जिन उपयोगकर्ताओं ने कुछ समय तक ऐप्लिकेशन का इस्तेमाल किया था उनके लिए, टीम ने ज़्यादा काम के कस्टम मैसेज का इस्तेमाल किया. इससे, उन्हें होम स्क्रीन पर ऐप्लिकेशन इंस्टॉल करने की अहमियत के बारे में पता चला:
समय के हिसाब से प्रॉम्प्ट दिखाने के लिए कस्टम बैनर
आखिर में, टीम ने सूचना जैसे डिज़ाइन वाला एक ऐसा बैनर बनाया जो किसी खास इवेंट पर ट्रिगर होता है. जैसे, लिस्टिंग पेज खोलना या उपयोगकर्ता के ऐप्लिकेशन में तय समय बिताने के बाद:
इन सुधारों की वजह से, Truebil के कन्वर्ज़न और यूज़र ऐक्टिविटी की दरों में काफ़ी बढ़ोतरी हुई है. साथ ही, उपयोगकर्ता सेशन 26% ज़्यादा लंबे और कन्वर्ज़न 61% ज़्यादा हुए हैं. हर कन्वर्ज़न की ज़्यादा ट्रांज़ैक्शन वैल्यू को देखते हुए, यह उनके कारोबार के लिए अहम है.
सीमित संसाधनों वाले स्टार्टअप के लिए, कारोबार की सफलता के लिए सही प्लैटफ़ॉर्म चुनना ज़रूरी हो सकता है. हमने तेज़ी, बेहतर परफ़ॉर्मेंस, और यूज़र ऐक्टिविटी पर फ़ोकस करने वाले PWA पर स्विच किया. इससे, हमें मार्केटिंग पर होने वाले खर्च के मुकाबले आय में 80% की बढ़ोतरी हुई. इसकी वजह, कन्वर्ज़न में हुई बढ़ोतरी और वेब पर आसानी से पहुंचने की सुविधा है.
राकेश रमन, Truebil के को-फ़ाउंडर और प्रॉडक्ट और डेटा साइंस के चीफ़
44%
लोड होने में लगने वाले समय में सुधार
26%
लंबे उपयोगकर्ता सेशन
61%
कन्वर्ज़न में बढ़ोतरी
80%
मार्केटिंग पर होने वाले खर्च के मुकाबले रेवेन्यू में बढ़ोतरी