असल उपयोगकर्ता को मॉनिटर करने वाले टूल का इस्तेमाल करके और अपने ऐप्लिकेशन को फिर से तैयार करते समय, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी वाली मेट्रिक को बेहतर बनाने पर ध्यान देकर, उन्होंने सीएलएस को 72% तक बेहतर बनाया. साथ ही, ऐप्लिकेशन के रिस्पॉन्स को भी बेहतर बनाया.
Agrofy, लैटिन अमेरिका के कृषि कारोबार के लिए एक ऑनलाइन मार्केटप्लेस है. यह प्लैटफ़ॉर्म, फ़ार्म मशीन, ज़मीन, उपकरण, और वित्तीय सेवाओं के खरीदारों और बेचने वालों को जोड़ता है. साल 2020 की तीसरी तिमाही में, Agrofy की चार सदस्यों वाली डेवलपमेंट टीम ने अपनी वेबसाइट को ऑप्टिमाइज़ करने में एक महीना बिताया. ऐसा इसलिए किया गया, क्योंकि उन्हें लगा कि परफ़ॉर्मेंस बेहतर होने से बाउंस रेट कम हो जाएगा. उन्होंने खास तौर पर LCP को बेहतर बनाने पर ध्यान दिया, जो वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी में से एक है. परफ़ॉर्मेंस को ऑप्टिमाइज़ करने से, एलसीपी में 70% की बढ़ोतरी हुई. इससे, धीमे लोड होने की वजह से, पेज को छोड़ने वालों की संख्या में 76% की कमी आई. यह संख्या 3.8% से घटकर 0.9% हो गई.
70%
कम एलसीपी
76%
लोडिंग के दौरान ऐप्लिकेशन बंद करने की संख्या कम करना
समस्या
Agrofy की डेवलपमेंट टीम ने अपने कारोबार की मेट्रिक का अध्ययन करते समय पाया कि उनके बाउंस रेट, इंडस्ट्री के मानदंडों से ज़्यादा हैं. वेबसाइट के कोडबेस में तकनीकी बकाया भी बढ़ रहा था.
समाधान
Agrofy की टीम ने अपने एग्ज़ीक्यूटिव को बताया और उनसे इनके लिए सहमति ली:
- पुराने और अब काम न करने वाले फ़्रेमवर्क से, नए और काम करने वाले फ़्रेमवर्क पर माइग्रेट करना.
- नए कोडबेस की लोडिंग परफ़ॉर्मेंस को ऑप्टिमाइज़ करें.
माइग्रेशन में दो महीने लगे. पहले बताई गई चार सदस्यों की डेवलपमेंट टीम के अलावा, इस माइग्रेशन में प्रॉडक्ट और UX विशेषज्ञों के साथ-साथ एक सॉफ़्टवेयर आर्किटेक्ट भी शामिल थे. ऑप्टिमाइज़ेशन प्रोजेक्ट को डेवलप करने में, चार लोगों की टीम को एक महीने का समय लगा. उन्होंने एलसीपी, CLS (वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली एक और मेट्रिक), और एफ़सीपी पर फ़ोकस किया. इसमें ये खास ऑप्टिमाइज़ेशन शामिल हैं:
- इंटरसेक्शन ऑब्ज़र्वर एपीआई की मदद से, दिखने वाले सभी एलिमेंट को धीरे-धीरे लोड करना.
- कॉन्टेंट डिलीवरी नेटवर्क की मदद से, स्टैटिक संसाधनों को तेज़ी से डिलीवर करना.
loading="lazy"की मदद से, इमेज को लेज़ी लोड करना.- क्रिटिकल रेंडरिंग पाथ के कॉन्टेंट की सर्वर साइड रेंडरिंग.
- हैंडशेक के समय को कम करने के लिए, ज़रूरी रिसॉर्स को पहले से लोड करना और पहले से कनेक्ट करना.
- रीयल यूज़र मॉनिटरिंग (आरयूएम) टूल का इस्तेमाल करके, यह पता लगाना कि प्रॉडक्ट की जानकारी वाले किन पेजों पर लेआउट में बहुत ज़्यादा बदलाव हो रहे थे. इसके बाद, कोडबेस के आर्किटेक्चर में बदलाव करना.
ज़्यादा तकनीकी जानकारी के लिए, Agrofy की इंजीनियरिंग ब्लॉग पोस्ट देखें.
उन्होंने 20% ट्रैफ़िक पर नया कोडबेस चालू करने के बाद, सितंबर 2020 की शुरुआत में सभी वेबसाइट पर आने वाले लोगों के लिए नई साइट लॉन्च की.
नतीजे
डेवलपमेंट टीम के ऑप्टिमाइज़ेशन की वजह से, कई अलग-अलग मेट्रिक में काफ़ी सुधार हुए:
- एलसीपी में 70% की बढ़ोतरी हुई.
- सीएलएस में 72% की बढ़ोतरी हुई.
- JS अनुरोधों को ब्लॉक करने से, अनुरोधों की संख्या 100% और सीएसएस अनुरोधों को ब्लॉक करने से, अनुरोधों की संख्या 80% कम हो गई.
- लंबे टास्क 72% कम हो गए.
- इस्तेमाल में न होने वाले पहले सीपीयू (CPU) में 25% की बढ़ोतरी हुई.
इसी समयावधि के दौरान, असल उपयोगकर्ता की निगरानी से जुड़े डेटा (इसे फ़ील्ड डेटा भी कहा जाता है) से पता चला कि प्रॉडक्ट की जानकारी वाले पेजों पर, लोड होने के दौरान उपयोगकर्ता के पेज छोड़कर चले जाने की दर 76% कम हुई है. यह दर 3.8% से घटकर 0.9% हो गई है:
