كيف ضاعفت 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، والتي تمزج بين التصاميم الكلاسيكية والموضة العصرية. بصفتها إحدى الشركات الرائدة في مجال النظارات، تلعب قناة التجارة الإلكترونية في Ray-Ban دورًا مهمًا في ضمان تنافسية الشركة، إذ تجذب أكثر من 80 مليون زائر فريد سنويًا.

وبما أنّ قناة Ray-Ban الرئيسية للنشاط التجاري هي منصة التجارة الإلكترونية، تواصل الشركة تحسين تجربة المستخدم على المنصة، وتدرك أهمية "مؤشرات أداء الويب الأساسية" وتأثيرها المباشر على تجربة المستخدم على المنصة.

نهج Ray-Ban المستمر لتحسين رحلة المستخدم الرئيسية

بسبب طبيعة بنية MPA (تطبيق متعدد الصفحات) المستخدَمة على منصة التجارة الإلكترونية في Ray-Ban، في كل مرة يتفاعل فيها المستخدِم مع رابط أو زر يتطلّب صفحة جديدة، يُرسِل المتصفّح طلب تنقّل إلى الخادم الذي يستجيب بصفحة HTML جديدة. يشكّل ذلك تحديًا لشركة Ray-Ban في الحفاظ على تجربة تصفّح سلسة للمستخدمين، خاصةً على صفحة تفاصيل المنتج (PDP)، والتي تم تحديدها كإحدى نقاط الدخول الأكثر استخدامًا وجزءًا مهمًا من مسار الإحالة الناجحة.

بفضل عملية إعادة التصميم التي اكتملت مؤخرًا، شهدت Ray-Ban تحسُّنًا في مقاييس "مؤشرات أداء الويب الأساسية". ومع ذلك، لا يزال هناك مجال للتحسين، خاصةً في الحالات التي يكون فيها الاستخدام المكثّف للمكتبات الخارجية مطلوبًا لتوفير تجربة تفاعلية للمستخدم، ما يؤدي إلى زيادة مقياس "أكبر صفحة ذات محتوى" (LCP) مقارنةً بالصفحات الأخرى.

لهذا السبب، اختارت Ray-Ban تنفيذ ميزة "التحميل التوقّعي" لتحسين رحلة المستخدِم المهمة على موقعها الإلكتروني. يمكن أن يكون استخدام قواعد التوقّع أحد الحلول الأكثر فعالية لتقليل سرعة تحميل الصفحة التي يلاحظها المستخدمون في عمليات التنقّل المستقبلية، لأنّها تحمّل مسبقًا محتوى الصفحات التي سينتقل إليها المستخدمون بعد ذلك، ثم تعرِض هذا المحتوى مسبقًا.

استراتيجية التقديم المُسبَق الخاصة بالأجهزة من Ray-Ban

اتّبعت Ray-Ban استراتيجيتَي تقديم مسبق منفصلتَين لمراعاة الاختلافات في السلوك والموارد بين أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة. تم تصميم هذه الاستراتيجيات لتحسين الأداء إلى أقصى حدّ بدون التأثير في الميزات الحالية للموقع الإلكتروني أو تجربة المستخدم.

على أجهزة الكمبيوتر المكتبي، يتم تنفيذ العرض المُسبَق من خلال تمرير مؤشر الماوس فوق مربّعات المنتجات في صفحة بطاقة بيانات المنتج (PLP)، باستخدام إعداد "moderate" eagerness (الاستعداد)، وضبط فئة تعريفية للمربّعات نفسها كمحدّد.

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 لصفحات صفحة تفاصيل المنتج في Ray-Ban ومؤشرات الأداء الرئيسية للنشاط التجاري.

المصدر: بيانات مستوى عنوان URL في CrUX لصفحات صفحة تفاصيل المنتج في Aviator
الجهاز	سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP)			تغيير في معدّل الإحالات الناجحة	تغيير في معدّل الخروج	معدّل التقديم المُسبَق
الجهاز	قبل	بعد	تغيير	تغيير في معدّل الإحالات الناجحة	تغيير في معدّل الخروج	معدّل التقديم المُسبَق
الجهاز الجوّال	4.69 ثانية	‫2.66 ثانية	‎43.28%	‫+101.47%	‫-13.25%	29%
أجهزة الكمبيوتر المكتبية	3.03 ثانية	1.74 ثانية	‎42.57%	‫‎+156.16%	-13.18%	50%

