वेब परफ़ॉर्मेंस पर फ़ोकस करने से, Tokopedia की क्लिक-थ्रू दर में किस तरह 35% की बढ़ोतरी हुई

कारोबार में सफलता पाने के लिए, वेब परफ़ॉर्मेंस डैशबोर्ड बनाना और JavaScript, संसाधनों, और होम पेज को ऑप्टिमाइज़ करना.

Tokopedia इंडोनेशिया की सबसे बड़ी ई-कॉमर्स कंपनियों में से एक है. देश भर में 27 लाख से ज़्यादा कारोबारी नेटवर्क, 1.8 करोड़ से ज़्यादा प्रॉडक्ट लिस्टिंग, और हर महीने पांच करोड़ से ज़्यादा वेबसाइट पर आने वाले लोगों की वजह से, वेब टीम जानती थी कि वेब परफ़ॉर्मेंस में निवेश करना ज़रूरी है. परफ़ॉर्मेंस को प्राथमिकता देने पर काम करने पर, कंपनी ने क्लिक मिलने की दर (सीटीआर) में 35% और कन्वर्ज़न (CVR) में 8% की बढ़ोतरी हासिल की.

35_%

क्लिक मिलने की दर (सीटीआर) में बढ़ोतरी

8_%

CVR में बढ़ोतरी

4_{सेकंड}

टीटीआई में सुधार

अवसर को हाइलाइट करना

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

इस्तेमाल किया गया

JavaScript और रिसॉर्स ऑप्टिमाइज़ेशन

परफ़ॉर्मेंस से जुड़ी समस्याओं की एक आम वजह है रेंडर होने में रुकावट आना या लंबे समय तक चलने वाली JavaScript का इस्तेमाल करना. इसे कम करने के लिए, टीम ने कई कदम उठाए:

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

स्क्रिप्ट कंट्रोलर लाइब्रेरी की मदद से, टीटीआई में 4 सेकंड की सुधार हुई

होम पेज ऑप्टिमाइज़ेशन

टीम ने Svelte का इस्तेमाल करके, वेबसाइट पर पहली बार आने वाले लोगों के लिए, होम पेज का एक लाइट वर्शन बनाया, ताकि वेबसाइट पर उपयोगकर्ताओं को बेहतर अनुभव मिले. इस वर्शन में बैकग्राउंड में नॉन-लाइट एसेट को कैश मेमोरी में सेव करने के लिए, सर्विस वर्कर का भी इस्तेमाल किया गया.

ऐप्लिकेशन JavaScript का साइज़ 88% कम किया गया. इसे 320 केबी से बदलकर 37 केबी कर दिया गया. लाइटहाउस स्कोर को 90 पॉइंट से बढ़ाया. एक सेकंड से कम का एफ़सीपी मिला. क्लिक मिलने की दर (सीटीआर) में 35% की बढ़ोतरी हुई. 8% CVR की बढ़ोतरी.

परफ़ॉर्मेंस का बजट तय करना और उसे मॉनिटर करना

टीम ने वेब पेजों की क्वालिटी को बेहतर बनाने के लिए, Lighthouse और अन्य टूल का इस्तेमाल करके परफ़ॉर्मेंस मॉनिटर करने वाला डैशबोर्ड बनाया:

इससे नेटवर्क की क्वालिटी, इंफ़्रास्ट्रक्चर की निगरानी, फ़्रंटएंड परफ़ॉर्मेंस, और सर्वर की परफ़ॉर्मेंस का आकलन किया जाता है.
फ़ील्ड और लैब मेट्रिक पर नज़र रखने के लिए, वेब प्लैटफ़ॉर्म एपीआई (जैसे कि Resource Timing API और Server-Timing हेडर), PageSpeed Insights (PSI) एपीआई, और Chrome उपयोगकर्ता अनुभव रिपोर्ट के डेटा का इस्तेमाल करता है.
यह Lighthouse की इमेज का विश्लेषण करता है, ताकि इमेज को ऑप्टिमाइज़ करने के अवसरों की पहचान करने में मदद मिल सके.
लगातार इंटिग्रेशन (सीआई) के दौरान बंडल साइज़ के बजट को लागू करता है. अगर बंडल का साइज़ बजट से ज़्यादा होता है, तो सीआई रन नहीं हो पाता.

होम पेज पर 2.2 सेकंड का टीटीआई स्कोर (लाइटहाउस स्कोर: 88). प्रॉडक्ट पेजों पर 1.9 सेकंड का टीटीआई स्कोर (लाइटहाउस स्कोर: 86).

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

भारत और दक्षिण पूर्व एशिया में सफलता की कहानियों के लिए स्केल ऑन वेब केस स्टडी पेज देखें.