Speculation Rules API का इस्तेमाल करके, Ray-Ban ने प्री-रेंडरिंग की मदद से कन्वर्ज़न रेट को दोगुना किया और बाहर निकलने की दर को 13% तक कम किया

Daniele Merola

Giorgio Pellegrino

Hadyan Andika

पब्लिश किया गया: 28 जनवरी, 2025

इस केस स्टडी में बताया गया है कि Ray-Ban ने स्पिकुलेशन रूल्स एपीआई का इस्तेमाल करके, एलसीपी मेट्रिक को कैसे बेहतर बनाया. इससे, उपयोगकर्ताओं को प्री-रेंडरिंग की सुविधा मिलती है, ताकि वे आने वाले समय में पेज पर तेज़ी से नेविगेट कर सकें. साथ ही, इससे Ray-Ban के ई-कॉमर्स प्लैटफ़ॉर्म की परफ़ॉर्मेंस भी बेहतर हुई. इसकी सफलता से, Ray-Ban को परफ़ॉर्मेंस को बेहतर बनाने के लिए अन्य विकल्पों को आज़माने का बढ़ावा मिला. जैसे, पेजों को bfcache के लिए मंज़ूरी देना.

Ray-Ban, चश्मा बनाने वाला एक मशहूर ब्रैंड है. यह Aviator और Wayfarer जैसे सदाबहार स्टाइल के लिए जाना जाता है. इसमें क्लासिक डिज़ाइन को आधुनिक रुझानों के साथ ब्लेंड किया जाता है. Ray-Ban, चश्मा बनाने वाली कंपनी है. इसकी ई-कॉमर्स चैनल की मदद से, कंपनी हर साल 8 करोड़ से ज़्यादा यूनीक विज़िटर को अपनी ओर खींचती है. इससे कंपनी को अपने प्रतिस्पर्धियों से आगे रहने में मदद मिलती है.

Ray-Ban अपने कारोबार के मुख्य चैनल के तौर पर, अपने ई-कॉमर्स प्लैटफ़ॉर्म के उपयोगकर्ता अनुभव को लगातार बेहतर बना रहा है. साथ ही, वह वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली रिपोर्ट की अहमियत को समझता है. साथ ही, यह भी जानता है कि इस जानकारी का प्लैटफ़ॉर्म के उपयोगकर्ता अनुभव पर सीधा असर पड़ता है.

Ray-Ban ने क्रिटिकल यूज़र जर्नी को बेहतर बनाने के लिए, लगातार काम किया है

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

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

इस वजह से, Ray-Ban ने अपनी साइट पर उपयोगकर्ता के सफ़र को बेहतर बनाने के लिए, अनुमानित तौर पर कॉन्टेंट लोड करने की सुविधा को लागू करने का विकल्प चुना. अनुमान के आधार पर तय किए गए नियमों का इस्तेमाल, आने वाले समय में नेविगेशन के लिए पेज लोड होने की अनुमानित स्पीड को कम करने के सबसे असरदार तरीकों में से एक हो सकता है. ऐसा इसलिए, क्योंकि यह उन पेजों के कॉन्टेंट को पहले से लोड करता है और फिर उसे प्रीरेंडर करता है जिन पर उपयोगकर्ता अगले चरण में जाएगा.

Ray-Ban की, डिवाइस के हिसाब से प्री-रेंडरिंग की रणनीति

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

डेस्कटॉप पर, प्री-रेंडरिंग की सुविधा को प्रॉडक्ट लिस्टिंग पेज (पीएलपी) में प्रॉडक्ट टाइल पर कर्सर घुमाकर चालू किया जाता है. इसके लिए, "moderate" इगरीनेस सेटिंग का इस्तेमाल किया जाता है. साथ ही, टाइल की पहचान करने वाली क्लास को सिलेक्टर के तौर पर पास किया जाता है.

let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');

scriptPrerender.innerHTML = `{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "selector_matches": "a.rb-plp-product-tile__container"
          }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}`;

document.head.appendChild(scriptPrerender);

hover इवेंट, मोबाइल डिवाइसों पर असरदार तरीके से उपलब्ध नहीं है. इसलिए, पहले चार टाइलों पर immediate इगियरनेस सेटिंग का इस्तेमाल करके, पहले से रेंडर करने की सुविधा चालू की गई है. इन टाइलों पर सबसे ज़्यादा क्लिक मिले थे.

