उपयोगकर्ता को ज़्यादा तेज़ अनुभव देने के लिए eBay की साइटों और ऐप्लिकेशन की परफ़ॉर्मेंस को ऑप्टिमाइज़ करना.
साल 2019 में, eBay के लिए कंपनी के सभी इलाकों में स्पीड की एक पहल थी. कई टीमों ने यह फ़ैसला लिया था कि उपयोगकर्ताओं के लिए साइट और ऐप्लिकेशन को ज़्यादा से ज़्यादा तेज़ी से लोड करना है. असल में, खोज के लिए पेज लोड होने में हर 100 मिलीसेकंड पर सुधार होने के बाद, eBay को "कार्ट में जोड़ें" संख्या में 0.5% की बढ़ोतरी दिखी.
100मि॰से॰
कॉन्टेंट लोड होने में लगने वाले समय में सुधार
0.5%
"कार्ट में जोड़ें" संख्या में बढ़ोतरी
परफ़ॉर्मेंस बजट (Chrome उपयोगकर्ता अनुभव रिपोर्ट की मदद से एक प्रतिस्पर्धी स्टडी करने के बाद) और उपयोगकर्ता को ध्यान में रखकर बनाई गई परफ़ॉर्मेंस मेट्रिक पर फ़ोकस करने के बाद, eBay ने साइट की स्पीड में कई सुधार किए.
...और उनकी Chrome उपयोगकर्ता अनुभव रिपोर्ट का डेटा भी इन सुधारों को हाइलाइट करता है.
eBay ने अभी तक सीखी है, लेकिन अभी आपको काफ़ी काम करना है.
वेब परफ़ॉर्मेंस के "कट"
ईबे ने जो सुधार किए हैं वे उपयोगकर्ता की गतिविधि में शामिल अलग-अलग इकाइयों की संख्या को कम करने या "कट" (साइज़ और समय के हिसाब से) की वजह से मुमकिन हो पाया था. इस पोस्ट में उन विषयों के बारे में बताया गया है जो बड़े पैमाने पर वेब डेवलपर समुदाय के लिए काम के हैं, न कि ईबे से जुड़े विषयों पर.
सभी टेक्स्ट संसाधनों पर पेलोड कम करें
साइटों को तेज़ी से लोड करने का एक तरीका है कि आप कम कोड लोड करें. eBay ने उपयोगकर्ताओं को दिखाए गए JavaScript, CSS, एचटीएमएल, और JSON के सभी इस्तेमाल न किए गए और ग़ैर-ज़रूरी बाइट की काट-छांट करके, अपने टेक्स्ट पेलोड कम किए. पहले, हर नई सुविधा के साथ, eBay इस्तेमाल नहीं की गई चीज़ों को हटाए बिना, अपने जवाबों का पेलोड बढ़ाता रहा. समय के साथ, यह सिलसिला आगे बढ़ता गया और यह परफ़ॉर्मेंस में रुकावट बन गई. आम तौर पर, टीम के पास क्लीनअप के इस काम में देरी होती है, लेकिन eBay ने इतनी बचत की है, यह जानकर आपको हैरानी होगी.
यहां "कट", रिस्पॉन्स पेलोड में बर्बाद हुए बाइट है.
पेज के ऊपरी हिस्से पर मौजूद कॉन्टेंट के लिए ज़रूरी पाथ ऑप्टिमाइज़ेशन
स्क्रीन पर मौजूद हर पिक्सल की अहमियत एक जैसी नहीं होती. पेज के ऊपरी हिस्से में मौजूद कॉन्टेंट की तुलना में, पेज के ऊपरी हिस्से का कॉन्टेंट ज़्यादा ज़रूरी है. iOS/Android/डेस्कटॉप और वेब ऐप्लिकेशन को इसके बारे में जानकारी है, लेकिन सेवाओं का क्या है? eBay के सर्विस आर्किटेक्चर में एक्सपीरियंस सर्विसेज़ नाम की एक लेयर है, जिससे फ़्रंटएंड (प्लैटफ़ॉर्म के खास ऐप्लिकेशन और वेब सर्वर) काम करते हैं. इस लेयर को खास तौर पर, व्यू या डिवाइस पर आधारित होने के लिए डिज़ाइन किया गया है, न कि आइटम, उपयोगकर्ता या ऑर्डर जैसी इकाइयों के आधार पर. इसके बाद, eBay ने एक्सपीरियंस सेवाओं के लिए अहम पाथ का कॉन्सेप्ट पेश किया. जब इन सेवाओं के लिए कोई अनुरोध किया जाता है, तो वे पेज के ऊपरी हिस्से पर मौजूद कॉन्टेंट का डेटा तुरंत पाने के लिए काम करती हैं. इसके लिए, ये सेवाएं साथ-साथ अन्य अपस्ट्रीम सेवाओं को भी कॉल करती हैं. डेटा तैयार होने के बाद, इसे तुरंत मिटा दिया जाता है. वेबसाइट में फ़ोल्ड के नीचे का डेटा, बाद के हिस्सों में या लेज़ी लोडिंग के तौर पर भेजा जाता है. नतीजा: उपयोगकर्ताओं को पेज के ऊपरी हिस्से पर मौजूद कॉन्टेंट को जल्दी देखने को मिलता है.
यहां "कट" का मतलब है कि सेवाओं को काम का कॉन्टेंट दिखाने में लगने वाला समय.
इमेज ऑप्टिमाइज़ेशन
इमेज पेज के ब्लोट में सबसे ज़्यादा योगदान देने वालों में से एक हैं. छोटे-छोटे ऑप्टिमाइज़ेशन भी काफ़ी कारगर होते हैं. eBay ने इमेज के लिए दो ऑप्टिमाइज़ेशन किए थे.
पहला, eBay को iOS, Android, और काम करने वाले ब्राउज़र के साथ-साथ सभी प्लैटफ़ॉर्म पर खोज के नतीजों के लिए, WebP इमेज फ़ॉर्मैट पर स्टैंडर्ड किया गया. eBay का सबसे ज़्यादा इमेज वाला पेज, खोज नतीजों का पेज है और वे पहले से ही WebP का इस्तेमाल कर रहे थे. हालांकि, दोनों का पैटर्न एक जैसा नहीं है.
दूसरी वजह, eBay की लिस्टिंग इमेज को बहुत ज़्यादा (साइज़ और फ़ॉर्मैट में) ऑप्टिमाइज़ किया गया है, लेकिन क्यूरेट की गई इमेज (उदाहरण के लिए, होम पेज पर मौजूद टॉप मॉड्यूल) के लिए भी वही नियम लागू नहीं हुआ. eBay में हाथ से बनाई गई कई इमेज हैं, जिन्हें अलग-अलग टूल से अपलोड किया गया है. पहले ऑप्टिमाइज़ेशन, वीडियो अपलोड करने वाला व्यक्ति करता था. हालांकि, अब eBay टूल में नियमों को लागू करता है, इसलिए अपलोड की गई सभी इमेज को सही तरीके से ऑप्टिमाइज़ किया जाएगा.
यहां दिया गया "कट", उपयोगकर्ताओं को भेजी गई वे इमेज बाइट है जो बेकार में हैं.
स्टैटिक ऐसेट का अनुमानित प्रीफ़ेच
eBay पर उपयोगकर्ता सेशन सिर्फ़ एक पेज का नहीं होता है. यह एक फ़्लो है. उदाहरण के लिए, फ़्लो होम पेज से खोज वाले पेज और आइटम पेज पर जाने का एक नेविगेशन हो सकता है. तो, फ़्लो में मौजूद पेज एक-दूसरे की मदद क्यों नहीं करते? यह अनुमानित प्रीफ़ेच का आइडिया है, जिसमें एक पेज संभावित अगले पेज के लिए ज़रूरी स्टैटिक एसेट को प्रीफ़ेच करता है.
अनुमानित प्रीफ़ेच की मदद से, जब कोई उपयोगकर्ता अनुमानित पेज पर जाता है, तो एसेट पहले से ही ब्राउज़र की कैश मेमोरी में मौजूद होती है. ऐसा सीएसएस और JavaScript ऐसेट के लिए किया जाता है, जहां यूआरएल को समय से पहले हासिल किया जा सकता है. ध्यान दें कि यह सिर्फ़ पहली बार नेविगेट करने में मदद करता है. बाद के नेविगेशन में, स्टैटिक ऐसेट पहले से ही कैश मेमोरी में मौजूद रहेंगी.
यहां दिया गया "कट", पहले नेविगेशन पर सीएसएस और JavaScript की स्टैटिक ऐसेट के लिए नेटवर्क टाइम दिखाता है.
मुख्य खोज नतीजों को प्रीफ़ेच करना
जब कोई उपयोगकर्ता eBay में खोज करता है, तो eBay के आंकड़ों से पता चलता है कि इस बात की काफ़ी संभावना है कि उपयोगकर्ता खोज नतीजों के टॉप 10 में मौजूद किसी आइटम पर जाएगा. इसलिए eBay अब खोज से आइटम को प्रीफ़ेच कर देता है और उन्हें उपयोगकर्ता के नेविगेट करने के लिए तैयार रखता है. प्रीफ़ेच करने की प्रोसेस दो लेवल पर होती है.
पहला लेवल सर्वर-साइड होता है, जहां आइटम सेवा, खोज के नतीजों में टॉप 10 आइटम को कैश मेमोरी में सेव करती है. जब उपयोगकर्ता इनमें से किसी भी आइटम पर जाता है, तो eBay अब सर्वर की प्रोसेसिंग में लगने वाला समय बचा लेता है. सर्वर-साइड कैश मेमोरी का इस्तेमाल, प्लैटफ़ॉर्म के हिसाब से बने ऐप्लिकेशन की मदद से किया जाता है. इसे दुनिया भर में लॉन्च किया गया है.
दूसरा लेवल, ऑस्ट्रेलिया में उपलब्ध ब्राउज़र की कैश मेमोरी में दिखता है. आइटम के डाइनैमिक होने की वजह से, आइटम प्रीफ़ेच करने की सुविधा बेहतर तरीके से ऑप्टिमाइज़ की गई थी. इसकी कई बारीकियां भी हैं: पेज इंप्रेशन, क्षमता, नीलामी वाले आइटम वगैरह. इस बारे में ज़्यादा जानने के लिए, LinkedIn की Performance Engineering Meetup प्रज़ेंटेशन में जानकारी पाएं. इसके अलावा, eBay के इंजीनियरों की ओर से, इस विषय पर ब्लॉग पोस्ट देखने के लिए हमारे साथ बने रहें.
आइटम को कैश मेमोरी में सेव किए जाने की जगह के आधार पर, यहां दिया गया "कट", सर्वर की प्रोसेसिंग में लगने वाला समय या नेटवर्क का समय हो सकता है.
खोज इमेज को तेज़ी से डाउनलोड करें
खोज नतीजों के पेज में, जब कोई क्वेरी किसी बड़े लेवल पर जारी की जाती है, तो दो चीज़ें होती हैं. एक, रीकॉल/रैंकिंग चरण है, जहां क्वेरी से मेल खाने वाले सबसे काम के आइटम दिखाए जाते हैं. दूसरा चरण, खरीदारों के लिए ज़रूरी जानकारी, जैसे कि शिपिंग के लिए खरीदार से लिए जाने वाले शुल्क जैसी अन्य जानकारी देकर, बाज़ार से हटाए गए आइटम की क्वालिटी को बेहतर बनाना है. eBay अब ब्राउज़र को हेडर के साथ एक हिस्से में आइटम की पहली 10 इमेज तुरंत भेजता है, ताकि बाकी मार्कअप के आने से पहले डाउनलोड शुरू हो सके. इस वजह से, इमेज अब और जल्दी दिखेंगी. इस बदलाव को वेब प्लैटफ़ॉर्म के लिए दुनिया भर में लॉन्च किया गया.
"कट" यहां बताया गया है कि खोज नतीजों की इमेज डाउनलोड होने का समय कौनसा है.
अपने-आप मिलने वाले सुझाव के डेटा के लिए एज कैशिंग
जब उपयोगकर्ता खोज बॉक्स में अक्षर टाइप करते हैं, तो सुझाव पॉप-अप होते हैं. अक्षरों के कॉम्बिनेशन के लिए, ये सुझाव कम से कम एक दिन तक नहीं बदलते. डेटा सेंटर में भेजे जाने वाले अनुरोधों के बजाय, ये सीडीएन (ज़्यादा से ज़्यादा 24 घंटे) से कैश मेमोरी में सेव किए जाने और उपलब्ध कराए जाने वाले बेहतर कैंडिडेट होते हैं. अंतरराष्ट्रीय बाज़ारों को खास तौर पर, सीडीएन कैश मेमोरी से फ़ायदा मिलता है.
हालांकि, हमें एक गड़बड़ी मिली. eBay के सुझावों के पॉप-अप में मनमुताबिक बनाने की कुछ चीज़ें थीं, जिन्हें ठीक से कैश मेमोरी में सेव नहीं किया जा सकता. अच्छी बात यह है कि प्लैटफ़ॉर्म को ध्यान में रखकर बनाए गए ऐप्लिकेशन में यह समस्या नहीं थी. इसकी वजह से, ऐप्लिकेशन को उपयोगकर्ता के मनमुताबिक बनाने की प्रोसेस और सुझावों को अलग-अलग किया जा सकता था. वेब के लिए, अंतरराष्ट्रीय बाज़ारों में इंतज़ार का समय ज़्यादा ज़रूरी था, क्योंकि ऐप्लिकेशन को उपयोगकर्ता के मनमुताबिक बनाने की प्रोसेस का एक छोटा सा फ़ायदा था. इसके अलावा, अब eBay में प्लैटफ़ॉर्म के हिसाब से ऐप्लिकेशन के लिए, दुनिया भर में सीडीएन कैश से अपने-आप सुझाव मिलने की सुविधा उपलब्ध है. वहीं, eBay.com के लिए अमेरिका से बाहर के बाज़ारों के लिए.
यहां "कट" में अपने-आप मिलने वाले सुझावों के लिए, नेटवर्क के इंतज़ार का समय और सर्वर की प्रोसेसिंग में लगने वाला समय बताया गया है.
होम पेज के अनजान उपयोगकर्ताओं के लिए एज कैशिंग
वेब प्लैटफ़ॉर्म पर, किसी खास इलाके के लिए अनजान उपयोगकर्ताओं के लिए होम पेज का कॉन्टेंट एक जैसा होता है. ये ऐसे उपयोगकर्ता हैं जो या तो पहली बार eBay का इस्तेमाल कर रहे हैं या एक नया सेशन शुरू कर रहे हैं, इसलिए इन्हें मनमुताबिक नहीं बनाया जा सकता. हालांकि, होम पेज के क्रिएटिव अक्सर बदलते रहते हैं. हालांकि, कैश मेमोरी में सेव करने की जगह अब भी मौजूद है.
eBay ने कुछ समय के लिए अपने एज नेटवर्क (PoPs) पर अनजान उपयोगकर्ता कॉन्टेंट (एचटीएमएल) को कैश मेमोरी में सेव करने का फ़ैसला किया. पहली बार खरीदारी करने वाले उपयोगकर्ताओं को अब होम पेज का कॉन्टेंट कहीं और मौजूद डेटा सेंटर के बजाय, उनके आस-पास मौजूद सर्वर से मिल सकता है. ईबे, अब भी अंतरराष्ट्रीय मार्केट में इस सुविधा को आज़मा रहा है, जहां इसका बड़ा असर होगा.
यहां "कट" करते समय, अनजान उपयोगकर्ताओं के लिए नेटवर्क के इंतज़ार का समय और सर्वर की प्रोसेस होने में लगने वाला समय, दोनों को फिर से दिखाया गया है.
दूसरे प्लैटफ़ॉर्म के लिए ऑप्टिमाइज़ेशन
iOS/Android ऐप्लिकेशन पार्स करने में सुधार
iOS/Android ऐप्लिकेशन उन बैकएंड सेवाओं से बात करते हैं जिनका रिस्पॉन्स फ़ॉर्मैट आम तौर पर JSON होता है. ये JSON पेलोड बड़े हो सकते हैं. स्क्रीन पर कुछ रेंडर करने के लिए, पूरे JSON को पार्स करने के बजाय eBay ने एक कुशल पार्सिंग एल्गोरिदम पेश किया. यह ऐसे कॉन्टेंट को ऑप्टिमाइज़ करता है जिसे तुरंत दिखाने की ज़रूरत होती है.
उपयोगकर्ता अब कॉन्टेंट को ज़्यादा तेज़ी से देख सकते हैं. इसके अलावा, Android ऐप्लिकेशन के लिए, जैसे ही उपयोगकर्ता खोज बॉक्स में टाइप करना शुरू करता है, eBay सर्च व्यू कंट्रोलर शुरू करना शुरू कर देता है (iOS में पहले से ही यह ऑप्टिमाइज़ेशन हो चुका है). पहले ऐसा सिर्फ़ तब होता था, जब उपयोगकर्ताओं ने 'खोजें' बटन दबाया हो. अब उपयोगकर्ता अपने खोज नतीजों पर ज़्यादा तेज़ी से पहुंच सकते हैं. "कट" यहां बताया गया है कि डिवाइस को काम का कॉन्टेंट दिखाने में कितना समय लगा.
Android ऐप्लिकेशन के चालू होने में लगने वाले समय में सुधार
यह नीति, Android ऐप्लिकेशन के लिए कोल्ड स्टार्ट टाइम ऑप्टिमाइज़ेशन पर लागू होती है. जब कोई ऐप्लिकेशन कोल्ड स्टार्ट होता है, तो ओएस लेवल और ऐप्लिकेशन, दोनों लेवल पर कई बार शुरू हो जाता है. ऐप्लिकेशन लेवल पर, शुरू करने में लगने वाला समय कम करने से उपयोगकर्ताओं को होम स्क्रीन तुरंत देखने में मदद मिलती है. eBay ने कुछ प्रोफ़ाइलिंग की और पाया कि कॉन्टेंट दिखाने के लिए, सभी प्रोसेस शुरू करने की ज़रूरत नहीं होती. साथ ही, कुछ को धीरे-धीरे भी पूरा किया जा सकता है.
इससे भी अहम बात यह है कि eBay ने पाया कि तीसरे पक्ष के ऐनलिटिक्स कॉल को ब्लॉक करने की वजह से स्क्रीन पर रेंडर होने में देरी हुई. ब्लॉक करने वाले कॉल को हटाकर और उसे एक साथ सिंक करने से, कोल्ड स्टार्ट समय को बेहतर बनाने में मदद मिली. यहां "कट" Android ऐप्लिकेशन के लिए शुरू होने में लगने वाला बेवजह समय है.
मीटिंग में सामने आए नतीजे
ईबे ने जो परफ़ॉर्मेंस "कट" किए, उन्होंने सामूहिक तौर पर सुई को आगे बढ़ाने में योगदान दिया. ऐसा समय के साथ हुआ. रिलीज़ को पूरे साल फ़ेज़ किया गया. हर रिलीज़ के बाद, दस मिलीसेकंड हुए. इसके बाद, ईबे अब उस मकाम तक पहुंच गया जहां अब eBay पहुंच गया है:
परफ़ॉर्मेंस, एक सुविधा और प्रतिस्पर्धी फ़ायदा है. ऑप्टिमाइज़ किए गए अनुभवों से ज़्यादा उपयोगकर्ता जुड़ाव, कन्वर्ज़न, और लागत पर मुनाफ़ा (आरओआई) मिलता है. eBay के मामले में, ये ऑप्टिमाइज़ेशन कम कोशिश से लेकर कुछ बेहतर चीज़ों तक अलग-अलग थे.
इस बारे में ज़्यादा जानने के लिए, स्पीड को एक हज़ार बार तक कम करें पर जाएं. साथ ही, आने वाले समय में eBay के इंजीनियर, अपनी परफ़ॉर्मेंस के बारे में ज़्यादा जानकारी वाले लेख पढ़ें.