چگونه Ray-Ban نرخ تبدیل را دو برابر کرد و نرخ خروج را تا 13% کاهش داد از طریق پیش اجرا با استفاده از Speculation Rules API

Daniele Merola

Giorgio Pellegrino

Hadyan Andika

تاریخ انتشار: 28 ژانویه 2025

این مطالعه موردی توضیح می‌دهد که Ray-Ban چگونه معیارهای LCP خود را با استفاده از Speculation Rules API برای سرعت بخشیدن به پیمایش‌های آینده کاربران با استفاده از اجرای پیش‌پرداخت، بهبود بخشید و چگونه این کار باعث بهبود عملکرد تجاری پلت فرم تجارت الکترونیک Ray-Ban شد. موفقیت این، سپس Ray Ban را تشویق کرد تا به گزینه‌های دیگری برای بهبود عملکرد مشابه مانند واجد شرایط ساختن صفحات برای bfcache نگاه کند.

Ray-Ban یک برند عینک نمادین است که به دلیل سبک‌های همیشگی خود مانند Aviator و Wayfarer مشهور است و طرح‌های کلاسیک را با روندهای مدرن ترکیب می‌کند. کانال تجارت الکترونیک ری بن به عنوان یکی از رهبران مشهور در زمینه عینک، نقش مهمی در تضمین رقابت پذیری شرکت ایفا می کند و سالانه بیش از 80 میلیون بازدید کننده منحصر به فرد را جذب می کند.

Ray-ban به عنوان کانال تجاری کلیدی خود، به بهبود تجربه کاربری پلتفرم تجارت الکترونیک خود ادامه می دهد و به اهمیت Core Web Vitals و تأثیر مستقیم آنها بر تجربه کاربر از پلتفرم پی می برد.

رویکرد مستمر Ray-ban برای بهبود سفر کاربر حیاتی خود

با توجه به ماهیت معماری MPA (برنامه چند صفحه ای) مورد استفاده در پلتفرم تجارت الکترونیک Ray-Ban، هر بار که کاربر با یک پیوند یا دکمه ای که نیاز به صفحه جدید دارد تعامل می کند، مرورگر یک درخواست ناوبری به سرور ارسال می کند که با یک صفحه HTML جدید پاسخ می دهد. این امر چالشی را برای Ray-Ban ایجاد می کند تا تجربه مروری روان را برای کاربران حفظ کند - به ویژه در صفحه جزئیات محصول (PDP) - که به عنوان یکی از رایج ترین نقاط ورودی شناخته شده است و بخش مهمی از قیف تبدیل است.

به لطف طراحی مجدد که اخیراً تکمیل شده است، Ray-ban شاهد بهبود معیارهای Core Web Vitals خود بود. با این حال، هنوز جا برای بهبود وجود دارد، به خصوص در مواردی که استفاده گسترده از کتابخانه های خارجی برای ارائه یک تجربه کاربری تعاملی مورد نیاز است، که متریک بزرگترین صفحه محتوایی (LCP) را در مقایسه با سایر صفحات افزایش می دهد.

به همین دلیل، Ray-Ban برای بهبود سفر حیاتی کاربر در سایت خود، بارگذاری گمانه زنی را پیاده سازی کرد. استفاده از قوانین حدس و گمان می تواند یکی از موثرترین راه حل ها برای کاهش سرعت بارگذاری درک شده صفحه برای پیمایش های آینده باشد، زیرا محتوای صفحاتی را که کاربر در مرحله بعدی بازدید می کند از قبل بارگیری می کند و سپس از قبل اجرا می کند.

استراتژی پیش رندر مخصوص دستگاه 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);

نتایج پیش اجرا

دو استراتژی پیش رندر تأثیر قابل توجهی بر معیارهای Core Web Vitals برای صفحات PDP Ray-Ban و روندهای KPIهای تجاری داشتند.

معیارهای تجاری کاربرانی که PDP ارائه شده از سرور را مرور می‌کنند با افرادی که PDP از قبل اجرا شده را مرور می‌کنند، مقایسه شد. پس از جمع‌آوری داده‌ها از فضای کاری ردیابی Adobe برای کاربران دارای مرورگرهایی که از API پشتیبانی می‌کنند (مانند کروم)، Ray-Ban پیشرفت‌های قابل توجهی را نشان داد که نشان می‌دهد کاربران می‌توانند راحت‌تر در سایت حرکت کنند. برای سایر مرورگرها، که از پیش اجرا پشتیبانی نمی‌شود، Ray-Ban تصمیم گرفت منابع را در زمان رویداد hover روی دسک‌تاپ و برای چهار کاشی اول PLP در دستگاه‌های تلفن همراه واکشی کند.

پیاده سازی Speculation Rules API برای پیش رندرینگ یک تغییر بازی برای پلتفرم تجارت الکترونیک Ray-Ban بوده است. با این استراتژی‌های نوآورانه، Ray-Ban به بهبود 43 درصدی LCP در دسک‌تاپ و موبایل دست یافت که به طور قابل توجهی تجربه کاربر را افزایش داد.