let scriptPrerender = document.createElement('script');
scriptPrerender.setAttribute('type', 'speculationrules');

scriptPrerender.innerHTML = `{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "selector_matches": "a.rb-plp-product-tile__container:nth-child(-n+5)"
          }
        ]
      },
      "eagerness": "immediate"
    }
  ]
}`;

document.head.appendChild(scriptPrerender);

नतीजों को पहले से रेंडर करना

प्री-रेंडरिंग की इन दो रणनीतियों का, Ray-Ban के पीडीपी पेजों के लिए वेबसाइट की परफ़ॉर्मेंस की जानकारी वाली मेट्रिक और कारोबार के केपीआई के रुझानों पर काफ़ी असर पड़ा.

सर्वर से दिखाए गए पीडीपी को ब्राउज़ करने वाले उपयोगकर्ताओं की कारोबार की मेट्रिक की तुलना, पहले से रेंडर किए गए पीडीपी को ब्राउज़ करने वाले उपयोगकर्ताओं की मेट्रिक से की गई. एपीआई के साथ काम करने वाले ब्राउज़र (जैसे, Chrome) का इस्तेमाल करने वाले उपयोगकर्ताओं के लिए, Adobe ट्रैकिंग वर्कस्पेस से डेटा इकट्ठा करने के बाद, Ray-Ban ने अहम सुधारों का एलान किया. इन सुधारों से पता चलता है कि उपयोगकर्ता साइट पर आसानी से नेविगेट कर सकते हैं. जिन ब्राउज़र पर प्री-रेंडर की सुविधा काम नहीं करती उनके लिए, Ray-Ban ने डेस्कटॉप पर hover इवेंट के समय और मोबाइल डिवाइसों पर PLP की पहली चार टाइल के लिए, रिसॉर्स को पहले से लोड करने का फ़ैसला लिया है.

Ray-Ban के ई-कॉमर्स प्लैटफ़ॉर्म के लिए, प्री-रेंडरिंग के लिए अनुमान के नियमों वाले एपीआई को लागू करना काफ़ी अहम साबित हुआ है. इन नई रणनीतियों की मदद से, Ray-Ban ने डेस्कटॉप और मोबाइल, दोनों पर एलसीपी में 43% की बढ़ोतरी हासिल की. इससे, उपयोगकर्ता अनुभव को काफ़ी बेहतर बनाया जा सका.

इस ऑप्टिमाइज़ेशन की मदद से, पेज तुरंत लोड होने लगे. साथ ही, मौजूदा एमपीए आर्किटेक्चर को बनाए रखते हुए, एसपीए स्टाइल आर्किटेक्चर के कई फ़ायदे भी मिले. खास तौर पर, डीपीडी जैसे अहम पेजों पर.

कारोबार के लिहाज़ से, इन बदलावों से काफ़ी फ़ायदा हुआ है. A/B टेस्टिंग से इस बात की पुष्टि हुई है:

• कन्वर्ज़न रेट में बढ़ोतरी:
  • पीडीपी पर मोबाइल कन्वर्ज़न रेट में 101.47% की ज़बर्दस्त बढ़ोतरी हुई.
  • डेस्कटॉप कन्वर्ज़न रेट में 156.16% की बढ़ोतरी हुई.
• उपयोगकर्ताओं से जुड़ाव बढ़ाना:
  • हर सेशन में देखे गए पेजों की औसत संख्या, मोबाइल पर 51.95% और डेस्कटॉप पर 65.30% बढ़ी. इससे पता चलता है कि नेविगेशन आसान हो गया है और उपयोगकर्ता की दिलचस्पी बनी हुई है. ध्यान दें: हमने पहले से रेंडर किए गए उन पेजों को "देखा गया" के तौर पर नहीं माना जो चालू नहीं थे.
