जानें कि Renault ने सबसे बड़े कॉन्टेंटफ़ुल पेंट को मेज़र और ऑप्टिमाइज़ करके, अपने बाउंस और कन्वर्ज़न रेट को कैसे बेहतर बनाया

टीम ने अपने लैंडिंग पेजों पर एक करोड़ विज़िट के डेटा का विश्लेषण किया. इससे उन्हें सबसे बड़े कॉन्टेंटफ़ुल पेंट और कन्वर्ज़न रेट के बीच का संबंध पता चला.

Antoine Bisch

Cédric Bazureau

Thierry Coustillac

Groupe Renault, फ़्रांस की एक मल्टीनैशनल ऑटोमोबाइल मैन्युफ़ैक्चरर है. इसकी कंपनी 130 से ज़्यादा देशों में काम कर रही है. Renault जैसे वाहन संबंधित समूहों के लिए ज़्यादा उपयोगकर्ता जुड़ाव और कन्वर्ज़न बढ़ाने वाली प्रदर्शनकारी ब्रैंड साइटों के लिए ज़्यादा कारोबार करना ज़रूरी है. इसकी सभी ब्रैंड साइटों का मकसद, स्थानीय भाषा वाली साइटों के लिए अपने हिसाब से कॉन्टेंट और सुविधाओं को उपलब्ध कराना है. साथ ही, उपयोगकर्ताओं को बड़े पैमाने पर बेहतरीन अनुभव देना है. इस संदर्भ में, परफ़ॉर्मेंस पर निगरानी रखने की सुविधा, ग्राहक अनुभव टीम के लिए अहम है. इस टीम की ज़िम्मेदारी ग्लोबल प्लैटफ़ॉर्म को डेवलप करने और उसे बनाए रखने की है.

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के कारोबार पर पड़ने वाले असर को मेज़र करना

Google Analytics में मेज़रमेंट

अपने ग्लोबल डेटा पार्टनर रेनो के साथ काम करते हुए, Reault ने वेब वाइटल लाइब्रेरी सेट अप की. इससे Google Analytics को असली उपयोगकर्ताओं की 'वेब की परफ़ॉर्मेंस की जानकारी देने वाली सभी मेट्रिक' इस तरह भेजी जाती हैं कि वह Chrome से मेज़र की जाती है और Google के अन्य टूल को रिपोर्ट की जाती है.

नीचे दिए गए विश्लेषण में, दिसंबर 2020 से मार्च 2021 के बीच चार महीनों के दौरान इन टूल का इस्तेमाल करके कैप्चर किया गया डेटासेट दिखाया गया है.

ऑप्टिमाइज़ किया गया एलसीपी, उपयोगकर्ता के जुड़ाव और कारोबार की मेट्रिक के साथ काफ़ी मेल खाता है

टीमों ने, सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले कम समय (एलसीपी) और अच्छी बाउंस रेट और कन्वर्ज़न रेट के बीच एक खास संबंध की पहचान की है. इस संबंध को नीचे दिए गए विज़ुअलाइज़ेशन में दिखाया गया है.

यह डेटासेट चार महीने में, 33 देशों में एक करोड़ से ज़्यादा लोगों की विज़िट को कैप्चर करता है. साथ ही, यह दिखाता है कि कम एलसीपी, इन चीज़ों के साथ कैसे जुड़ा है:

• कम बाउंस दरें
• ज़्यादा कन्वर्ज़न (लीड फ़ॉर्म पूरे हो गए हैं)

दिलचस्प बात यह है कि वेबसाइट एक पेज ऐप्लिकेशन (एसपीए) के तौर पर काम करती है, इसलिए ये सभी तरीके सिर्फ़ लैंडिंग पेज पर कैप्चर किए जाते हैं. डेटा से पता चलता है कि जब तक एलसीपी एक सेकंड से कम नहीं हो जाता, तब तक वेबसाइट को ऑप्टिमाइज़ करना फ़ायदेमंद होता है. समूह की ब्रैंड साइटें कभी भी ज़्यादा ऑप्टिमाइज़ नहीं की जा सकतीं!

यह डेटासेट न सिर्फ़ एलसीपी और कारोबार की मेट्रिक के बीच का नेगेटिव संबंध दिखाता है, बल्कि सबसे अच्छा परफ़ॉर्म करने वाले लैंडिंग पेजों के बीच परफ़ॉर्मेंस के अंतर को भी दिखाता है. इस वेबसाइट के संदर्भ में, एलसीपी को एक सेकंड से कम पाने पर, कन्वर्ज़न में काफ़ी बढ़ोतरी होती है और बाउंस में कमी आती है.

एजा रकोतोरीमनाना, कंसल्टेंट, पचपन

एक सेकंड के एलसीपी में सुधार से, बाउंस रेट में 14 प्रतिशत पॉइंट (पीपीटी) की कमी और कन्वर्ज़न में 13% की बढ़ोतरी हो सकती है.

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को बड़े पैमाने पर ऑप्टिमाइज़ करने के लिए, Renault का नज़रिया

