साइट के परफ़ॉर्मेंस और कारोबार की मेट्रिक के बीच का संबंध ढूंढना, उनके ऑप्टिमाइज़ेशन की कोशिशों को सफल बनाने का अहम हिस्सा था.
स्वैपी, नए जैसे किए गए फ़ोन बेचने वाला एक सफल स्टार्ट-अप है. कुछ सालों के लिए, उन्होंने साइट की परफ़ॉर्मेंस के हिसाब से नई सुविधाएं जोड़ने को प्राथमिकता दी. हालांकि, जब उन्हें पता चला कि मोबाइल साइट पर कारोबार के नतीजे, डेस्कटॉप वर्शन की तुलना में कम हैं, तब उनकी परफ़ॉर्मेंस में बदलाव आया. उन्होंने परफ़ॉर्मेंस को ऑप्टिमाइज़ करने पर ध्यान दिया और जल्द ही मोबाइल से मिलने वाले रेवेन्यू में बढ़ोतरी देखने को मिली.
42%
मोबाइल विज़िटर से होने वाली आय में वृद्धि
10pp*
*Rel mCvR की बढ़ोतरी का प्रतिशत
अवसर को हाइलाइट करना
सापेक्ष मोबाइल कन्वर्ज़न रेट (Rel mCvR) का हिसाब लगाने के लिए, मोबाइल के कन्वर्ज़न रेट को डेस्कटॉप के कन्वर्ज़न रेट से भाग दिया जाता है. स्पीड मेट्रिक को ट्रैक करने के कई अवसर हैं, लेकिन उन्हें कारोबारी मेट्रिक से जोड़ना काफ़ी मुश्किल हो सकता है. एक ही कैंपेन और सीज़न के मुताबिक, मोबाइल और डेस्कटॉप, दोनों पर विज्ञापन दिखते हैं. इसलिए, Rel mCvR मेट्रिक इन बाहरी पैरामीटर के असर को अलग करती है. इससे सिर्फ़ यह पता चलता है कि मोबाइल साइट में सुधार हो रहा है या नहीं.
अमेरिका की 10 सबसे बड़ी ई-कॉमर्स साइटों का औसत, Rel mCvR का 50%हिस्सा है, हालांकि, स्वप्पी की औसत वैल्यू 24% है. इससे पता चलता है कि मोबाइल साइट में कुछ चुनौतियां हैं और कंपनी की आय कम हो रही है. इस वजह से, हमने परफ़ॉर्मेंस को बेहतर बनाने वाला प्रोजेक्ट लॉन्च किया.
परफ़ॉर्मेंस को बेहतर बनाने के असर को मेज़र करना
Wappie ने Google Analytics का इस्तेमाल करके, Rel mCvR और मोबाइल के मोबाइल पर पेज लोड होने में लगने वाले औसत समय की ट्रैकिंग सेट अप की. इसके लिए, इस टेंप्लेट वाली स्प्रेडशीट का इस्तेमाल किया गया. (स्प्रेडशीट का इस्तेमाल करने का तरीका जानने के लिए निर्देश पढ़ें.) साथ ही, उन्होंने Google Analytics और BigQuery की मदद से, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को ट्रैक करना भी शुरू किया. ट्रैकिंग की सुविधा के साथ, डेवलपर ने साइट की परफ़ॉर्मेंस पर काम करना शुरू कर दिया है.
सिर्फ़ तीन महीने काम करने के बाद, असर साफ़ था कि Rel mCvR को 24% से 34% और मोबाइल से होने वाली आय में 42% की बढ़ोतरी हुई!
23%
पेज लोड होने में लगने वाला औसत समय कम करें
55%
लोअर एलसीपी
91%
निचला सीएलएस
90%
कम एफ़आईडी
अनुकूलन
एलसीपी और सीएलएस के लिए ऑप्टिमाइज़ करना
स्वप्पी की डेवलपमेंट टीम ने पाया कि ऐसी छोटी-छोटी चीज़ों को बेहतर बनाने की बहुत जगह थी जिन्हें लंबे समय तक अनदेखा किया गया था. अलग-अलग व्यूपोर्ट और भाषाओं में साइट को पढ़ते समय, एलसीपी और सीएलएस से जुड़ी उन समस्याओं को हाइलाइट किया गया जिन्हें हल करना आसान था और जिन्होंने पूरी परफ़ॉर्मेंस पर काफ़ी असर डाला. उदाहरण के लिए, जब भी संभव हो, तब क्लाइंट के बजाय सर्वर पर एलसीपी एलिमेंट को रेंडर करने से एलसीपी घट जाती है.
लेआउट शिफ़्ट का पता लगाना मुश्किल था, क्योंकि व्यूपोर्ट और कनेक्शन के हिसाब से ये काफ़ी अलग हो सकते हैं. उपयोगकर्ताओं से वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के बारे में जानने के बाद, उन्हें पता चला कि सीएलएस में कमी आने की वजह से वे सही ट्रैक पर हैं.
इमेज
इमेज को पहले से लोड करने, लेज़ी लोडिंग, और सही साइज़ का इस्तेमाल करके ऑप्टिमाइज़ किया गया था. वे बड़ी इमेज (उदाहरण के लिए, एलसीपी) को पहले से लोड कर देते हैं. वहीं, ज़रूरत पड़ने पर ही व्यूपोर्ट के बाहर इमेज लोड करते हैं.
फ़ॉन्ट
Wappie ने सेवा देने वाली कंपनियों को स्विच करके, ऑप्टिमाइज़ किए गए फ़ॉन्ट को ऑप्टिमाइज़ किया. इससे बहुत असर पड़ा, क्योंकि उन्हें अलग-अलग भाषाओं के लिए ज़रूरी टाइपफ़ेस को सही तरीके से हैंडल करने की ज़रूरत थी.
तीसरे पक्ष की स्क्रिप्ट
स्वप्पी ने तीसरे पक्ष की हर स्क्रिप्ट और विजेट की समीक्षा करने में बहुत मेहनत की. यह भी देखा कि इसका इस्तेमाल कहां किया गया था और इसकी क्या सुविधाएं थीं. सभी हिस्सेदारों के साथ बातचीत करने के बाद, उन्होंने प्लान बनाया कि साइट पर स्क्रिप्ट के असर को कम किया जा सके. साथ ही, कंपनी के काम करने के तरीके को भी बनाए रखा जा सके. उन्होंने गैर-ज़रूरी चीज़ों को हटा दिया और बाकी को ऑप्टिमाइज़ कर दिया. इससे साइट पर तीसरे पक्ष की JavaScript की संख्या में काफ़ी कमी आई.
इस्तेमाल न होने वाले कोड को हटाना और बंडलिंग ऑप्टिमाइज़ करना
इंपोर्ट को ऑप्टिमाइज़ करने और इस्तेमाल नहीं किए गए JS और सीएसएस को हटाने से Sअप्पी की साइट की परफ़ॉर्मेंस में छोटे-मोटे सुधार हुए हैं. हालांकि, समय के साथ ये छोटे सुधार काम के हैं. उन्होंने अपने बंडलिंग सेटअप को भी ऑप्टिमाइज़ किया.
Swippie में परफ़ॉर्मेंस कल्चर बनाना
Swippie को मिले नतीजे की वजह न सिर्फ़ कोड में हुए बदलाव, बल्कि संगठन और उसकी प्राथमिकताओं में हुए बदलाव भी हैं.
इंजीनियरिंग लीड, तीमू हुओविनन बताते हैं:
इसकी अहमियत बताने के लिए, आपको साइट स्पीड को कारोबार की मेट्रिक से जोड़ना होगा. जब आपके पास समय और संसाधन कम होते हैं, तब इसका इस्तेमाल प्राथमिकता के आधार पर किया जा सकता है. ऐसा हमेशा होता है. ग्राहक की अहमियत को प्राथमिकता देना ही बेहतर है. हालांकि, अगर आपको लगता है कि साइट की स्पीड बढ़ी है, तो नई सुविधाओं और कन्वर्ज़न को बेहतर बनाने पर फ़ोकस करना बहुत आसान है. इससे साइट की परफ़ॉर्मेंस बेहतर होती है. साइट स्पीड को कारोबार की मेट्रिक से लिंक करना हमेशा आसान नहीं होता. इस वजह से ही Rel mCvR का इस्तेमाल करके, कैलकुलेट करने से हमें बहुत मदद मिली.
तेमू हुओविनेन
जब डेवलपर की टीम को एक तिमाही के लिए पूरी तरह से साइट स्पीड पर ध्यान देने का मौका मिला, तब वे ज़्यादा गहराई से जानने के लिए प्रेरित हुए.
हमारी टीम की तरक्की के साथ-साथ, हम इसे और भी बेहतर बनाते हैं. हमारे सात डेवलपर में से चार डेवलपर ने उस महीने के दौरान ही परफ़ॉर्मेंस पर काम करना शुरू किया था. इसका पूरा श्रेय टीम को दिया जाता है. यह वाकई हैरान करने वाली बात है कि हम इस विषय पर मिलकर कैसे काम कर पाए और चैनल का काफ़ी बड़ा असर पड़ा.
तेमू हुओविनेन
Teemu ने शुरुआत में ही डेटा की जानकारी देने वाले प्लान बनाने, DevTools परफ़ॉर्मेंस टैब इस्तेमाल करने का तरीका सीखने, और कोई भी सुधार करने से पहले उपयोगकर्ताओं के आंकड़े सेट अप करने के बारे में बताया है. ग्राफ़ (खास तौर पर, सही दिशा में आगे बढ़ने वाले) आपके काम के लिए फ़ीडबैक और पुष्टि का एक बेहतरीन स्रोत हैं! लाइटहाउस (लैब पर आधारित) स्कोर के साथ-साथ, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने से, उन्हें सही चीज़ों को ऑप्टिमाइज़ करने में मदद मिली. इससे, सबसे ज़्यादा लोगों पर असर डालने वाली चीज़ों को ऑप्टिमाइज़ करने में मदद मिली.