تمّت مقارنة مقاييس النشاط التجاري للمستخدمين الذين يتصفّحون صفحة وصف المنتج التي يتم عرضها من الخادم بتلك التي يتصفّحون صفحة وصف المنتج التي تمّ عرضها مسبقًا. بعد جمع البيانات من مساحة عمل تتبُّع Adobe للمستخدمين الذين لديهم متصفّحات متوافقة مع واجهة برمجة التطبيقات (مثل Chrome)، رصدت Ray-Ban تحسينات كبيرة تُظهر أنّه يمكن للمستخدمين التنقّل في الموقع الإلكتروني بسلاسة أكبر. بالنسبة إلى المتصفّحات الأخرى التي لا تتيح ميزة "العرض المُسبَق"، قرّرت Ray-Ban تحميل الموارد مسبقًا في وقت حدث hover على أجهزة الكمبيوتر المكتبي، وفي أول أربع مربّعات من "لوحة المنتجات" على الأجهزة الجوّالة.

أدى استخدام Speculation Rules API للعرض المُسبَق إلى إحداث تغيير كبير في منصة التجارة الإلكترونية لشركة Ray-Ban. ومن خلال هذه الاستراتيجيات المبتكرة، حقّقت Ray-Ban تحسُّنًا بنسبة% 43 في مقياس LCP على كلّ من أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة، ما أدّى إلى تحسين تجربة المستخدم بشكلٍ كبير.

لم يؤدّ هذا التحسين إلى تحميل الصفحات بشكلٍ شبه فوري فحسب، بل وفّر أيضًا العديد من مزايا بنية تطبيقات SPA مع الحفاظ على بنية MPA الحالية، لا سيما في الصفحات المهمة، مثل صفحة وصف المنتج.

من منظور النشاط التجاري، كانت التحسينات فعّالة، كما أكّد ذلك اختبار A/B:

زيادة معدلات الإحالات الناجحة:
- ارتفعت معدلات الإحالات الناجحة على الأجهزة الجوّالة في صفحات تفاصيل المنتج بشكل كبير بنسبة 101.47%.
- شهدت معدلات الإحالات الناجحة على أجهزة الكمبيوتر المكتبي زيادةً أكثر روعةً بنسبة 156.16%.
تعزيز تفاعل المستخدمين:
- زاد متوسّط عدد الصفحات التي تمّ تصفّحها لكلّ جلسة بنسبة 51.95% على الأجهزة الجوّالة و65.30% على أجهزة الكمبيوتر المكتبي، ما يشير إلى سهولة أكبر في التنقّل واهتمام مستدام أكبر من جانب المستخدِمين. ملاحظة: لم نعتبر الصفحات التي تمّ عرضها مسبقًا ولم يتم تفعيلها على أنّها "مُشاهدة".
انخفاض معدّلات الخروج:
- انخفضت معدّلات الخروج (النسبة المئوية للمستخدمين الذين يغادرون صفحة معيّنة مقارنةً بمشاهدات الصفحة) بنسبة 13.25% على الأجهزة الجوّالة و13.18% على أجهزة الكمبيوتر المكتبي، ما يشير إلى زيادة في معدل الاحتفاظ بالعملاء خلال لحظات التسوّق المهمة.

توسيع نطاق الميزة لتوفير المزيد من عمليات التنقّل الفورية للمستخدمين

في ضوء النتائج الممتازة التي تم الحصول عليها من خلال العرض المُسبَق للصفحات المفصّلة للمنتجات، قرّرت شركة Ray-Ban الاستفادة إلى أقصى حدّ من إمكانات Speculation Rules API من خلال العرض المُسبَق للروابط المؤدية إلى صفحات قائمة المنتجات في القائمة أيضًا. يتيح هذا النهج تحسين سرعة التحميل بشكل كبير، وبالتالي سرعة عرض أكبر محتوى مرئي، لكلٍّ من أنواع كتالوجات المنتجات وصفحة المنتجات.