साल 2020 की शुरुआत से, ब्रैंड के पांच मुख्य यूरोपियन मार्केट में, तेज़ एलसीपी (2.5 से कम) का अनुभव करने वाले विज़िटर की संख्या में, Renault डोमेन के लिए औसतन 22 पीपीटी (पीपीसी) (51% से 73%) तक का सुधार हुआ है.

वे इस तरह से इस पर पहुंचे.

एसपीए का सेंट्रल ऑप्टिमाइज़ेशन

प्लैटफ़ॉर्म के हिसाब से देखें, तो कई सालों से परफ़ॉर्मेंस की प्राथमिकता रही है. साथ ही, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को शामिल करना बहुत आसान था. सेंट्रल की टीमों ने Google Lighthouse और Chrome UX Report API की मदद से, निगरानी करने का बेहतर तरीका अपनाया है. साथ ही, पूरे संगठन में परफ़ॉर्मेंस का पता लगाया है. उनके सिंगल पेज ऐप्लिकेशन को ऑप्टिमाइज़ करने की कई रणनीतियां थीं. जैसे:

• सर्वर साइड रेंडरिंग (SSR) का इस्तेमाल करें, ताकि फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) तेज़ी से लोड हो सके.
• कोड को अलग-अलग हिस्सों में बांटने की सुविधा, ताकि लैंडिंग पेज के लिए ज़रूरी JS और सीएसएस के हिस्से ही डिलीवर किए जा सकें (बेहतर एलसीपी और एफ़आईडी के लिए).
• बड़े लेवल के रिसॉर्स कैश मेमोरी वाला सीडीएन. इसमें गैर-ज़रूरी क्वेरी पैरामीटर को क्रम से लगाने और हटाने के लिए Lambda@Edge शामिल है. इससे SSR (सर्वर कंप्यूटेशन की वजह से धीमा TTFB) की कमियों से बचा जा सकता है और अंतिम उपयोगकर्ता के करीब कॉन्टेंट डिलीवर किया जा सकता है (बेहतर TTFB और एलसीपी के लिए).
• कोड का साइज़ कम करने के लिए, ब्रोटली की मदद से कंप्रेशन को ऑप्टिमाइज़ करना.
• HTTP2 का इस्तेमाल करके अनुरोध और जवाबों को मल्टीप्लेक्स कर सकते हैं.
• उपयोगकर्ताओं को सबसे सही साइज़ और फ़ॉर्मैट दिखाने के लिए, WebP सहायता और srcset और sizes एट्रिब्यूट के साथ रिस्पॉन्सिव इमेज का इस्तेमाल किया जाता है.
• IntersectionObserver और एफ़पीओ (1 केबी के छोटे थंबनेल) का इस्तेमाल करके इमेज, वीडियो, और iframe को लेज़ी लोड करना.
• ग़ैर-ज़रूरी पॉलीफ़िल से बचाकर, JS फ़ाइल साइज़ को कम करने के लिए, ब्लॉक करने वाली स्क्रिप्ट को हटाया जाता है और ब्राउज़र टारगेट के हिसाब से ट्रांसपिलेशन में बदलाव किया जाता है.
• Google Tag Manager कंटेनर का साइज़ कम करके, तीसरे पक्ष की स्क्रिप्ट को ज़रूरत के हिसाब से ही लोड किया जा सकता है.
• पसंद के मुताबिक फ़ॉन्ट की संख्या कम करना, यूनिकोड-रेंज वाले woff/woff2 फ़ॉर्मैट का इस्तेमाल करना और font-display:swap का इस्तेमाल करना, फ़ॉन्ट फ़ाइल का साइज़ कम करना और अभी तक कस्टम फ़ॉन्ट उपलब्ध न होने पर भी, जल्द से जल्द टेक्स्ट दिखाना.
• हीरो इमेज को पहले से लोड करना, जो अक्सर एलसीपी एलिमेंट होते हैं.

हमारी टीम आने वाले समय में, इस तरह के सुधारों पर काम कर रही है:

• सीएसएस को तेज़ी से डिलीवर करके, एफ़सीपी को बेहतर बनाने के लिए सर्वर पुश का इस्तेमाल किया जा सकता है. (AWS सहायता की कमी और रोक लगाने वाले प्रस्ताव की वजह से स्टैंडबाय पर है.
• एफ़आईडी को बेहतर बनाने के लिए, प्रोग्रेसिव हाइड्रेशन.
• ES6 मॉड्यूल सहायता, आधुनिक ब्राउज़र के लिए ES6 बिल्ड का इस्तेमाल करके, आपको तेज़ अनुभव देने में मदद करता है.

एसपीए का तरीका परफ़ॉर्मेंस के लिए फ़ायदेमंद हो सकता है, क्योंकि जब उपयोगकर्ता एक से दूसरे पेज पर जाते हैं, तो पूरा पेज फिर से लोड करना ज़रूरी नहीं होता. हालांकि, एसपीए पर वेबसाइट की परफ़ॉर्मेंस की जानकारी को मेज़र करने के मौजूदा तरीकों को एक समस्या के तौर पर देखा जा सकता है, क्योंकि रूट ट्रांज़िशन का आकलन नहीं किया जा रहा है. इसलिए, यूज़र इंटरफ़ेस (यूआई) कैश मेमोरी में सेव किए गए सेशन की वजह से, किसी सेशन में पेज लोड होने की तुलना में ज़्यादा तेज़ी से पेज लोड होता है. इससे, वेबसाइट की परफ़ॉर्मेंस की जानकारी की तुलना, कई पेजों वाले ऐप्लिकेशन की प्रतिस्पर्धी वेबसाइट से करना मुश्किल हो जाता है. ऐसी वेबसाइट में, वॉर्म कैश की वजह से हर उस पेज की परफ़ॉर्मेंस का डेटा कम हो जाता है जिसे कोई उपयोगकर्ता किसी सेशन के दौरान ब्राउज़ करता है. ज़्यादा जानकारी के लिए, वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली एसपीए के बारे में अक्सर पूछे जाने वाले सवाल पढ़ें.

ये ऐसी कमियां हैं जिनके बारे में Chrome प्रॉडक्ट टीम जांच कर रही है. एसपीए पर मेज़रमेंट को बेहतर बनाने के लिए, सीएलएस मेट्रिक में अपडेट पहले ही भेज दिया गया है.

परफ़ॉर्मेंस पर लगातार नज़र बनाए रखने की ज़रूरत है, क्योंकि अलग-अलग तकनीकी टीमें इस पर असर डाल सकती हैं. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक की मदद से, एसपीए के लिए तय की गई सीमाओं के बावजूद, हमें अपनी टीम की कार्रवाइयों के असर को ट्रैक करने में मदद मिलती है. उम्मीद है कि रास्ते में होने वाले बदलावों पर जल्द ही ध्यान दिया जाएगा!

सेड्रिक बज़ूरेओ, टेक लीड, Renault

स्थानीय दिशा-निर्देश, जो शेयर की गई ज़िम्मेदारी के तौर पर परफ़ॉर्मेंस ऑप्टिमाइज़ेशन को प्रमोट करते हैं

परफ़ॉर्मेंस को ग्लोबल (केंद्रीय) और स्थानीय ज़िम्मेदारी, दोनों के तौर पर दिखाया जाता है. टीमों ने सबसे सही तरीकों की एक सीरीज़ बनाई है, जिन्हें कॉन्टेंट के स्थानीय मालिकों ने फ़ॉलो किया है. यहां इन दिशा-निर्देशों से जुड़े कुछ उदाहरण दिए गए हैं:

• साइट की परफ़ॉर्मेंस बेहतर बनाने के लिए, स्थानीय Google Tag Manager कंटेनर को ऑप्टिमाइज़ करें. उदाहरण के लिए, कुछ टैग को शर्त के साथ ट्रिगर करें.
• अंदरूनी टूल का इस्तेमाल करके या किसी बाहरी प्लैटफ़ॉर्म (जैसे YouTube) पर होस्ट करके, वीडियो कॉन्टेंट के साइज़ को सीमित करें.
• Google Tag Manager के ज़रिए फ़ोटो अपलोड करने से बचें.

हमारे डिजिटल परफ़ॉर्मेंस की गहरी समझ, यह पक्का करने के लिए ज़रूरी है कि हमारी ब्रैंड साइटों का लगातार ऑप्टिमाइज़ेशन. ग्राहक को बेहतर अनुभव देने वाली हमारी टीम का मकसद, एक ऐसा ग्लोबल प्लैटफ़ॉर्म उपलब्ध कराना है जो स्थानीय टीमों के कारोबार पर अच्छा असर डाले. साथ ही, इन टीमों को दिशा-निर्देश और सबसे सही तरीके उपलब्ध कराएं, ताकि वे इस परफ़ॉर्मेंस को बेहतर बनाए रख सकें.

एलेक्ज़ेंडर पेरूश, हेड ऑफ़ परफ़ॉर्मेंस, Renault

साफ़ तौर पर कहा जाए, तो Renault में वेबसाइट की परफ़ॉर्मेंस हमेशा से प्राथमिकता रही है. साथ ही, इसकी वेबसाइट को लगातार ऑप्टिमाइज़ किया जाता रहा है. कारोबार की मेट्रिक के साथ-साथ वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का आकलन करने से, उन्हें इस विषय का प्रमोशन करने में मदद मिली है. इसे पूरी दुनिया की ज़िम्मेदारी के तौर पर लागू किया गया है. साथ ही, स्थानीय दिशा-निर्देशों का पालन करने से, टीमों को इस काम में हिस्सा लेने में मदद मिलती है.