किस तरह ई-कॉमर्स फ़ैशन रिटेलर ने वेबसाइट की परफ़ॉर्मेंस की जानकारी और परफ़ॉर्मेंस मेट्रिक को कारोबार की मेट्रिक के साथ जोड़ा. किस तरह केपीआई में बढ़ोतरी देखी गई. साथ ही, उन्होंने "परफ़ॉर्मेंस बिज़नेस केस कैलकुलेटर" बनाया, ताकि प्रॉडक्ट से जुड़े फ़ैसले लेने और परफ़ॉर्मेंस कल्चर को बेहतर बनाया जा सके.
कई कंपनियों में, वेबसाइट की स्पीड की परफ़ॉर्मेंस और वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को, अब भी इंजीनियरिंग टीमों की ज़िम्मेदारी के तौर पर देखा जाता है. अगर कारोबार और ग्राहक के अनुभव को समझना मुश्किल है, तो हो सकता है कि साइट की स्पीड को कारोबार के दूसरे हिस्सों में न देखा जा सके. इस वजह से, अहम फ़ैसले लिए जाते समय और रोडमैप तय करते समय परफ़ॉर्मेंस की अनदेखी हो सकती है.
सभी टीमों में परफ़ॉर्मेंस कल्चर को बेहतर बनाने और वेब के अनुभव को बेहतर बनाने के लिए, लग्ज़री ई-कॉमर्स फ़ैशन खुदरा दुकानदार Farfetch ने ग्राहकों को ध्यान में रखकर बनाई गई परफ़ॉर्मेंस मेट्रिक तय करने और उनका इस्तेमाल करने के लिए एक प्रोजेक्ट लॉन्च किया. इन कैंपेन का मकसद, इन्हें कारोबार की मेट्रिक से जोड़ना था, ताकि यह पता चल सके कि परफ़ॉर्मेंस, कंपनी के केपीआई पर कैसे असर डालती है.
हालांकि, उनकी सोच खत्म नहीं हुई. आखिरकार, इस प्रोजेक्ट का मकसद बड़े पैमाने पर सांस्कृतिक बदलाव लाना था. इसके तहत, संगठन में आपसी सहमति को अलग करना और कारोबार के लिए एक नई भाषा उपलब्ध कराना, सभी को एक-दूसरे से बात करने का तरीका बताने का था, ताकि सभी को तकनीकी विषयों के बारे में जानकारी मिल सके. फ़ारच एक साझा ज़िम्मेदारी के रूप में वेबसाइट की स्पीड की परफ़ॉर्मेंस दिखाना चाहता था, ताकि वह सोच-समझकर फ़ैसला ले सके. साथ ही, उसे अच्छे वेब अनुभव के मुख्य आधार के रूप में स्थापित करना चाहता था.
शुरुआत करने के लिए, Farfetch ने महसूस किया कि कोई एक डिपार्टमेंट पहले की तरह इस काम को नहीं कर सकता है. उन्होंने इंजीनियर, इन्फ़्रास्ट्रक्चर, आर्किटेक्चर, और प्रॉडक्ट जैसे अलग-अलग क्षेत्रों के विशेषज्ञों की एक कोर टीम को इकट्ठा किया. इस टीम ने, इस विषय को बेहतर तरीके से पेश करने के लिए सिलसिलेवार तरीके से रणनीति बनाई.
पहला चरण: मेट्रिक तय करना, मेज़र करना, और उन पर नज़र रखना
सबसे पहले, Farफ़ेच को निगरानी करने वाले सही टूल की ज़रूरत थी, ताकि मौजूदा स्थिति और सफ़र के टचपॉइंट और ऐप्लिकेशन में होने वाले उतार-चढ़ाव को समझा जा सके.
उन्होंने वेबसाइट की परफ़ॉर्मेंस की मौजूदा जानकारी और उपयोगकर्ता के हिसाब से बनाई गई परफ़ॉर्मेंस मेट्रिक को ट्रैक करने के लिए, लैब डेटा और रीयल उपयोगकर्ता मॉनिटरिंग (फ़ील्ड डेटा), दोनों का इस्तेमाल किया. इससे, परफ़ॉर्मेंस की मौजूदा स्थिति का विश्लेषण किया गया. उन्होंने डेटा को कैप्चर करने के लिए JavaScript और web-vitals.js लाइब्रेरी का इस्तेमाल किया. इससे प्रॉडक्ट ऐनलिटिक्स टीम को एक ही सेशन में, कारोबार की मेट्रिक के साथ-साथ परफ़ॉर्मेंस मेट्रिक देखने में भी मदद मिली. इससे यह पता लगाया जा सका कि कोई अन्य कैंपेन पर क्या असर डालता है.
अलग-अलग क्षेत्रों के बारे में जानकारी देने वाले ग्रुप को यह समझने के लिए सेट किया गया है कि कारोबार के लिए कौनसी मेट्रिक सबसे अहम हैं. ऐसा करने के लिए, उन्होंने Farfetch उपयोगकर्ताओं के सफ़र के अहम पाथ को देखा और इस सफ़र को परफ़ॉर्मेंस मार्कर से जोड़ने की कोशिश की. Google ने वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली जो मेट्रिक तय की हैं उनके अलावा, उपयोगकर्ता अनुभव की अलग-अलग मेट्रिक दिखाने के साथ-साथ, टाइम टू फ़र्स्ट बाइट (टीटीएफ़बी), फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी), फ़र्स्ट पेंट, और टाइम टू इंटरैक्टिव (टीटीआई) को ट्रैक करने के लिए, कस्टम JavaScript का भी इस्तेमाल किया गया.
ये मेट्रिक, Performance API, Long Tasks API, और Google के पॉलीफ़िल के कई तरीकों का इस्तेमाल करके इकट्ठा की जाती हैं. इस बारे में ज़्यादा जानकारी, वेब के सीनियर प्रिंसिपल इंजीनियर मैनुअल गार्सिया की 2020 के इस मिड-साल फ़ारफ़ेच टेक ब्लॉग पोस्ट में मिल सकती है.
डेटा के आंकड़ों की बात करें, तो Farfetch के पास कई चैनलों को ट्रैक करने की सुविधा है. इसका इस्तेमाल फ़्रंट एंड ऐप्लिकेशन में किया जाता है. इन ऐप्लिकेशन को Omnitracking है. यह पेज व्यू, उपयोगकर्ता की कार्रवाइयों, और सिस्टम की कार्रवाइयों से जनरेट हुए इवेंट को ट्रैक करता है. ऑमनीट्रैकिंग डेटा मॉडल, ऐनलिटिकल, डेटा एक्सप्लोरेशन, और रिपोर्टिंग केस के लिए, Farfetch का समाधान है. यह ट्रैकर, जनरेट किए गए इवेंट के सबसे ऊपर बनाया जाता है. डेटा मॉडल का मकसद ऐसे किसी भी व्यक्ति की मदद करना है जिसे इन चीज़ों को समझने की ज़रूरत हो:
- उपयोगकर्ता का व्यवहार
- Farfetch ऐप्लिकेशन पर उपयोगकर्ता अनुभव देता है
- ऐप्लिकेशन का उपयोग
- मैक्रो और माइक्रो कन्वर्ज़न
- क्रॉस चैनल और फ़नल विश्लेषण
उस समय, JavaScript से कैप्चर किए गए हर पेज व्यू की परफ़ॉर्मेंस का डेटा, इस डेटा लेयर में जोड़ने का आइडिया आया. इस मॉडल से हर सेशन के लिए परफ़ॉर्मेंस डेटा और मुख्य कन्वर्ज़न फ़नल मेट्रिक के मैच होने की गारंटी मिलती है. साथ ही, यह भी पक्का हो जाता है कि विषय पर विश्लेषण करने वाले एक्सप्लोरेशन के आधार पर, डेटा मैच होगा.
आखिर में, Farfetch ने प्रोसेस के मुख्य पेजों पर मौजूद हर मेट्रिक के लिए, समय के हिसाब से परफ़ॉर्मेंस बजट तय किया. साथ ही, बजट के उल्लंघनों को मैनेज करने की प्रोसेस को भी मैनेज किया. उन्होंने सीआई पाइपलाइन पर परफ़ॉर्मेंस मेट्रिक को भी शामिल करना शुरू कर दिया है, ताकि डेवलपमेंट फ़्लो में बजट के अंतर को जल्द से जल्द समझा जा सके.
दूसरा चरण: कारोबार की भाषा का इस्तेमाल करके बातचीत करना
परफ़ॉर्मेंस डेटा, अब Farfetch के इंटरनल बिज़नेस इंटेलिजेंस डेटासेट में उपलब्ध है. आंकड़ों की टीम ने डेटा में मौजूद गणित के मॉडल और पैटर्न को एक्सप्लोर करना शुरू किया. ये मॉडल, परफ़ॉर्मेंस मेट्रिक और कारोबार के केपीआई (उदाहरण के लिए, कन्वर्ज़न रेट और सिंगल-पेज विज़िट का प्रतिशत) के बीच के संबंध को दिखा सकते हैं. इससे, कारोबार के लिए साइट की स्पीड और UX के वित्तीय असर को एक नया व्यू मिल सकता है. इससे कारोबार से जुड़े फ़ैसले लेने वालों के साथ आम भाषा में बातचीत की जा सकती है. इस विश्लेषण में, वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली सभी मेट्रिक और फ़ारफ़ेच की वे अन्य मेट्रिक शामिल हैं जो काम की हैं. इससे दर्शकों को काफ़ी अहम जानकारी मिली.
उपयोगकर्ता को बेहतर अनुभव देने के लिए, Google का सुझाव है कि सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) को 2.5 सेकंड से कम समय तक रखने का सुझाव दिया जाता है. इसलिए, फ़ारच ने इस थ्रेशोल्ड का ध्यान से अध्ययन किया और इसे काम के नतीजे मिले.
फ़ारफ़ैच में आंकड़ों से जुड़े कोरिलेशन से पता चलता है कि उस समय के आगे कन्वर्ज़न रेट में गिरावट आने के साथ-साथ एग्ज़िट रेट में भी बढ़ोतरी होती है. इससे पता चलता है कि उपयोगकर्ताओं को पेज लोड होने में धीरे-धीरे होने वाली परेशानी का सामना करना पड़ रहा है. हर 100 मि॰से॰ ज़्यादा एलसीपी के साथ, कन्वर्ज़न रेट औसतन -1.3% कम हो जाता है.
फ़ारच ने कुल लेआउट शिफ़्ट (सीएलएस) के स्कोर पर, हर एक 0.01 से कम के लिए एग्ज़िट रेट में -3.1% की कमी की पुष्टि भी की है. साथ ही, उपयोगकर्ताओं को वेबसाइट पर बनाए रखने के लिए पेज की स्थिरता के असर की फिर से पुष्टि की है.
पेज इंटरैक्टिविटी और फ़्लूइडिटी के मामले में, हालांकि फ़र्स्ट इनपुट डिले (एफ़आईडी) को लगातार ट्रैक किया जाता है और उसका विश्लेषण किया जाता है, इसलिए, Farfetch
इसके लिए, उन्होंने वेबसाइट में Google का TTI पॉलीफ़िल इंजेक्ट किया, ताकि इस मेट्रिक को सेव किया जा सके. लंबे टास्क की रिपोर्ट करने के लिए, लांग टास्क एपीआई का इस्तेमाल करना (ब्राउज़र के मुख्य थ्रेड पर 50 मिलीसेकंड से ज़्यादा समय लेने वाले टास्क).
इसके बाद, Analytics टीम को पता चला कि TTI पर हर सेकंड कम करने के लिए कन्वर्ज़न दर में 2.8% की बढ़ोतरी हुई है. इससे कोड को बेहतर तरीके से काम करने में मदद मिलती है और ब्राउज़र के मुख्य थ्रेड को अनब्लॉक किया जा सकता है.
आखिर में, इस विश्लेषण से यह भी पता चला कि कुछ मेट्रिक ने कारोबार के केपीआई पर खास असर नहीं डाला है या कुछ मेट्रिक, उपयोगकर्ता के सफ़र के अलग-अलग चरणों में ज़्यादा काम की हैं. इससे कन्वर्ज़न फ़नल के हर पॉइंट पर मौजूद अवसरों को पूरी तरह से समझने में मदद मिलती है.
तीसरा चरण: सांस्कृतिक बदलाव जोड़ना
साइट की स्पीड के बारे में उपयोगकर्ताओं की समझ पर क्वालिटी रिसर्च के साथ-साथ, ऊपर दी गई अहम जानकारी दिखाना बहुत अहम था. इससे कंपनी के लक्ष्यों के हिसाब से अलाइनमेंट, एक्ज़ीक्यूटिव लेवल की जागरूकता, और प्रॉडक्ट के रोडमैप में परफ़ॉर्मेंस के आधार पर लिए जाने वाले फ़ैसले लेने में मदद मिलती थी. अब यह साबित करना मुमकिन था कि Farfetch की परफ़ॉर्मेंस कैसी थी.
प्राथमिकता को व्यवस्थित करने के लिए, Farfetch ने एक सेल्फ़-सर्विस टूल बनाया. इसे साइट स्पीड बिज़नेस केस कैलकुलेटर का नाम दिया गया. इसे Google के स्पीड इंपैक्ट कैलकुलेटर से प्रेरणा मिली है. इसकी मदद से, कोई भी प्रॉडक्ट मैनेजर तुरंत कारोबार पर पड़ने वाले असर का हिसाब लगाकर, परफ़ॉर्मेंस को बेहतर बनाने के लिए बिज़नेस केस बना सकता है. कन्वर्ज़न रेट और उपयोगकर्ता अनुभव वाली मेट्रिक के बीच के संबंध का इस्तेमाल करके बनाए गए डेटा मॉडल की मदद से, प्रॉडक्ट के अलग-अलग दायरों, डिवाइसों, और उपयोगकर्ता की गतिविधियों के टच पॉइंट के हिसाब से बदलाव किए जा सकते हैं.
इस बीच, सेल्फ़-सर्विस विश्लेषण वाले डैशबोर्ड के एक सेट ने रीयल-टाइम परफ़ॉर्मेंस इंडिकेटर दिखाने और कारोबार पर उनके असर को देखने के लिए, कारोबार के हिसाब से विश्लेषण करने वाले डैशबोर्ड तैयार किए हैं. परफ़ॉर्मेंस अब पूरी तरह से प्रॉडक्ट डेवलपमेंट में शामिल हो चुकी है. साथ ही, प्रॉडक्ट टीमों को मेट्रिक, ऑडिटिंग टूल, और परफ़ॉर्मेंस बजट पर निगरानी रखने की सुविधा को आसानी से ऐक्सेस करने की सुविधा मिलती है. इसके अलावा, डेटा लेयर के इंटिग्रेशन की वजह से, परफ़ॉर्मेंस मेट्रिक अब Farfetch A/B टेस्टिंग टूल पर भी उपलब्ध हैं. इससे प्रॉडक्ट मैनेजर को अहम जानकारी पाने का एक और असरदार तरीका मिलता है.
हाल ही के कुछ महीनों में, कोर टीम न सिर्फ़ फ़्रंट-एंड डेवलपमेंट टीमों पर, बल्कि प्लैटफ़ॉर्म डोमेन में भी इस संस्कृति को स्थापित करने के लिए काम कर रही है. इसके लिए, वह मुख्य माइक्रो सेवाओं और लेन-देन के असर को मॉनिटर करने और साबित करने के लिए, मिलते-जुलते तरीकों का इस्तेमाल कर रही है.
इस विषय पर कई Farfetch प्रज़ेंटेशन दिए गए हैं, लेकिन Google किसी दूसरे विषय का ज़िक्र भी किया गया है. उदाहरण के लिए, साल 2021 के Google I/O में साइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक से, कारोबार पर पड़ने वाले असर के बारे में बताया गया हो. इससे थीम से जुड़े विषय को लगातार समझने में मदद मिली और संस्कृति के बारे में टीम की रणनीति भी मज़बूत हुई.
चौथा चरण: मेट्रिक को बेहतर बनाना
कुल मिलाकर, इस सारे काम को करने के लिए हमें Farfetch, वेबसाइट की स्पीड मेट्रिक को बेहतर बनाने में योगदान देना था. साथ ही, यह पक्का करना था कि उनकी टीम क्लास से जुड़े सबसे सही तरीकों का पालन करे और साइट को बेहतर बनाने के अवसर तलाशे.
साल 2021 में, हमें एक मुख्य समस्या के बारे में पता चला. इसकी ज़रूरत दो तरह के मुख्य पेजों पर मौजूद एलसीपी को बेहतर बनाने की थी. ये पेज, मुख्य तरह के दो तरह के होते हैं, यानी कि प्रॉडक्ट पेज और प्रॉडक्ट लिस्टिंग वाले पेज.
टीमों ने पता लगाया कि वे उन पेजों का मुख्य कॉन्टेंट कैसे लोड कर रही थीं. अपने कारोबार से जुड़े मामले में, उन्होंने इस अवसर का पीछा करने के असर को दिखाया, जिसकी मदद से वे:
- JavaScript पर आधारित समाधान से, प्रॉडक्ट इमेज लोड होने वाले कॉम्पोनेंट को नेटिव लागू करने के तरीके के मुताबिक बनाएं.
- इमेज की प्राथमिकता तय करें और उन्हें क्रिटिकल और नॉन-क्रिटिकल ऐसेट में बांट लें.
- ज़रूरी इमेज को जल्दी लोड करें, ताकि एचटीएमएल में सोर्स पहले से ही इनलाइन हो. साथ ही,
<link rel="preload">का इस्तेमाल करें, ताकि वे जल्द से जल्द डाउनलोड हो जाएं. - ऐसी इमेज के लिए
<img loading="lazy">एट्रिब्यूट का इस्तेमाल करें जो गंभीर नहीं हैं. साथ ही, Safari जैसे काम न करने वाले ब्राउज़र पर इंटरसेक्शन ऑब्ज़र्वर का इस्तेमाल करके पॉलीफ़िल के साथ.
इसकी मदद से, उन्होंने बेहद ज़रूरी चीज़ों को एक जगह से दूसरी जगह ले जाया. साथ ही, उन्होंने A/B की मदद से अनुमान और कारोबार पर पड़ने वाले असर को साबित किया. उदाहरण के लिए, प्रॉडक्ट पेजों पर यह कोशिश 600 मि॰से॰ से ज़्यादा हो गई. साथ ही, A/B टेस्ट में कंपनी के तय किए गए कॉन्फ़िडेंस लेवल के हिसाब से कन्वर्ज़न रेट में 1 से 5% की बढ़ोतरी हुई.
हमारी टीम ने पेज व्यू के प्रतिशत के आधार पर, एलसीपी स्कोर के लिए Google की परिभाषा के आधार पर ये सुधार किए हैं. ये सुधार, "अच्छा", "सुधार की ज़रूरत है", और "खराब" माने जाते हैं.
तेज़ी से काम करने वाली साइट और बेहतर तरीके से काम करने के फ़ायदे
परफ़ॉर्मेंस और बिज़नेस केस कैलकुलेटर जैसे टूल को इस्तेमाल करने का माहौल बनाने से, सभी लोग ऐसी भाषा बोल सकते हैं जिसे प्रॉडक्ट मैनेजर, हिस्सेदार, और इंजीनियर समान रूप से समझ सकते हैं. इसकी वजह से, नई पहलों को प्राथमिकता देने और परफ़ॉर्मेंस को बेहतर बनाने के तरीकों पर चर्चा शुरू हो गई है.
फारचैक वेब चैनल्स के सीनियर प्रिंसिपल प्रॉडक्ट मैनेजर, रुई सैंटोस कहते हैं, "हम परफ़ॉर्मेंस के साइकल को सिर्फ़ टेक्नोलॉजी तक सीमित रखना चाहते थे. इस चीज़ का मालिकाना हक सिर्फ़ इंजीनियरिंग टीम के पास होता है." "मैसेज को बहुत और तेज़ी से लोगों तक पहुंचाने में, परफ़ॉर्मेंस मेट्रिक को कारोबार की मेट्रिक के साथ जोड़ना हैरत की बात थी. कारोबार से कंपनी आगे बढ़ती है और इसकी सफलता को स्पीड मेट्रिक के साथ कनेक्ट करने से, कई हिस्सेदारों को ट्रेड-ऑफ़ फ़ैसलों को समझने और नेविगेट करने का बढ़ावा मिला."
लग्ज़री ई-कॉमर्स सेगमेंट में, चाहे आपकी साइट तेज़ हो या धीमी, यह तय कर सकती है कि उपभोक्ताओं को आपके ब्रैंड और आपकी सेवा की क्वालिटी कैसी दिखेगी. उपयोगकर्ताओं के लिए क्वालिटी, लग्ज़री से जुड़ी होती है. यह बात उनके अनुभव के हर पहलू पर लागू होती है. इसमें आपकी वेबसाइट की परफ़ॉर्मेंस भी शामिल है. साइट स्पीड की वजह से कन्वर्ज़न रेट पर सटीक असर पड़ रहा है. इस वजह से, अबफ़ार्फ़ेच की प्लानिंग में परफ़ॉर्मेंस को एक सुरक्षित जगह मिल जाती है.