इस केस स्टडी में, डीबग करने और React में आईएनपी को बेहतर बनाने के सिलसिलेवार तरीके के बारे में बताया गया है. इस टूल का इस्तेमाल Trendyol करता है. इसके लिए, वह PageSpeed
Insights (PSI), Chrome DevTools, और scheduler.yield API जैसे Google टूल का इस्तेमाल करता है.
किसी भी ई-कॉमर्स वेबसाइट के लिए, प्रॉडक्ट लिस्टिंग पेज (पीएलपी) और प्रॉडक्ट की जानकारी वाला पेज (पीडीपी) दो अहम कॉम्पोनेंट होते हैं. ई-कॉमर्स ट्रैफ़िक अक्सर प्रॉडक्ट लिस्टिंग पेजों से आता है. भले ही, वह ईमेल कैंपेन, सोशल मीडिया या विज्ञापनों के ज़रिए आता हो. इसलिए, यह पक्का करना ज़रूरी है कि पीएलपी को ध्यान से इस तरह डिज़ाइन किया गया हो कि खरीदारी में लगने वाला समय कम हो. सफलता पाने के लिए, उपयोगकर्ता अनुभव की क्वालिटी को प्राथमिकता देना ज़रूरी है. Milliseconds Make Millions जैसे रिसर्च पब्लिकेशन में पहले ही बताया जा चुका है कि वेब की परफ़ॉर्मेंस का उपभोक्ताओं के पैसे खर्च करने और ऑनलाइन ब्रैंड से जुड़ने की इच्छा पर काफ़ी असर पड़ता है.
Trendyol एक ई-कॉमर्स प्लैटफ़ॉर्म है. इस पर करीब 3 करोड़ ग्राहक और 2,40,000 सेलर हैं. इसकी वजह से, हम तुर्किये में 10 अरब डॉलर से ज़्यादा की वैल्यू वाला पहला कारोबार बन गए हैं. साथ ही, दुनिया के सबसे लोकप्रिय ई-कॉमर्स प्लैटफ़ॉर्म में से एक बन गए हैं.
हमारा मकसद, कॉन्टेंट में बदलाव करने के साथ-साथ, उपयोगकर्ताओं को बड़े पैमाने पर बेहतरीन अनुभव देना है. इसके लिए, React के पुराने वर्शन के साथ काम किया जा रहा है. इसमें सुधार करने के लिए, इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) को अहम मेट्रिक के तौर पर इस्तेमाल किया गया है. इस केस स्टडी में, Trendyol के प्लेसमेंट लिस्टिंग पेज (पीएलपी) पर आईएनपी को बेहतर बनाने की प्रोसेस के बारे में बताया गया है. इसकी वजह से, आईएनपी में 50% की कमी आई और खोज के नतीजे में दिखने वाले कारोबार की मेट्रिक में 1% की बढ़ोतरी हुई.
ट्रेंडिंगॉल की आईएनपी जांच प्रक्रिया
आईएनपी, किसी वेबसाइट के लिए उपयोगकर्ता से मिले इनपुट के जवाब में होने वाले रिस्पॉन्स का आकलन करता है. अच्छे आईएनपी से पता चलता है कि ब्राउज़र, उपयोगकर्ता के सभी इनपुट का तुरंत और भरोसेमंद तरीके से जवाब दे सकता है और पेज को फिर से पेंट कर सकता है. यह अच्छा उपयोगकर्ता अनुभव देने के लिए अहम है.
Trendyol ने अपने PLP पर आईएनपी को बेहतर बनाने के लिए, उपयोगकर्ता अनुभव का बारीकी से विश्लेषण किया. इसके बाद ही, उसने सुधार किए. पीएसआई रिपोर्ट के मुताबिक, पीएलपी का असल उपयोगकर्ता अनुभव मोबाइल पर 963 मिलीसेकंड था, जैसा कि अगली इमेज में दिखाया गया है.
अच्छी रिस्पॉन्स पाने के लिए, साइट के मालिकों को आईएनपी से कम या 200 मिलीसेकंड पर आईएनपी को टारगेट करने का लक्ष्य रखना चाहिए. इसका मतलब है कि उस समय, स्मार्टवॉच का आईएनपी "खराब" रेंज में था.
अच्छी बात यह है कि पीएसआई, Chrome उपयोगकर्ता अनुभव रिपोर्ट (CrUX) में शामिल पेजों के लिए फ़ील्ड डेटा और लैब की परफ़ॉर्मेंस के बारे में ज़्यादा जानकारी देने वाला डेटा उपलब्ध कराता है. लैब के डेटा को देखते हुए, Lighthouse के JavaScript को लागू करने में लगने वाले समय के ऑडिट से पता चला कि search-result-v2 स्क्रिप्ट, पेज पर मौजूद अन्य स्क्रिप्ट के मुकाबले मुख्य थ्रेड पर ज़्यादा समय तक काम कर रही थी.
असल समस्याओं की पहचान करने के लिए, हमने Chrome DevTools में परफ़ॉर्मेंस पैनल का इस्तेमाल किया. इससे, PLP के अनुभव से जुड़ी समस्या हल करने और समस्या के सोर्स की पहचान करने में मदद मिली. Chrome DevTools में सीपीयू की स्पीड को चार गुना कम करके, मोबाइल पर परफ़ॉर्मेंस की जांच करने पर, मुख्य थ्रेड पर 700 से 900 मिलीसेकंड का टास्क मिला. अगर मुख्य थ्रेड 50 मिलीसेकंड से ज़्यादा समय तक दूसरे टास्क में व्यस्त है, तो हो सकता है कि वह उपयोगकर्ता के इनपुट का समय पर जवाब न दे पाए. इससे उपयोगकर्ता अनुभव खराब हो सकता है.
सबसे लंबा टास्क, React कॉम्पोनेंट में खोज के नतीजों की स्क्रिप्ट पर इंटरसेक्शन ऑब्ज़र्वर एपीआई कॉलबैक की वजह से हुआ. इस दौरान, हमने उस लंबे टास्क को छोटे-छोटे हिस्सों में बांटने की कोशिश की, ताकि ब्राउज़र को ज़्यादा प्राथमिकता वाले कामों को पूरा करने के ज़्यादा अवसर मिल सकें. इनमें उपयोगकर्ता इंटरैक्शन भी शामिल हैं.
ऐसा हो सकता है कि इंटरसेक्शन ऑब्ज़र्वर कॉलबैक में, 'रिऐक्ट रीरेंडरिंग' को ट्रिगर करने वाली setState कार्रवाई का इस्तेमाल करने पर ज़्यादा शुल्क देना पड़ता है. यह मुख्य थ्रेड के ज़्यादा लंबे समय तक इस्तेमाल करने से, कम कीमत वाले डिवाइसों को समस्या हो सकती है.
डेवलपर ने टास्क को छोटे-छोटे हिस्सों में बांटने के लिए, setTimeout का इस्तेमाल किया है. हमने इस तकनीक का इस्तेमाल, setState कॉल की प्रोसेस को आगे बढ़ाने के लिए, दूसरे टास्क के लिए किया. setTimeout, JavaScript के इस्तेमाल को टालने की अनुमति देता है, लेकिन इससे प्राथमिकता पर कोई कंट्रोल नहीं मिलता. इस वजह से, हम scheduler.yield के ऑरिजिन ट्रायल में शामिल हुए. इसका मकसद, मुख्य थ्रेड पर जाने के बाद, स्क्रिप्ट का एक्ज़ीक्यूशन जारी रखने की गारंटी देना है:
/*
* Yielding method using scheduler.yield, falling back to setTimeout:
*/
async function yieldToMain() {
if('scheduler' in window && 'yield' in scheduler) {
return await scheduler.yield();
}
return new Promise(resolve => {
setTimeout(resolve, 0);
});
}
/*
* Yielding to the main thread before changing the state of the component:
*/
const observer = new IntersectionObserver((entries) => {
entries.forEach(handleIntersection);
const maxNumberOfEntries = Math.max(...this.intersectingEntries);
if (Number.isFinite(maxNumberOfEntries)) {
await this.yieldToMain();
this.setState({ count: maxNumberOfEntries });
}
}, { threshold: 0.5 });
PLP कोड में यह तरीका जोड़ने से, बेहतर आईएनपी मिला. ऐसा इसलिए हुआ, क्योंकि मुख्य टास्क को छोटे-छोटे टास्क में बांटा गया है. इससे, ज़्यादा प्राथमिकता वाले काम, जैसे कि उपयोगकर्ता इंटरैक्शन और उसके बाद रेंडरिंग का काम, पहले की तुलना में जल्दी पूरा हो जाता है.
ध्यान दें कि Trendyol, React v16.9.0 का इस्तेमाल करके माइक्रो-फ़्रंटएंड आर्किटेक्चर लागू करने के लिए, PuzzleJs फ़्रेमवर्क का इस्तेमाल करता है. React 18 की मदद से, यही परफ़ॉर्मेंस हासिल की जा सकती है. हालांकि, कई वजहों से Trendyol फ़िलहाल अपग्रेड नहीं कर पा रहा है.
कारोबार के नतीजे
लागू किए गए आईएनपी में हुए सुधार के असर को मेज़र करने के लिए, हमने A/B टेस्ट किया. इससे हमें यह पता चला कि कारोबार की मेट्रिक पर क्या असर पड़ा. कुल मिलाकर, पीएलपी में किए गए बदलावों से काफ़ी सुधार हुआ है. इसमें आईएनपी में 50% की कमी के साथ-साथ हर उपयोगकर्ता सेशन के लिए लिस्टिंग पेज से प्रॉडक्ट की जानकारी वाले पेज पर क्लिक मिलने की दर (सीटीआर) में 1% की बढ़ोतरी शामिल है. नीचे दिए गए आंकड़े में, यह देखा जा सकता है कि समय के साथ पीएलपी पर आईएनपी कैसे बेहतर हुआ:
नतीजा
आईएनपी को ऑप्टिमाइज़ करना एक मुश्किल और बार-बार होने वाली प्रोसेस है. हालांकि, इसे आसान बनाने के लिए, एक बेहतर वर्कफ़्लो का इस्तेमाल किया जा सकता है. अपनी वेबसाइट के आईएनपी को डीबग करने और उसे बेहतर बनाने का एक आसान तरीका, इस बात पर निर्भर करता है कि आपने अपना फ़ील्ड डेटा इकट्ठा किया है या नहीं. अगर आपने ऐसा नहीं किया है, तो PSI और Lighthouse का इस्तेमाल करके शुरुआत करें. समस्या वाले पेजों की पहचान करने के बाद, DevTools का इस्तेमाल करके ज़्यादा जानकारी हासिल की जा सकती है. इससे, समस्याओं को फिर से देखने में मदद मिलती है.
समय-समय पर मुख्य थ्रेड को Yield करने से, ब्राउज़र को ज़रूरी काम करने के ज़्यादा अवसर मिलेंगे. इससे आपकी वेबसाइट ज़्यादा रिस्पॉन्सिव बनेगी और यह पक्का किया जा सकेगा कि आपके खरीदारों को बेहतर उपयोगकर्ता अनुभव मिल रहा है. scheduler.yield() जैसे नए शेड्यूलिंग एपीआई, इस काम को आसान बनाते हैं.
इस काम में योगदान देने के लिए, Google के जेरेमी वैगनर, बैरी पोलार्ड, और हुसैन डीरडेह का खास धन्यवाद. साथ ही, Trendyol की इंजीनियरिंग टीम का भी धन्यवाद.