রে-ব্যান কীভাবে স্পেকুলেশন রুলস API ব্যবহার করে প্রিরেন্ডারিংয়ের মাধ্যমে রূপান্তর হারকে দ্বিগুণ করে এবং প্রস্থানের হার 13% কমিয়ে দেয়

Daniele Merola

Giorgio Pellegrino

Hadyan Andika

প্রকাশিত: জানুয়ারী 28, 2025

এই কেস স্টাডি বর্ণনা করে যে কীভাবে রে-ব্যান প্রি-রেন্ডারিং ব্যবহার করে ব্যবহারকারীদের ভবিষ্যত নেভিগেশনের গতি বাড়ানোর জন্য স্পেকুলেশন রুলস API ব্যবহার করে তার LCP মেট্রিক্সকে উন্নত করেছে এবং কীভাবে এটি Ray-Ban-এর ইকমার্স প্ল্যাটফর্মের ব্যবসায়িক কর্মক্ষমতাকে উন্নত করেছে। এর সাফল্য, তারপর রে ব্যানকে একইভাবে পারফরম্যান্সের উন্নতির জন্য অন্যান্য বিকল্পগুলি দেখতে উত্সাহিত করেছিল যেমন পৃষ্ঠাগুলিকে bfcache এর জন্য যোগ্য করে তোলা।

Ray-Ban হল একটি আইকনিক আইওয়্যার ব্র্যান্ড যা এর টাইমলেস স্টাইল যেমন Aviator এবং Wayfarer এর জন্য বিখ্যাত, আধুনিক প্রবণতার সাথে ক্লাসিক ডিজাইনের মিশ্রণ। আইওয়্যারের একজন বিখ্যাত নেতা হিসেবে, Ray-Ban-এর ইকমার্স চ্যানেল কোম্পানির প্রতিযোগিতা নিশ্চিত করতে গুরুত্বপূর্ণ ভূমিকা পালন করে, বার্ষিক 80 মিলিয়নেরও বেশি অনন্য দর্শকদের আকর্ষণ করে।

এর মূল ব্যবসায়িক চ্যানেল হিসেবে, Ray-Ban তার ইকমার্স প্ল্যাটফর্মের ব্যবহারকারীর অভিজ্ঞতা উন্নত করে চলেছে, এবং Core Web Vitals এর গুরুত্ব এবং প্ল্যাটফর্মের ব্যবহারকারীর অভিজ্ঞতার উপর তাদের সরাসরি প্রভাব উপলব্ধি করে।

তাদের সমালোচনামূলক ব্যবহারকারীর যাত্রা উন্নত করতে Ray-Ban-এর ক্রমাগত পদ্ধতি

Ray-Ban-এর ইকমার্স প্ল্যাটফর্মে ব্যবহৃত MPA (মাল্টি-পেজ অ্যাপ্লিকেশান) আর্কিটেকচারের প্রকৃতির কারণে, যখনই একজন ব্যবহারকারী একটি লিঙ্ক বা একটি বোতামের সাথে ইন্টারঅ্যাক্ট করে যার জন্য একটি নতুন পৃষ্ঠা প্রয়োজন, ব্রাউজার সার্ভারে একটি নেভিগেশন অনুরোধ পাঠায়, যা একটি নতুন HTML পৃষ্ঠার সাথে প্রতিক্রিয়া জানায়। এটি ব্যবহারকারীদের জন্য একটি মসৃণ ব্রাউজিং অভিজ্ঞতা বজায় রাখার জন্য Ray-Ban-এর জন্য একটি চ্যালেঞ্জ তৈরি করে - বিশেষ করে এর পণ্য বিবরণ পৃষ্ঠায় (PDP)- যা সর্বাধিক ব্যবহৃত এন্ট্রি পয়েন্টগুলির মধ্যে একটি হিসাবে চিহ্নিত করা হয়েছে এবং এটি রূপান্তর ফানেলের একটি গুরুত্বপূর্ণ অংশ৷