این بهینه سازی نه تنها بارگذاری صفحات تقریباً فوری را فراهم می کند، بلکه بسیاری از مزایای معماری به سبک SPA را با حفظ معماری فعلی MPA، به ویژه در صفحات مهم مانند PDP، امکان پذیر می کند.

از دیدگاه کسب و کار، همانطور که توسط تست A/B تایید شده است، بهبودها تحول آفرین بوده است:

• افزایش نرخ تبدیل:
  • نرخ تبدیل تلفن همراه در PDP ها به میزان قابل توجهی 101.47٪ افزایش یافته است.
  • نرخ تبدیل دسکتاپ افزایش چشمگیر 156.16٪ را تجربه کرد.
• افزایش تعامل کاربر:
  • میانگین صفحات مشاهده شده در هر جلسه 51.95٪ در تلفن همراه و 65.30٪ در دسکتاپ افزایش یافته است که نشان دهنده ناوبری روان تر و علاقه پایدار کاربر است. توجه: ما صفحات از قبل اجرا شده را که فعال نشده بودند به عنوان "مشاهده" در نظر نگرفتیم.
• کاهش نرخ خروج:
  • نرخ خروج (درصد از کاربرانی که از یک صفحه نسبت به بازدید از صفحه برای آن صفحه حذف می‌شوند) 13.25 درصد در تلفن همراه و 13.18 درصد در دسکتاپ کاهش یافته است که نشان‌دهنده حفظ بالاتر در زمان‌های حساس خرید است.

در حال گسترش برای ارائه ناوبری های فوری بیشتر کاربر

با توجه به نتایج عالی به‌دست‌آمده از پیش‌اجرای PDP‌ها، Ray-Ban تصمیم گرفت تا با پیش‌رندر کردن پیوندهای PLP در منو، پتانسیل API قوانین گمانه‌زنی را بیشتر به حداکثر برساند. این رویکرد بهبود قابل توجه سرعت بارگذاری و در نتیجه LCP را در هر دو نوع کاتالوگ و صفحه محصول ممکن می سازد.

در حالی که پیش رندر به ناوبری های آینده کمک می کند، Ray-Ban همچنین بخش قابل توجهی از پیمایش رفت و برگشت بین PLP و PDP را مشاهده می کند. از آنجایی که نتایج آزمایش پیش‌اجرا نشان می‌دهد که ناوبری کاربر بهینه شده مستقیماً با معیارهای تجاری خوب مرتبط است، Ray-Ban به کش عقب و جلو (bfcache) نیز توجه کرد.

bfcache یک بهینه سازی مرورگر است که با نگه داشتن یک عکس فوری از صفحات واجد شرایط در تاریخچه مرورگر در حافظه و بازیابی آنها بدون عبور از شبکه، پیمایش فوری به عقب و جلو را ارائه می دهد. برای اطمینان از اینکه PDP و PLP Ray-Ban برای bfcache واجد شرایط هستند، چندین به روز رسانی سریع انجام شد:

• رویداد unload غیرفعال کنید و دسترسی به APIهای بلوتوث و شتاب سنج دستگاه را با استفاده از مقدار سرصفحه Permissions-Policy unload=(), bluetooth=(), andaccelerometer=() محدود کنید.
• اتصالات RTC و IndexedDB را در رویداد pagehide ببندید.
• از استفاده غیر ضروری از هدر Cache-Control: no-store Response خودداری کنید.

باز کردن قفل پشتیبانی bfcache در PLP ها که در آن ناوبری به عقب/ جلو تا 40 درصد از ترافیک را تشکیل می داد در حالی که نرخ ضربه bfcache 0 بود، تقریباً 30 درصد بهبود LCP و 83 درصد بهبود CLS را به همراه داشت.

نتیجه گیری

این نتایج پتانسیل پیش اجرا را برای بهبود عملکرد یک سایت تجارت الکترونیک به طور قابل توجهی نشان می دهد. Ray-Ban با پیش رندر کردن صفحات بر اساس رفتار کاربر برای پیمایش های آینده، نه تنها Core Web Vitals را بهبود بخشید، بلکه تعامل بهتری با کاربر و افزایش فروش را نیز ارائه کرد. این مزیت تعهد Ray-ban را برای ارائه ناوبری روان نه تنها برای ناوبری های آینده، بلکه برای ناوبری های عقب و جلو ارائه شده توسط bfcache نیز تقویت کرده است.

این مطالعه موردی نشان می‌دهد که چگونه استفاده از تکنیک‌های عملکرد وب مدرن می‌تواند شکاف بین معیارهای فنی و KPIهای تجاری را پر کند و معیار جدیدی برای تجربه کاربر و موفقیت تجارت الکترونیک ایجاد کند.

تشکر ویژه از لورنزو بارتومیولی، ژیلبرتو کوکی، آلخاندرو بائزا ردوندو، بری پولارد و جرمی واگنر به خاطر مشارکتشان در این کار.