इस केस स्टडी में, Trendyol की ओर से इस्तेमाल किए जाने वाले React में डीबग करने और
आईएनपी को बेहतर बनाने के वर्कफ़्लो के बारे में सिलसिलेवार तरीके से बताया गया है. इसके लिए, PageSpeed
Insights (PSI), Chrome DevTools, और scheduler.yield API जैसे Google टूल का इस्तेमाल किया जा रहा है.
किसी भी ई-कॉमर्स वेबसाइट के लिए दो अहम कॉम्पोनेंट हैं, प्रॉडक्ट लिस्टिंग पेज (पीएलपी) और प्रॉडक्ट की जानकारी वाला पेज (पीडीपी). ई-कॉमर्स ट्रैफ़िक अक्सर प्रॉडक्ट लिस्टिंग पेजों से आता है. जैसे, ईमेल कैंपेन, सोशल मीडिया या विज्ञापन से. इस वजह से, यह पक्का करना ज़रूरी है कि पीएलपी अनुभव को सही तरीके से डिज़ाइन किया गया हो, ताकि खरीदारी में लगने वाले समय को कम किया जा सके. सफलता पाने के लिए, उपयोगकर्ता अनुभव की क्वालिटी को प्राथमिकता देना ज़रूरी है. Milliseconds Make Goals जैसे रिसर्च पब्लिकेशन ने पहले ही वेब परफ़ॉर्मेंस के बारे में यह बता दिया है कि उपभोक्ताओं के लिए, पैसे खर्च करने और ब्रैंड के साथ ऑनलाइन जुड़ने की उनकी इच्छा पर बहुत ज़्यादा असर पड़ा है.
Trendyol एक ई-कॉमर्स प्लैटफ़ॉर्म है, जिसके करीब 3 करोड़ ग्राहक और 2,40,000 विक्रेता हैं. इसने हमें तुर्किये में पहला कारोबार बनने में मदद की. साथ ही, 10 अरब डॉलर से ज़्यादा की कंपनी की वैल्यू यह दुनिया के टॉप ई-कॉमर्स प्लैटफ़ॉर्म में से एक है.
कॉन्टेंट में ज़रूरत के हिसाब से बदलाव करते हुए और React के पुराने वर्शन पर काम करते हुए, उपयोगकर्ताओं को बड़े पैमाने पर सबसे अच्छा अनुभव देने के अपने लक्ष्य को हासिल करने के लिए, ट्रेंडीॉल का फ़ोकस इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) को बेहतर बनाने के लिए अहम मेट्रिक के तौर पर किया गया. इस केस स्टडी में, Trends को अपने पीएलपी पर आईएनपी में सुधार करने के सफ़र के बारे में बताया गया है. इससे, आईएनपी में 50% की कमी आई और खोज नतीजों में दिखने वाली कारोबार की मेट्रिक में 1% की बढ़ोतरी हुई.
ट्रेंडीॉल की आईएनपी जांच प्रक्रिया
आईएनपी से पता चलता है कि वेबसाइट, उपयोगकर्ता के इनपुट के हिसाब से कितनी रिस्पॉन्सिव है. अच्छे आईएनपी से पता चलता है कि ब्राउज़र सभी उपयोगकर्ता इनपुट का तेज़ी और बेहतर तरीके से जवाब दे सकता है और पेज को फिर से पेंट कर सकता है, जो अच्छे उपयोगकर्ता अनुभव का एक अहम हिस्सा है.
किसी भी तरह के सुधार करने से पहले, ट्रेंडीवॉल का आईएनपी को अपने पीएलपी में बेहतर बनाने का सफ़र, उपयोगकर्ता अनुभव के बारीकी से विश्लेषण के साथ शुरू हुआ. पीएसआई रिपोर्ट के मुताबिक, पीएलपी के असली उपयोगकर्ता अनुभव का आईएनपी मोबाइल पर 963 मिलीसेकंड होता है, जैसा कि अगले चित्र में दिखाया गया है.
अच्छा रिस्पॉन्स पक्का करने के लिए, साइट के मालिकों को 200 मिलीसेकंड से कम आईएनपी मेट्रिक पर फ़ोकस करना चाहिए. इसका मतलब है कि उस समय, ट्रेंडीॉल का आईएनपी "खराब" रेंज में था.
अच्छी बात यह है कि पीएसआई, Chrome की उपयोगकर्ता अनुभव रिपोर्ट (CrUX) में शामिल पेजों के लिए फ़ील्ड डेटा और लैब डाइग्नोस्टिक्स डेटा के बारे में ज़्यादा जानकारी, दोनों उपलब्ध कराता है. लैब डेटा पर नज़र
रखने पर, Lighthouse के JavaScript चलाने की अवधि के ऑडिट से पता चला कि पेज पर मौजूद दूसरी स्क्रिप्ट के मुकाबले, search-result-v2 स्क्रिप्ट ज़्यादा समय से मुख्य थ्रेड पर चल रही थी.
असल दुनिया की रुकावटों का पता लगाने के लिए, हमने Chrome DevTools में मौजूद परफ़ॉर्मेंस पैनल का इस्तेमाल किया. इससे, पीएलपी के अनुभव से जुड़ी समस्या को हल किया जा सका और उस समस्या के सोर्स का पता लगाया जा सका. Chrome DevTools में मोबाइल परफ़ॉर्मेंस को 4X सीपीयू स्लोडाउन के साथ एम्युलेट करने से, मुख्य थ्रेड पर 700-900 मिलीसेकंड लंबे टास्क का पता चला. अगर मुख्य थ्रेड में 50 मिलीसेकंड से ज़्यादा समय तक दूसरे टास्क शामिल किए जाते हैं, तो हो सकता है कि वह उपयोगकर्ता के इनपुट का समय पर जवाब न दे. इससे उपयोगकर्ता को खराब अनुभव मिलता है.
सबसे लंबा टास्क, प्रतिक्रिया वाले कॉम्पोनेंट में खोज के नतीजों की स्क्रिप्ट में मौजूद, Intersection ऑब्ज़र्वर एपीआई कॉलबैक की वजह से हुआ था. अब हमने उस लंबे टास्क को छोटे-छोटे हिस्सों में बांटने पर काम करना शुरू किया, ताकि ब्राउज़र को ज़्यादा प्राथमिकता वाले कामों के लिए ज़्यादा अवसर मिल सकें. इनमें उपयोगकर्ताओं के इंटरैक्शन भी शामिल हैं.
इससे पता चलता है कि 'इंटरसेक्शन ऑब्ज़र्वर कॉलबैक' में रिऐक्ट रीरेंडरिंग को ट्रिगर करने वाली 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 });
पीएलपी कोड में इस ईल्डिंग तरीके को जोड़ने से आईएनपी में सुधार हुआ. इसकी वजह यह है कि लंबे टास्क को छोटे टास्क की सीरीज़ में बांटा गया है. इससे ज़्यादा प्राथमिकता वाले काम, जैसे कि उपयोगकर्ता इंटरैक्शन और बाद में रेंडरिंग के काम जल्दी पूरे किए जा सकते हैं.
ध्यान दें कि ट्रेंडीॉल, React v16.9.0 का इस्तेमाल करके माइक्रो-फ़्रंटएंड आर्किटेक्चर लागू करने के लिए PuzzleJs फ़्रेमवर्क का इस्तेमाल करता है. React 18 के साथ, वही परफ़ॉर्मेंस पाया जा सकता है, लेकिन कई वजहों से, इस समय ट्रेंडीाओल अपग्रेड नहीं हो पा रहा है.
कारोबार के नतीजे
आईएनपी में लागू किए गए सुधार के असर को मापने के लिए, हमने A/B टेस्ट किया, ताकि यह देखा जा सके कि कारोबार की मेट्रिक पर क्या असर पड़ा. कुल मिलाकर, पीएलपी में हुए हमारे बदलावों से काफ़ी सुधार हुआ है. इसमें आईएनपी में 50% की कमी के साथ-साथ हर उपयोगकर्ता सेशन में, लिस्टिंग पेज से प्रॉडक्ट की जानकारी वाले पेज पर क्लिक मिलने की दर (सीटीआर) में 1% की बढ़ोतरी हुई. यहां दिए गए डायग्राम में यह देखा जा सकता है कि समय के साथ आईएनपी में पीएलपी में कैसे सुधार हुआ है:
नतीजा
आईएनपी को ऑप्टिमाइज़ करना एक मुश्किल और बार-बार किया जाने वाला प्रोसेस है. हालांकि, वर्कफ़्लो को साफ़ तौर पर समझने की मदद से इसे और आसान बनाया जा सकता है. अपनी वेबसाइट के आईएनपी को डीबग करने और बेहतर बनाने का आसान तरीका, इस बात पर निर्भर करता है कि आपका फ़ील्ड डेटा खुद इकट्ठा किया जा रहा है या नहीं. अगर ऐसा नहीं है, तो पीएसआई और लाइटहाउस अच्छे विकल्प हैं. समस्याओं वाले पेजों की पहचान करने के बाद, DevTools की मदद से समस्याओं को गहराई से समझा जा सकता है.
ब्राउज़र को ज़रूरी काम करने के ज़्यादा अवसर देने के लिए, समय-समय पर मुख्य थ्रेड का इस्तेमाल करने से आपकी वेबसाइट ज़्यादा बेहतर बनती है. इससे यह पक्का होता है कि ग्राहकों को बेहतर उपयोगकर्ता अनुभव मिले. scheduler.yield() जैसे नए शेड्यूलिंग एपीआई इस काम को आसान बना देते हैं.
इस काम में योगदान देने के लिए, Google के जेरेमी वैगनर, बैरी पोलार्ड, और हुसैन जिरदेह और ट्रेंडीॉल की इंजीनियरिंग टीम का विशेष धन्यवाद.