একটি সম্প্রতি সম্পূর্ণ পুনঃডিজাইন করার জন্য ধন্যবাদ, Ray-Ban তাদের Core Web Vitals মেট্রিক্সে একটি উন্নতি দেখেছে। যাইহোক, উন্নতির জন্য এখনও অবকাশ রয়েছে, বিশেষ করে এমন ক্ষেত্রে যেখানে একটি ইন্টারেক্টিভ ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য বহিরাগত লাইব্রেরিগুলির ব্যাপক ব্যবহার প্রয়োজন, যা অন্যান্য পৃষ্ঠাগুলির তুলনায় সবচেয়ে বড় বিষয়বস্তুপূর্ণ পৃষ্ঠা (LCP) মেট্রিককে বৃদ্ধি করে৷

এই কারণে, Ray-Ban তার সাইটে সমালোচনামূলক ব্যবহারকারীর যাত্রা উন্নত করার জন্য অনুমানমূলক লোডিং বাস্তবায়ন করা বেছে নিয়েছে। ভবিষ্যৎ নেভিগেশনের জন্য অনুভূত পৃষ্ঠা লোডের গতি কমানোর জন্য অনুমানমূলক নিয়মগুলি ব্যবহার করা সবচেয়ে কার্যকর সমাধানগুলির মধ্যে একটি হতে পারে, কারণ এটি ব্যবহারকারী পরবর্তীতে যে পৃষ্ঠাগুলি পরিদর্শন করবে তার বিষয়বস্তু প্রিলোড করে এবং তারপর প্রি-রেন্ডার করে৷

Ray-Ban-এর ডিভাইস-নির্দিষ্ট প্রি-রেন্ডারিং কৌশল

রে-ব্যান ডেস্কটপ এবং মোবাইল ডিভাইসের মধ্যে আচরণ এবং সম্পদের পার্থক্যের জন্য অ্যাকাউন্টে দুটি পৃথক প্রিরেন্ডারিং কৌশল গ্রহণ করেছে। এই কৌশলগুলি ওয়েবসাইটের বিদ্যমান বৈশিষ্ট্য বা ব্যবহারকারীর অভিজ্ঞতার সাথে আপস না করে কর্মক্ষমতা সর্বাধিক করার জন্য ডিজাইন করা হয়েছিল।

ডেস্কটপে, প্রোডাক্ট লিস্টিং পৃষ্ঠায় (PLP) প্রোডাক্ট টাইলসের উপর ঘোরাফেরা করে, "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);

প্রি-রেন্ডারিং ফলাফল

দুটি প্রি-রেন্ডারিং কৌশল রে-ব্যানের পিডিপি পৃষ্ঠাগুলির জন্য কোর ওয়েব ভাইটাল মেট্রিক্স এবং ব্যবসায়িক কেপিআইগুলির প্রবণতাগুলিতে একটি উল্লেখযোগ্য প্রভাব ফেলেছিল৷

উত্স: Aviator PDP পৃষ্ঠাগুলির জন্য CrUX URL-স্তরের ডেটা৷

ডিভাইস	এলসিপি			রূপান্তর হার পরিবর্তন	প্রস্থান হার পরিবর্তন	প্রি-রেন্ডার রেট
	আগে	পরে	পরিবর্তন
মোবাইল	4.69s	2.66 সেকেন্ড	43.28%	+101.47%	-13.25%	29%
ডেস্কটপ	3.03s	1.74s	42.57%	+156.16%	-13.18%	৫০%

সার্ভার থেকে পরিবেশিত পিডিপি ব্রাউজ করা ব্যবহারকারীদের ব্যবসায়িক মেট্রিক্স পূর্ব-প্রস্তুত করা পিডিপি ব্রাউজ করার সাথে তুলনা করা হয়েছে। Adobe ট্র্যাকিং ওয়ার্কস্পেস থেকে ব্যবহারকারীদের জন্য ডেটা সংগ্রহ করার পর যেগুলি API সমর্থন করে এমন ব্রাউজারগুলি (যেমন Chrome), Ray-Ban উল্লেখযোগ্য উন্নতিগুলি প্রকাশ করেছে যা প্রদর্শন করে যে ব্যবহারকারীরা আরও সহজে সাইটটি নেভিগেট করতে পারে৷ অন্যান্য ব্রাউজারগুলির জন্য, যেখানে প্রি-রেন্ডার সমর্থিত নয়, রে-ব্যান ডেস্কটপে hover ইভেন্টের সময় এবং মোবাইল ডিভাইসে PLP-এর প্রথম চারটি টাইলের জন্য সংস্থানগুলি প্রিফেচ করার সিদ্ধান্ত নিয়েছে৷

