eBay.com पर तेज़ी से खरीदारी करें

उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, eBay की साइटों और ऐप्लिकेशन की परफ़ॉर्मेंस को ऑप्टिमाइज़ करना.

Addy Osmani

साल 2019 में, eBay के लिए स्पीड कंपनी-वाइड इनिशिएटिव था. इस दौरान, कई टीमों ने साइट और ऐप्लिकेशन को उपयोगकर्ताओं के लिए ज़्यादा से ज़्यादा तेज़ बनाने का फ़ैसला लिया था. असल में, खोज पेज लोड होने में लगने वाले समय में हर 100 मिलीसेकंड की बढ़ोतरी पर, eBay पर "कार्ट में जोड़ें" की संख्या में 0.5% की बढ़ोतरी हुई.

परफ़ॉर्मेंस बजट (Chrome उपयोगकर्ता अनुभव रिपोर्ट के साथ प्रतिस्पर्धी अध्ययन करने के बाद हासिल किया गया) को अपनाने और उपयोगकर्ता के हिसाब से परफ़ॉर्मेंस मेट्रिक पर फ़ोकस करने की मदद से, eBay ने साइट की स्पीड में काफ़ी सुधार किया.

…और 'Chrome उपयोगकर्ता अनुभव रिपोर्ट' का डेटा भी इन सुधारों को हाइलाइट करता है.

अभी बहुत काम करना बाकी है, लेकिन अब तक eBay को जो सीख मिली है उसके बारे में यहां बताया गया है.

वेब पर परफ़ॉर्मेंस में "कमी"

eBay ने जो सुधार किए हैं वे उपयोगकर्ता के सफ़र में हिस्सा लेने वाली अलग-अलग इकाइयों के साइज़ और समय में कमी या "कट" की वजह से संभव हुए. इस पोस्ट में, eBay से जुड़े विषयों के बजाय, वेब डेवलपर कम्यूनिटी के लिए काम के विषयों के बारे में बताया गया है.

सभी टेक्स्ट संसाधनों में पेलोड कम करना

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

यहां "कट" का मतलब, रिस्पॉन्स पेलोड में बर्बाद हुए बाइट से है.

फ़ोल्ड के ऊपर मौजूद कॉन्टेंट के लिए क्रिटिकल पाथ ऑप्टिमाइज़ेशन

स्क्रीन पर मौजूद हर पिक्सल की अहमियत एक जैसी नहीं होती. फ़ोल्ड के ऊपर मौजूद कॉन्टेंट, फ़ोल्ड के नीचे मौजूद कॉन्टेंट से ज़्यादा अहम होता है. iOS/Android/डेस्कटॉप और वेब ऐप्लिकेशन को इस बात की जानकारी होती है, लेकिन सेवाओं के बारे में क्या? eBay की सेवा के आर्किटेक्चर में एक लेयर होती है, जिसे Experience Services कहा जाता है. इससे फ़्रंटएंड (प्लैटफ़ॉर्म के हिसाब से ऐप्लिकेशन और वेब सर्वर) बात करते हैं. इस लेयर को खास तौर पर आइटम, उपयोगकर्ता या ऑर्डर जैसी इकाई के बजाय, व्यू या डिवाइस के हिसाब से डिज़ाइन किया गया है. इसके बाद, eBay ने एक्सपीरियंस सर्विसेज़ के लिए क्रिटिकल पाथ का कॉन्सेप्ट पेश किया. जब इन सेवाओं को कोई अनुरोध मिलता है, तो वे ऊपर दिए गए कॉन्टेंट का डेटा तुरंत पाने के लिए काम करती हैं. इसके लिए, वे अपस्ट्रीम की अन्य सेवाओं को एक साथ कॉल करती हैं. डेटा तैयार होने के बाद, उसे तुरंत फ़्लश कर दिया जाता है. फ़ोल्ड के नीचे मौजूद डेटा को बाद में भेजा जाता है या लेज़ी लोड किया जाता है. नतीजा: उपयोगकर्ताओं को ऊपर दिखने वाला कॉन्टेंट तेज़ी से दिखता है.

