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