প্রি-রেন্ডারিংয়ের জন্য স্পেকুলেশন রুলস API-এর বাস্তবায়ন Ray-Ban-এর ইকমার্স প্ল্যাটফর্মের জন্য একটি গেম-চেঞ্জার হয়েছে। এই উদ্ভাবনী কৌশলগুলির মাধ্যমে, Ray-Ban ডেস্কটপ এবং মোবাইল উভয় ক্ষেত্রে LCP-তে 43% উন্নতি অর্জন করেছে, ব্যবহারকারীর অভিজ্ঞতাকে উল্লেখযোগ্যভাবে বৃদ্ধি করেছে।

এই অপ্টিমাইজেশানটি শুধুমাত্র কাছাকাছি-তাত্ক্ষণিক পৃষ্ঠা লোড প্রদান করে না, তবে এটি বর্তমান MPA আর্কিটেকচার বজায় রাখার সময় SPA-শৈলীর আর্কিটেকচারের অনেক সুবিধার অনুমতি দেয়, বিশেষ করে PDP-এর মতো সমালোচনামূলক পৃষ্ঠাগুলিতে।

একটি ব্যবসায়িক দৃষ্টিকোণ থেকে, উন্নতিগুলি রূপান্তরমূলক হয়েছে, A/B পরীক্ষার দ্বারা নিশ্চিত করা হয়েছে:

• বর্ধিত রূপান্তর হার:
  • PDP-তে মোবাইল রূপান্তরের হার উল্লেখযোগ্যভাবে 101.47% বৃদ্ধি পেয়েছে।
  • ডেস্কটপ রূপান্তর হার আরও চিত্তাকর্ষক 156.16% বৃদ্ধি পেয়েছে।
• বর্ধিত ব্যবহারকারীর ব্যস্ততা:
  • প্রতি সেশনে দেখা গড় পৃষ্ঠা মোবাইলে 51.95% এবং ডেস্কটপে 65.30% বৃদ্ধি পেয়েছে, যা মসৃণ নেভিগেশন এবং আরও টেকসই ব্যবহারকারীর আগ্রহ নির্দেশ করে। দ্রষ্টব্য: আমরা প্রি-রেন্ডার করা পৃষ্ঠাগুলিকে "দেখা" হিসাবে সক্রিয় করা হয়নি।
• প্রস্থান হার হ্রাস:
  • প্রস্থানের হার (সেই পৃষ্ঠার জন্য পৃষ্ঠা দর্শনের উপর একটি পৃষ্ঠা থেকে ব্যবহারকারীদের %) মোবাইলে 13.25% এবং ডেস্কটপে 13.18% কমেছে, ক্রিটিক্যাল কেনাকাটার মুহুর্তগুলিতে উচ্চ ধারণ প্রদর্শন করে৷

আরও তাত্ক্ষণিক ব্যবহারকারী নেভিগেশন সরবরাহ করতে প্রসারিত হচ্ছে

PDP-এর প্রি-রেন্ডারিং থেকে প্রাপ্ত চমৎকার ফলাফলের আলোকে, Ray-Ban মেনুতে PLP লিঙ্কগুলিকে প্রি-রেন্ডারিং করে স্পেকুলেশন রুলস API-এর সম্ভাবনাকে আরও বাড়ানোর সিদ্ধান্ত নিয়েছে। এই পদ্ধতিটি ক্যাটালগ এবং পণ্য পৃষ্ঠা উভয় প্রকারের লোডিং গতি-এবং এইভাবে LCP-কে উল্লেখযোগ্যভাবে উন্নত করা সম্ভব করে তোলে।

প্রি-রেন্ডারিং ভবিষ্যত নেভিগেশনে সাহায্য করার সময়, রে-ব্যান পিএলপি এবং পিডিপি-র মধ্যে পিছনে এবং পিছনে নেভিগেশনের একটি উল্লেখযোগ্য অংশও পর্যবেক্ষণ করে। যেহেতু প্রি-রেন্ডারিং পরীক্ষার ফলাফল এটি স্পষ্ট করে যে একটি অপ্টিমাইজড ব্যবহারকারী নেভিগেশন সরাসরি ভাল ব্যবসায়িক মেট্রিক্সের সাথে সম্পর্কযুক্ত, তাই Ray-Ban ব্যাক/ফরোয়ার্ড ক্যাশে (bfcache) ও দেখেছে।