على الرغم من أنّ العرض المُسبَق يساعد في عمليات التنقّل المستقبلية، تلاحظ Ray-Ban أيضًا جزءًا كبيرًا من عمليات التنقّل ذهابًا وإيابًا بين صفحة المنتج في قائمة النتائج وصفحة المنتج في الصفحة. بما أنّ نتائج تجربة التقديم المُسبَق تُظهر بوضوح أنّ تنقّل المستخدِم المحسَّن يرتبط مباشرةً بمقاييس النشاط التجاري الجيدة، اطّلعت Ray-Ban أيضًا على ذاكرة التخزين المؤقت للرجوع/التقديم (bfcache).

إنّ ذاكرة التخزين المؤقت للصفحات Bfcache هي أداة تحسين للمتصفّح توفّر إمكانية الانتقال الفوري للأمام أو للخلف من خلال الاحتفاظ بلقطة شاشة للصفحات المؤهّلة في سجلّ المتصفّح في الذاكرة واستعادتها بدون المرور عبر الشبكة. لضمان أن تكون صفحتا وصف المنتج (PDP) وصفحة المنتج في صفحة تفاصيل المنتج (PLP) من Ray-Ban مؤهّلتين لاستخدام ذاكرة التخزين المؤقت bfcache، تم إجراء عدة تعديلات سريعة:

أوقِف الحدث unload وحظر الوصول إلى واجهات برمجة التطبيقات Bluetooth ومقياس التسارع للجهاز باستخدام قيمة العنوان Permissions-Policy‏ unload=(), bluetooth=(), andaccelerometer=().
أغلِق اتصالات RTC وIndexedDB في الحدث pagehide.
تجنَّب الاستخدام غير الضروري لعنوان الاستجابة Cache-Control: no-store.

عند تفعيل ميزة "التخزين المؤقت للصفحات" في صفحات المنتجات في نتائج البحث، حيث يشكّل التنقّل للخلف/للأمام ما يصل إلى% 40 من الزيارات بينما يكون معدّل نتائج "التخزين المؤقت للصفحات" 0، يؤدي ذلك إلى تحسين LCP بنسبة% 30 تقريبًا وتحسين متغيّر التصميم التراكمية (CLS) بنسبة% 83.

المصدر: بيانات مستوى عنوان URL في CrUX لصفحة "نظارات شمسية للنساء"
المقاييس	‎13-10-2024 > ‎9-11-2024	‎2024-11-24 > ‎2024-12-21	دلتا
سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP)	3725 ملي ثانية	2674 ملي ثانية	‫-28.21%
مدى استجابة الصفحة لتفاعلات المستخدم (INP)	521 ملي ثانية	395 ملي ثانية	‫-24.18%
متغيّرات التصميم التراكمية (CLS)	0.46	0.08	‫-82.61%
معدّل الاطّلاع على ميزة "التخزين المؤقت للصفحات"	0.02%	72.90%	‫+72.87pp

الخاتمة

توضّح هذه النتائج إمكانية تحسين أداء موقع التجارة الإلكترونية بشكل كبير من خلال ميزة "العرض المُسبَق". من خلال تحسين الأداء المُسبَق للصفحات استنادًا إلى سلوك المستخدِم في عمليات التنقّل المستقبلية، لم تُحسِّن Ray-Ban مؤشرات أداء الويب الأساسية فحسب، بل حقّقت أيضًا تفاعلًا أفضل مع المستخدِمين وزيادة في المبيعات. وقد عزّزت هذه الميزة التزام Ray-Ban بتوفير تجربة تنقّل سلسة ليس فقط في عمليات التنقّل المستقبلية، بل أيضًا في عمليات التنقّل للخلف أو للأمام التي يوفّرها ملف التخزين المؤقت bfcache.

تُبرز هذه الدراسة الحالة كيف يمكن أن يؤدي استخدام تقنيات أداء الويب الحديثة إلى سد الفجوة بين المقاييس الفنية ومؤشرات الأداء الرئيسية للنشاط التجاري، ما يضع معيارًا جديدًا لتجربة المستخدم ونجاح التجارة الإلكترونية.

نشكر بشكل خاص "لورنزو بارتوميلوي" و"جيلبرتو كوتشي" و"أليخاندرو بايز ريدوندو" و"باري بولارد" و"جيريمي واغنر" على مساهمتهم في هذا العمل.