• एग्ज़िट रेट में कमी आई:
  • मोबाइल पर, पेज से बाहर निकलने की दर (पेज पर आने वाले उपयोगकर्ताओं की संख्या के मुकाबले, पेज से बाहर निकलने वाले उपयोगकर्ताओं की संख्या का प्रतिशत) 13.25% और डेस्कटॉप पर 13.18% कम हो गई. इससे पता चलता है कि खरीदारी के अहम पलों में, उपयोगकर्ताओं के बने रहने की दर ज़्यादा रही.

उपयोगकर्ताओं को तुरंत नेविगेट करने की सुविधा देने के लिए, इसे ज़्यादा से ज़्यादा लोगों तक पहुंचाना

पीडीपी को पहले से रेंडर करने से मिले बेहतर नतीजों के आधार पर, Ray-Ban ने मेन्यू में पीएलपी लिंक को पहले से रेंडर करके, अनुमान के नियमों वाले एपीआई की क्षमता को बढ़ाने का फ़ैसला लिया. इस तरीके से, कैटलॉग और प्रॉडक्ट पेज, दोनों के लोड होने की स्पीड और एलसीपी को काफ़ी बेहतर बनाया जा सकता है.

प्री-रेंडरिंग की सुविधा से, आने वाले समय में नेविगेट करने में मदद मिलती है. साथ ही, Ray-Ban PLP और PDP के बीच, आगे-पीछे नेविगेट करने के बारे में भी ज़्यादा जानकारी इकट्ठा करता है. प्री-रेंडरिंग एक्सपेरिमेंट के नतीजों से पता चलता है कि ऑप्टिमाइज़ किया गया उपयोगकर्ता नेविगेशन, कारोबार की अच्छी मेट्रिक से सीधे तौर पर जुड़ा होता है. इसलिए, Ray-Ban ने बैक/फ़ॉरवर्ड कैश मेमोरी (bfcache) का भी इस्तेमाल किया.

बैक/फ़ॉरवर्ड कैश मेमोरी, ब्राउज़र का ऐसा ऑप्टिमाइज़ेशन है जो तुरंत पीछे और आगे जाने की सुविधा देता है. इसके लिए, यह ब्राउज़र इतिहास में मौजूद ज़रूरी पेजों का स्नैपशॉट मेमोरी में सेव करके, नेटवर्क का इस्तेमाल किए बिना उन्हें वापस लाता है. यह पक्का करने के लिए कि Ray-Ban के पीडीपी और पीएलपी, bfcache की ज़रूरी शर्तें पूरी करते हैं, कई अपडेट किए गए:

• unload इवेंट को बंद करता है और unload=(), bluetooth=(), andaccelerometer=() की Permissions-Policy हेडर वैल्यू का इस्तेमाल करके, डिवाइस के ब्लूटूथ और ऐक्सेलेरोमीटर एपीआई के ऐक्सेस पर पाबंदी लगाता है.
• pagehide इवेंट पर RTC और IndexedDB कनेक्शन बंद करें.
• Cache-Control: no-store रिस्पॉन्स हेडर का ग़ैर-ज़रूरी इस्तेमाल करने से बचें.

जिन PLPs पर बैक/फ़ॉरवर्ड नेविगेशन से 40% तक ट्रैफ़िक मिलता था और bfcache हिट रेट 0 था उन पर bfcache की सुविधा चालू करने से, LCP में 30% और सीएलएस में 83% का सुधार हुआ.

नतीजा

इन नतीजों से पता चलता है कि किसी ई-कॉमर्स साइट की परफ़ॉर्मेंस को बेहतर बनाने के लिए, प्री-रेंडरिंग की सुविधा का इस्तेमाल किया जा सकता है. आने वाले समय में नेविगेशन के लिए, उपयोगकर्ता के व्यवहार के आधार पर पेजों को पहले से रेंडर करके, Ray-Ban ने न सिर्फ़ वेबसाइट की परफ़ॉर्मेंस की जानकारी को बेहतर बनाया, बल्कि उपयोगकर्ता के जुड़ाव को भी बेहतर बनाया और बिक्री में बढ़ोतरी की. इस फ़ायदे से, Ray-Ban को आने वाले समय में नेविगेशन को आसान बनाने के लिए और भी ज़्यादा भरोसा मिला है. साथ ही, bfcache की मदद से बैक/फ़ॉरवर्ड नेविगेशन को भी आसान बनाने में मदद मिली है.

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

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