bfcache হল একটি ব্রাউজার অপ্টিমাইজেশান যা ব্রাউজারের ইতিহাসে যোগ্য পৃষ্ঠাগুলির একটি স্ন্যাপশট মেমরিতে রেখে এবং নেটওয়ার্কের মধ্য দিয়ে না গিয়েই পুনরুদ্ধার করে তাত্ক্ষণিক ব্যাক এবং ফরওয়ার্ড নেভিগেশন প্রদান করে। Ray-Ban-এর PDP এবং PLP যে bfcache-এর জন্য যোগ্য তা নিশ্চিত করতে, বেশ কিছু দ্রুত আপডেট করা হয়েছিল:

• unload ইভেন্টটি অক্ষম করুন এবং unload=(), bluetooth=(), andaccelerometer=() এর Permissions-Policy হেডার মান ব্যবহার করে ডিভাইসের ব্লুটুথ এবং অ্যাক্সিলোমিটার এপিআইগুলিতে অ্যাক্সেস সীমাবদ্ধ করে।
• pagehide ইভেন্টে RTC এবং IndexedDB সংযোগ বন্ধ করুন।
• Cache-Control: no-store প্রতিক্রিয়া শিরোনাম।

PLP-তে bfcache সমর্থন আনলক করা যেখানে ব্যাক/ফরোয়ার্ড নেভিগেশন ট্রাফিকের 40% পর্যন্ত দায়ী যখন bfcache হিট রেট ছিল 0, ফলে প্রায় 30% LCP উন্নতি এবং 83% CLS উন্নতি হয়েছে।

উত্স: মহিলাদের সানগ্লাস পৃষ্ঠার জন্য CrUX URL-স্তরের ডেটা।

মেট্রিক্স	2024-10-13 > 2024-11-9	2024-11-24 > 2024-12-21	ডেল্টা
এলসিপি	3725ms	2674ms	-28.21%
আইএনপি	521ms	395ms	-24.18%
সিএলএস	0.46	0.08	-82.61%
ব্যাক/ফরওয়ার্ড ক্যাশে হিট রেট	০.০২%	72.90%	+72.87 পিপি

উপসংহার

এই ফলাফলগুলি উল্লেখযোগ্যভাবে একটি ইকমার্স সাইটের কর্মক্ষমতা উন্নত করার জন্য প্রি-রেন্ডারিংয়ের সম্ভাবনাকে চিত্রিত করে৷ ভবিষ্যত নেভিগেশনের জন্য ব্যবহারকারীর আচরণের উপর ভিত্তি করে পৃষ্ঠাগুলি প্রি-রেন্ডারিং করে, Ray-Ban শুধুমাত্র কোর ওয়েব ভাইটালকে উন্নত করেনি, বরং আরও ভাল ব্যবহারকারীর সম্পৃক্ততা এবং বিক্রয় বৃদ্ধি করেছে। এই সুবিধাটি শুধুমাত্র ভবিষ্যতের নেভিগেশনের জন্য নয়, bfcache দ্বারা প্রদত্ত ব্যাক/ফরওয়ার্ড নেভিগেশনগুলির জন্যও মসৃণ নেভিগেশন সরবরাহ করার জন্য Ray-Ban-এর প্রতিশ্রুতিকে শক্তিশালী করেছে।

এই কেস স্টাডি হাইলাইট করে যে কীভাবে আধুনিক ওয়েব পারফরম্যান্স কৌশলগুলি ব্যবহার করে প্রযুক্তিগত মেট্রিক্স এবং ব্যবসায়িক কেপিআইগুলির মধ্যে ব্যবধান পূরণ করতে পারে, ব্যবহারকারীর অভিজ্ঞতা এবং ইকমার্স সাফল্যের জন্য একটি নতুন বেঞ্চমার্ক সেট করে।

এই কাজে তাদের অবদানের জন্য লরেঞ্জো বার্তোমিওলি, গিলবার্তো কচি, আলেজান্দ্রো বেজা রেডন্ডো, ব্যারি পোলার্ড এবং জেরেমি ওয়াগনারকে বিশেষ ধন্যবাদ।