यहां "कट" का मतलब है कि सेवाओं को काम का कॉन्टेंट दिखाने में कितना समय लगा.

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

पेज का साइज़ बढ़ाने में इमेज का सबसे ज़्यादा योगदान होता है. छोटे-मोटे ऑप्टिमाइज़ेशन भी काफ़ी फ़ायदेमंद होते हैं. eBay ने इमेज के लिए दो ऑप्टिमाइज़ेशन किए.

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

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

यहां "कट" का मतलब, उपयोगकर्ताओं को भेजी गई इमेज के बाइट है.

स्टैटिक ऐसेट को अनुमान के आधार पर पहले से लोड करना

eBay पर उपयोगकर्ता का सेशन सिर्फ़ एक पेज नहीं होता. यह एक फ़्लो है. उदाहरण के लिए, होम पेज से खोज पेज पर जाकर, आइटम पेज पर नेविगेट करने का तरीका. तो फ़्लो में मौजूद पेज, एक-दूसरे की मदद क्यों नहीं करते? अनुमानित प्रीफ़ेच का यही मकसद है. इसमें एक पेज, अगले पेज के लिए ज़रूरी स्टैटिक एसेट को प्रीफ़ेच करता है.

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

यहां "कट", पहले नेविगेशन पर सीएसएस और JavaScript स्टैटिक एसेट के लिए नेटवर्क का समय है.

खोज के सबसे काम के नतीजों को पहले से लोड करना

जब कोई उपयोगकर्ता eBay पर कुछ खोजता है, तो eBay के आंकड़ों के डेटा से पता चलता है कि उपयोगकर्ता, खोज के नतीजों में सबसे ऊपर दिखने वाले 10 आइटम में से किसी एक पर जाने की संभावना ज़्यादा होती है. इसलिए, eBay अब खोज के नतीजों में दिखने वाले आइटम को पहले से लोड कर लेता है. इससे, जब भी कोई उपयोगकर्ता उन आइटम पर जाता है, तो वे तुरंत दिखने लगते हैं. कॉन्टेंट को पहले से लोड करने की प्रोसेस दो लेवल पर होती है.

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

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

यहां "कट", सर्वर प्रोसेसिंग का समय या नेटवर्क का समय हो सकता है. यह इस बात पर निर्भर करता है कि आइटम को कहां कैश मेमोरी में सेव किया गया है.

खोज के नतीजों में दिखने वाली इमेज को तुरंत डाउनलोड करना

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

यहां "कट", खोज के नतीजों में दिखने वाली इमेज को डाउनलोड करने का शुरू होने का समय है.

अपने-आप सुझाव देने की सुविधा के डेटा के लिए, एज कैश मेमोरी का इस्तेमाल करना

जब उपयोगकर्ता खोज बॉक्स में अक्षर टाइप करते हैं, तो उन्हें सुझाव पॉप-अप के तौर पर दिखते हैं. अक्षरों के कॉम्बिनेशन के लिए, ये सुझाव कम से कम एक दिन तक नहीं बदलते. ये ऐसे आइटम होते हैं जिन्हें कैश मेमोरी में सेव करके, CDN से दिखाया जा सकता है. हालांकि, ऐसा ज़्यादा से ज़्यादा 24 घंटे के लिए किया जा सकता है. ऐसा करने से, डेटा सेंटर पर अनुरोध भेजने की ज़रूरत नहीं पड़ती. अंतरराष्ट्रीय बाज़ारों को खास तौर पर सीडीएन कैश मेमोरी से फ़ायदा मिलता है.

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

यहां "कट" का मतलब, अपने-आप सुझाव मिलने की सुविधा के लिए, नेटवर्क के इंतज़ार का समय और सर्वर को प्रोसेस करने में लगने वाला समय है.

होम पेज पर आने वाले ऐसे उपयोगकर्ताओं के लिए एज कैश मेमोरी का इस्तेमाल करना जिन्हें पहचाना नहीं जा सका

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

