पब्लिश किया गया: 22 जनवरी, 2025
QuintoAndar ने पेज के रिस्पॉन्स में लगने वाले समय (आईएनपी) को 80% तक कम करके, अपनी वेबसाइट की परफ़ॉर्मेंस को काफ़ी बेहतर बनाया. इससे, साल-दर-साल कन्वर्ज़न में 36% की बढ़ोतरी हुई. हमने "कोड येलो" लागू किया है, ताकि सभी टीमों की परफ़ॉर्मेंस को प्राथमिकता दी जा सके. ऐसा इसलिए किया गया है, क्योंकि हम जानते हैं कि उपयोगकर्ताओं की दिलचस्पी बनाए रखने के लिए, साइटों को तेज़ी से लोड होना और उन पर तुरंत काम करना ज़रूरी है.
QuintoAndar ने असल उपयोगकर्ता निगरानी (RUM) जैसे टूल और लंबे टास्क को ऑप्टिमाइज़ करने और React ट्रांज़िशन के लिए async/await जैसी तकनीकों का इस्तेमाल करके, इंटरैक्शन के समय को कम किया और उपयोगकर्ता अनुभव को बेहतर बनाया. तीसरे पक्ष के पिक्सल हटाने और रेंडरिंग को ऑप्टिमाइज़ करने जैसे बदलावों की वजह से, परफ़ॉर्मेंस मेट्रिक बेहतर हुई हैं. अब 42% से 78% पेज, INP के 200 मिलीसेकंड या उससे कम के "अच्छे" थ्रेशोल्ड को पूरा कर रहे हैं. साथ ही, शुरुआत में 32% पेजों पर खराब अनुभव मिलता था, जबकि अब सिर्फ़ 6.9% पेजों पर ऐसा होता है.
समस्या
QuintoAndar, ब्राज़ील का सबसे बड़ा हाउसिंग प्लैटफ़ॉर्म है. इस पर लैटिन अमेरिका के कई देशों में भी लिस्टिंग उपलब्ध हैं. Search, रीयल एस्टेट का सबसे बड़ा ऑनलाइन चैनल है. इसका मतलब है कि ऑर्गैनिक ट्रैफ़िक हासिल करना, इस कारोबार के लिए ज़रूरी है. इसके अलावा, उपयोगकर्ताओं को जोड़े रखने और उन्हें अपने सपनों का घर ढूंढने में मदद करने के लिए, बेहतर उपयोगकर्ता अनुभव देना ज़रूरी है.
साल 2024 की शुरुआत में, QuintoAndar को पता चला कि भले ही उनके पास मार्केट में सबसे अच्छा प्लैटफ़ॉर्म है, लेकिन वे उपयोगकर्ताओं को बेहतर अनुभव दे सकते हैं. इससे कन्वर्ज़न रेट भी ज़्यादा हो सकते हैं. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के तौर पर पेज के रिस्पॉन्स में लगने वाले समय (आईएनपी) को शामिल किए जाने के बाद, यह बात साफ़ तौर पर पता चली. असल में, QuintoAndar की तुलना में हमारे प्रतिस्पर्धियों का आईएनपी बेहतर था.
QuintoAndar की एसईओ और वेब परफ़ॉर्मेंस टीम ने, उपयोगकर्ता अनुभव पर ज़्यादा आईएनपी के बुरे असर को ध्यान में रखते हुए कार्रवाई करने का फ़ैसला लिया. उन्होंने एक बेहतर प्लान के साथ, तकनीकी और कॉन्टेंट से जुड़े सुधारों की सीरीज़ पर काम करना शुरू किया. इसका मकसद, सिर्फ़ INP को कम करना ही नहीं, बल्कि उपयोगकर्ता के जुड़ाव और क्लिक मिलने की दर को बढ़ाना भी था.
इस लेख में बताया गया है कि QuintoAndar ने INP को 80%तक कैसे कम किया. इससे कन्वर्ज़न में काफ़ी बढ़ोतरी हुई और उपयोगकर्ता अनुभव बेहतर हुआ. इस केस स्टडी में, लागू की गई रणनीतियों, आने वाली चुनौतियों, और मिले नतीजों के बारे में बताया गया है.
कोड पीला: वेब परफ़ॉर्मेंस को प्राथमिकता देना
QuintoAndar को पता था कि वेब की परफ़ॉर्मेंस न सिर्फ़ उपयोगकर्ता अनुभव के लिए, बल्कि कारोबार की सफलता के लिए भी ज़रूरी है. साथ ही, यह भी पता था कि तेज़ और रिस्पॉन्सिव साइट से ज़्यादा यूज़र ऐक्टिविटी और उपयोगकर्ताओं को बनाए रखने में मदद मिलती है. QuintoAndar को यह भी पता था कि इन नतीजों को पाने के लिए, पूरे संगठन को लगातार और एक साथ मिलकर काम करना होगा. इस वजह से, QuintoAndar ने "कोड पीला" लागू किया.
"कोड येलो" का कॉन्सेप्ट, Google में तेज़ी से काम करने की ज़रूरत को पूरा करने के लिए शुरू किया गया था. इसमें, किसी खास लीडर को कंपनी में मौजूद किसी भी व्यक्ति को सहायता के लिए भर्ती करने का अधिकार दिया जाता है. भले ही, वह व्यक्ति किसी भी प्रोजेक्ट पर काम कर रहा हो.
QuintoAndar में, "कोड पीला" एक इंटरनल सूचना प्रणाली के तौर पर काम करता है. इसे संगठन में वेब की परफ़ॉर्मेंस को बेहतर बनाने के लिए बनाया गया है. "कोड पीला" घोषित होने पर, कंपनी की अलग-अलग टीमों ने तुरंत और एक साथ मिलकर कार्रवाई की. इससे, परफ़ॉर्मेंस से जुड़ी समस्याओं को हल करने में मदद मिली.
QuintoAndar ने बड़े अवसरों की पहचान कैसे की और ऑप्टिमाइज़ेशन कैसे लागू किए
200 मिलीसेकंड से ज़्यादा देरी होने पर, उपयोगकर्ताओं को यह महसूस होता है. इसके अलावा, इससे ज़्यादा देरी होने पर, उपयोगकर्ता अनुभव खराब हो जाता है. इसलिए, आईएनपी मेट्रिक काफ़ी अहम है: यह पेज के लाइफ़साइकल के दौरान होने वाले सभी क्लिक, टैप, और कीबोर्ड इंटरैक्शन के इंतज़ार के समय को देखकर, यह आकलन करती है कि कोई पेज, व्यक्ति के अनुरोधों का जवाब देने के मामले में कुल मिलाकर कितना रिस्पॉन्सिव है.
हालांकि, इस मेट्रिक को बेहतर बनाने के लिए, ज़्यादा जानकारी की ज़रूरत होती है. QuintoAndar के लिए, सबसे पहले यह पता लगाना था कि उपयोगकर्ता अनुभव के किन चरणों और एलिमेंट की वजह से इंटरैक्शन धीमा हो रहा है. रीयल यूज़र मॉनिटरिंग (RUM) तकनीकों का इस्तेमाल करके, ऐसा किया जा सकता है. इन तकनीकों की मदद से, धीमे इंटरैक्शन को ज़्यादा जानकारी के साथ ट्रैक किया जा सकता है. इसमें INP को इनपुट में लगने वाला समय, प्रोसेसिंग में लगने वाला समय, और प्रज़ेंटेशन में लगने वाला समय जैसे सब-पार्ट में बांटना शामिल है. साथ ही, लंबे ऐनिमेशन फ़्रेम (LoAF) का विश्लेषण करना भी शामिल है.
इस प्रोसेस की मदद से, यह पता लगाया जा सकता है कि प्रॉपर्टी खोजने के अनुभव के कुछ एलिमेंट, 75वें पर्सेंटाइल (25% उपयोगकर्ताओं पर असर डालने वाले) पर चार सेकंड का इंटरैक्शन टाइम दे रहे थे. लंबे टास्क को ऑप्टिमाइज़ करके, INP पर असर डालने वाले कई धीमे इंटरैक्शन में काफ़ी सुधार हुए. QuintoAndar के JavaScript कोड में, async/await का इस्तेमाल करके, येल्ड पॉइंट बनाए गए:
function yieldToMain () {
return new Promise(resolve => {
setTimeout(resolve, 0);
});
}
इस तरह, उपयोगकर्ता को ज़्यादा तेज़ी से काम का विज़ुअल फ़ीडबैक मिल सकता है. QuintoAndar के मामले में, स्पिनर रेंडर किया गया था. मुख्य थ्रेड को, ज़्यादा प्राथमिकता वाले अन्य टास्क के लिए छोड़ दिया गया था. इसके बाद, शुरुआत में किए जाने वाले बाकी काम को फिर से शुरू किया जा सकता था:
async function handleFilterClick () {
showLoadingSpinner();
await yieldToMain(); // Yield point
await loadFilterData();
showModal();
}
ट्रांज़िशन का इस्तेमाल, एक और लोकप्रिय तकनीक है. यह React का इस्तेमाल करके ऐप्लिकेशन बनाने वालों के लिए ज़रूरी है. React अब ट्रांज़िशन के साथ काम करता है. इसलिए, QuintoAndar, उपयोगकर्ता इंटरफ़ेस को ब्लॉक किए बिना ऐप्लिकेशन की स्थिति को अपडेट करने के लिए, useTransition हुक का इस्तेमाल कर सकता है.
import React, { useState, useTransition } from 'react';
function App() {
const [isPending, startTransition] = useTransition();
const [value, setValue] = useState('');
const onInputChange = event => {
setValue(event.target.value) // high-priority
startTransition(() => {
// Time-consuming task—for example, filter and update the list...
});
}
return (
<div className="App">
<input
value={value}
onChange={onInputChange}
placeholder='Start typing...'
/>
</div>
);
}
export default App;
बताई गई तकनीकों के साथ-साथ, QuintoAndar ने मेमोइज़ेशन, डिबाउंसिंग, अबॉर्ट कंट्रोलर, सस्पेंस जैसे अन्य सुधार भी लागू किए. इनकी वजह से, INP में सुधार हुआ.
उदाहरण के लिए, पिछले कोड के उदाहरण में, डिबाउंसिंग लागू की जा सकती है. यह एक ऐसी तकनीक है जो किसी फ़ंक्शन को तब तक लागू नहीं करती, जब तक कोई गतिविधि न हो. इससे, उपयोगकर्ता के तेज़ी से टाइप करने पर, ग़ैर-ज़रूरी अपडेट होने से रोकने में मदद मिलती है.
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, 300); // Adjust debounce delay as needed
return () => clearTimeout(handler);
}, [value]);
इसके अलावा, QuintoAndar ने कुल ब्लॉकिंग समय (टीबीटी) का इस्तेमाल, आईएनपी के प्रॉक्सी के तौर पर किया. इससे, QuintoAndar को स्ट्रक्चर में किए गए बड़े बदलावों के असर का अनुमान लगाने में मदद मिली. जैसे:
- क्लाइंट से तीसरे पक्ष के पिक्सल हटाना.
- CSS-in-JS को हटाना.
- रेंडरिंग ऑप्टिमाइज़ेशन.
इस तरह के इनिशिएटिव ज़रूरी हैं, क्योंकि इनसे सीधे तौर पर इनपुट में लगने वाले समय को कम किया जा सकता है. यह वह समय होता है जो उपयोगकर्ता के इंटरैक्शन शुरू करने और उसके लिए रजिस्टर किए गए इवेंट हैंडलर के चलने में लगता है. जब उपयोगकर्ता पेज से इंटरैक्ट करना शुरू करता है, तो अन्य टास्क चलने पर इनपुट में देरी अक्सर बढ़ जाती है. QuintoAndar के लिए, इनपुट डिले, INP में सबसे ज़्यादा योगदान देने वाली वजहों में से एक थी. इसकी वजह यह थी कि पेज लोड होने के दौरान, मुख्य थ्रेड पर कई टास्क चल रहे थे.
परफ़ॉर्मेंस में गिरावट को रोकने के लिए, वेब पर परफ़ॉर्मेंस को मैनेज करना
अगर परफ़ॉर्मेंस में गिरावट को रोका नहीं जा सकता, तो परफ़ॉर्मेंस से जुड़ी समस्याओं को प्राथमिकता देना और उन्हें हल करना काफ़ी नहीं है. जब QuintoAndar को पहले परफ़ॉर्मेंस में गिरावट का सामना करना पड़ा, तब उन्होंने परफ़ॉर्मेंस को बेहतर बनाने के लिए, बेहतर तरीके से मैनेज करने की रणनीति बनाने की अहमियत को समझा.
पहला चरण, हर मेट्रिक के लिए सूचना देने की सुविधा सेट अप करना था. इसे ऐप्लिकेशन टाइप या अनुभव या दोनों के हिसाब से सेगमेंट में बांटा गया था. असल उपयोगकर्ताओं से कैप्चर किए गए मेट्रिक डेटा की मदद से, QuintoAndar परफ़ॉर्मेंस पर नज़र रख सकता है. साथ ही, इस डेटा को टाइम सीरीज़ डेटाबेस में भेज सकता है. यहां टूल का इस्तेमाल करके डैशबोर्ड और सेगमेंट किए गए अलार्म जनरेट किए जा सकते हैं.
तय समय पर बजने वाले अलार्म के अलावा, QuintoAndar ने अलग-अलग थ्रेशोल्ड वाले अलार्म भी लागू किए हैं. ये अलार्म, डेवलपमेंट टीम को सूचना देने के लिए, असामान्य नतीजों का पता लगाते हैं. इससे, तय थ्रेशोल्ड तक पहुंचने से पहले ही, टीम को समस्याओं के बारे में पता चल जाता है. QuintoAndar ने इन अलार्म के थ्रेशोल्ड में बदलाव करने के लिए, हर दो हफ़्ते में होने वाली एक कमिटी भी बनाई है.
समस्याओं को हल करने के लिए, एक प्रोसेस बनाई गई थी. इस प्रोसेस को रनबुक का इस्तेमाल करके सख्ती से पूरा किया गया. इसमें, आने वाली हर तरह की समस्या को हल करने के लिए, अपनाई जाने वाली प्रोसेस के बारे में बताया गया है. इंजीनियरिंग में काम करने वाला कोई भी व्यक्ति इन रनबुक का इस्तेमाल कर सकता है.
आखिर में, QuintoAndar ने INP से जुड़ी समस्याओं को प्रोडक्शन में आने से रोकने के लिए, कैनरी रिलीज़ सिस्टम लागू किया. यह सिस्टम, उपयोगकर्ताओं को नई रिलीज़ को चरणों में डिलीवर करता है. उदाहरण के लिए, 1%, 10%, 65%, और आखिर में 100% तक. बैलेंस करने के हर चरण में, कैनरी वर्शन की जांच की जाती है, ताकि यह पता लगाया जा सके कि इससे उपयोगकर्ता के लिए परफ़ॉर्मेंस खराब हुई है या नहीं. अगर ऐसा होता है, तो रोलबैक अपने-आप हो जाता है. इससे, ऑप्टिमाइज़ नहीं की गई सुविधाओं को पूरी तरह से प्रोडक्शन में जाने से रोका जा सकता है.
समीक्षा के लिए, ये मुख्य कार्रवाइयां की गईं:
- थ्रेशोल्ड को बेहतर बनाने के लिए, हर दो हफ़्ते में होने वाली कमिटी के साथ, अच्छी तरह से तय की गई सूचनाएं (तय और बदलाव वाली).
- समस्या हल करने के तरीके, जिनमें रनबुक की पूरी जानकारी शामिल हो.
- परफ़ॉर्मेंस की पुष्टि करने वाली कैनरी रिलीज़, ताकि परफ़ॉर्मेंस में होने वाली गिरावट के असर को कम किया जा सके.
नतीजे
संगठन में परफ़ॉर्मेंस को प्राथमिकता देने, परफ़ॉर्मेंस टीम बनाने, और ऑप्टिमाइज़ेशन तकनीकों का इस्तेमाल करने से, INP में 80% की कमी आई. इसकी जानकारी, हमारे आरयूएम डेटा से मिली है. नीचे दिए गए चार्ट में, खास तौर पर मोबाइल के लिए INP दिखाया गया है. इसमें शुरुआती तौर पर तेज़ गिरावट देखी जा सकती है. यह सुधार, खास तौर पर समस्या वाले इंटरैक्शन को ठीक करने के लिए किया गया था. इसमें, पूरे साल में लगातार गिरावट को भी हाइलाइट किया गया है. इससे पता चलता है कि रिग्रेशन को रोकने के लिए, मैनेजमेंट प्रोसेस की अहमियत कितनी ज़्यादा है.
ये सुधार CrUX डैशबोर्ड में भी दिखे. QuintoAndar का आईएनपी अब 75वें पर्सेंटाइल में 200 मिलीसेकंड से कम है. इसके 78% पेज इस थ्रेशोल्ड से नीचे परफ़ॉर्म कर रहे हैं और सिर्फ़ 6.9% पेज खराब अनुभव दे रहे हैं. यह संख्या हर महीने लगातार कम हो रही है.
QuintoAndar के कारोबार पर सीधे असर डालने के लिए, यह नतीजा अहम था. QuintoAndar ने देखा कि हर साल कन्वर्ज़न वॉल्यूम में 36% की बढ़ोतरी हुई. कन्वर्ज़न वॉल्यूम में बढ़ोतरी, नए संभावित ग्राहकों की वजह से हुई. QuintoAndar के मामले में, ये ऐसे लोग हैं जिन्होंने प्रॉपर्टी पर जाने का शेड्यूल किया है. यह नतीजा, बेहतर उपयोगकर्ता अनुभव देने की वजह से उपयोगकर्ताओं के जुड़ाव में हुई बढ़ोतरी से जुड़ा है. हालांकि, यह सिर्फ़ इस वजह से नहीं हुआ है.
नतीजा
वेब की परफ़ॉर्मेंस को बेहतर बनाना चुनौती भरा काम है. कभी-कभी, यह काम आपको मुश्किल भी लग सकता है. QuintoAndar शुरू होने के समय, उनके पास सभी जवाब नहीं थे. हालांकि, समस्या को अलग-अलग हिस्सों में बांटकर, सबसे ज़्यादा असर डालने वाली समस्याओं पर फ़ोकस करने और सभी टीमों के साथ मिलकर काम करने से, उन्होंने काफ़ी तरक्की की. यह ज़रूरी नहीं है कि हर समस्या को एक साथ ठीक किया जाए. छोटे-मोटे बदलावों से भी काफ़ी सुधार हो सकते हैं. पहला कदम उठाने से, आपको बेहतर परफ़ॉर्मेंस और उपयोगकर्ता अनुभव मिलता है. भले ही, यह कदम सबसे बड़ी समस्याओं की पहचान करने, ऑप्टिमाइज़ेशन के साथ प्रयोग करने या अपनी टीम में जागरूकता बढ़ाने के लिए उठाया गया हो.