eBay ने अपने एज नेटवर्क (PoPs) पर, कुछ समय के लिए ऐसे उपयोगकर्ता के कॉन्टेंट (एचटीएमएल) को कैश मेमोरी में सेव करने का फ़ैसला लिया है जिसकी पहचान नहीं की जा सकी. पहली बार आने वाले उपयोगकर्ताओं को अब होम पेज का कॉन्टेंट, किसी दूर के डेटा सेंटर के बजाय उनके आस-पास मौजूद सर्वर से दिखाया जा सकता है. eBay अभी भी अंतरराष्ट्रीय बाज़ारों में इस सुविधा को आज़मा रहा है. यहां इसका ज़्यादा असर पड़ेगा.

यहां "कट", नेटवर्क के इंतज़ार का समय और सर्वर को प्रोसेस करने में लगने वाला समय, दोनों है. यह समय, ऐसे उपयोगकर्ताओं के लिए है जिनकी पहचान नहीं की जा सकी है.

अन्य प्लैटफ़ॉर्म के लिए ऑप्टिमाइज़ेशन

iOS/Android ऐप्लिकेशन को पार्स करने से जुड़े सुधार

iOS/Android ऐप्लिकेशन, बैकएंड सेवाओं से बात करते हैं. आम तौर पर, इन सेवाओं का रिस्पॉन्स फ़ॉर्मैट JSON होता है. ये JSON पेलोड बड़े हो सकते हैं. स्क्रीन पर कुछ रेंडर करने के लिए, पूरे JSON को पार्स करने के बजाय, eBay ने पार्स करने का एक बेहतर एल्गोरिदम पेश किया है. यह एल्गोरिदम, तुरंत दिखाए जाने वाले कॉन्टेंट को ऑप्टिमाइज़ करता है.

अब उपयोगकर्ताओं को कॉन्टेंट तेज़ी से दिखेगा. इसके अलावा, Android ऐप्लिकेशन के लिए, eBay खोज बॉक्स में टाइप करने के साथ ही, खोज व्यू कंट्रोलर को शुरू कर देता है. iOS में यह ऑप्टिमाइज़ेशन पहले से ही मौजूद था. पहले ऐसा सिर्फ़ तब होता था, जब उपयोगकर्ता खोज बटन दबाते थे. अब उपयोगकर्ता, खोज के नतीजे तेज़ी से पा सकते हैं. यहां "कट" का मतलब है, काम का कॉन्टेंट दिखाने में डिवाइसों का लगा समय.

Android ऐप्लिकेशन के स्टार्टअप समय में हुए सुधार

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

सबसे अहम बात यह है कि eBay को पता चला कि तीसरे पक्ष का एक आंकड़ों से जुड़ा कॉल ब्लॉक हो गया था. इसकी वजह से, स्क्रीन पर रेंडरिंग में देरी हो रही थी. ब्लॉकिंग कॉल को हटाने और इसे असाइन्क्रोनस बनाने से, कोल्ड स्टार्ट के समय में और भी कमी आई. यहां "कट" का मतलब, Android ऐप्लिकेशन के लिए स्टार्टअप में लगने वाला समय है.

मीटिंग में सामने आए नतीजे

eBay ने परफ़ॉर्मेंस में जो "कट" किए हैं उनसे, समय के साथ परफ़ॉर्मेंस में सुधार हुआ है. इन रिलीज़ को पूरे साल में अलग-अलग चरणों में लॉन्च किया गया. हर रिलीज़ में, 10 सेकंड के कुछ हिस्से की बचत हुई. आखिर में, eBay इस मुकाम पर पहुंच गया:

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

ज़्यादा जानने के लिए, एक साथ कई बदलाव करके परफ़ॉर्मेंस को बेहतर बनाना लेख पढ़ें. साथ ही, आने वाले समय में eBay के इंजीनियर की ओर से, परफ़ॉर्मेंस को बेहतर बनाने के बारे में ज़्यादा जानकारी देने वाले लेखों को भी पढ़ें.