كيفية نجاح شركة redBus في تحسين مدى تفاعل المستخدمين مع الطلاء التالي (INP) وزيادة المبيعات بنسبة %7

ساعدت تحسينات مدى استجابة الصفحة لتفاعلات المستخدم (INP) شركة redBus في زيادة مبيعاتها بنسبة %7 تقريبًا.

Amit Kumar

Saurabh Rajpal

تتطوّر شبكة الويب وإمكاناتها بوتيرة سريعة. يمكنك الآن إنشاء تجارب غنية ومزوّدة بميزات كاملة على الويب يمكنها تحقيق الكثير من الإمكانات التي توفّرها التطبيقات المتوافقة مع الأجهزة فقط.

إنّ JavaScript هو عامل أساسي في التفاعل على الويب، ولكن في حال عدم استخدامه بعناية، قد تبدو التفاعلات بطيئة، ما قد يدفع المستخدمين إلى الاعتقاد بأنّ موقعك الإلكتروني لا يستجيب أو أنّه لا يعمل على الإطلاق. لحسن الحظ، تم إنشاء مقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP) لمعالجة هذه المشكلة المحدّدة في تجربة المستخدم.

يقيس مقياس INP جميع التفاعلات التي تتم مع الصفحة خلال دورة حياتها، ويُسجّل قيمة واحدة تمثّل سرعة استجابة الموقع الإلكتروني لبيانات المستخدم. بعبارة أخرى، إذا كان مقياس INP للصفحة يساوي الحدّ الأدنى الجيد أو أقلّ منه، يمكن القول إنّ جميع التفاعلات التي تم إجراؤها مع الصفحة سريعة بشكل موثوق.

بذل موقع redBus الإلكتروني، وهو موقع لحجز الحافلات والتذاكر ومقره في الهند، جهدًا كبيرًا لتحسين مقياس INP لموقعه الإلكتروني، حتى في الفترة التي كان فيها هذا المقياس لا يزال مقياسًا تجريبيًا. نتيجةً لجهودها، تمكّنت الشركة من زيادة المبيعات بنسبة %7، ما يوضّح مرة أخرى العلاقة بين أداء الويب وصحة النشاط التجاري. في ما يلي الإجراءات التي اتّخذتها شركة redBus لتحسين مقياس INP لموقعها الإلكتروني.

أهم الأهداف

عندما بدأت شركة redBus في تحسين INP لموقعها الإلكتروني، كان لديها ثلاثة أهداف في الاعتبار:

1. يمكنك توفير تجربة أفضل للمستخدمين من خلال التركيز على وقت استجابة التفاعل بغض النظر عن سرعة الشبكة وإمكانات الجهاز.
2. تحسين موقعهم الإلكتروني للحفاظ على سرعة التفاعلات قدر الإمكان
3. تأكَّد من أنّ الردود الواردة من واجهة برمجة التطبيقات كانت خفيفة قدر الإمكان لضمان نقل البيانات بسرعة إلى الواجهة الأمامية.

الرحلة

صنّف redBus وقت استجابة التفاعل بطريقتَين:

1. وقت استجابة التفاعل الناتج عن حظر JavaScript على جهاز العميل عندما تستخدم التفاعلات JavaScript بشكل مفرط يؤدي إلى حظر سلسلة المهام الرئيسية، يتأخّر عرض الصفحة، ويؤثّر ذلك في مقياس INP للصفحة.
2. وقت استجابة الشبكة الناتج عن طلبات البيانات من واجهة برمجة التطبيقات على الرغم من أنّ نشاط الشبكة ليس من بين العوامل التي تقيسها INP، إلا أنّ التفاعل الذي يعتمد على طلب بيانات من واجهة برمجة تطبيقات عن بُعد قد يبدو بطيئًا على الشبكات البطيئة، أو إذا أدت الطلبات إلى إرسال ردود كبيرة.

كان فريق redBus في البداية واثقًا تمامًا من أنّ مقياس INP لموقعه الإلكتروني سيكون جيدًا، ولكنّ بيانات مراقبة المستخدِمين الفعليين (RUM) لهذا المقياس في الشريحة المئوية التسعون كانت مختلفة.

كيفية قياس شركة redBus لمؤشر INP

اعتمدت redBus على web-vitals مكتبة JavaScript التي أنشأتها Google لتتبُّع جميع مقاييس تجربة المستخدم المهمة لجميع الصفحات على موقعها الإلكتروني، وليس فقط مقياس INP. بالإضافة إلى مكتبة web-vitals JavaScript، استخدمت redBus ELK لتحليل بيانات INP التي تم جمعها في الواجهة الأمامية.

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

بعد أن أنشأت redBus نظامًا لتتبُّع INP، تمكّنت من تحليل البيانات للتعرّف بشكل أفضل على مواضع بطء التفاعل.

حالات الاستخدام

عندما يبحث المستخدمون عن الأسعار على موقع redBus الإلكتروني، يمكنهم تغيير التاريخ في صفحة البحث لفلترة الأسعار المحدّدة للوجهة المطلوبة. كان التفاعل لتغيير التاريخ في هذه الصفحة بطيئًا، ما أدّى إلى ضعف مدى استجابة الصفحة لتفاعلات المستخدم (INP).

بالإضافة إلى ذلك، عندما ينتقل المستخدم بين الأسعار، يتم تحميل الأسعار الإضافية من واجهة برمجة التطبيقات بشكلٍ غير نشط. على الرغم من أنّ الانتقال للأعلى أو للأسفل لا يتم احتسابه في كيفية قياس INP، فإنّ مستمع أحداث scroll نفسه يحدّد موعدًا لتنفيذ الكثير من الأعمال التي يجب تنفيذها في سلسلة المهام الرئيسية. كان هذا العمل يتسبب في حدوث تعارض في سلسلة التعليمات الرئيسية، ما أدى إلى زيادة وقت استجابة التفاعل، ما أدّى إلى ضعف مقياس INP في صفحة البحث.

كيف حسّنت redBus ميزة INP لصفحة البحث؟

لتحسين مقياس INP لصفحة البحث، أجرت redBus العديد من التحسينات:

• تم تأخير معالِج الحدث scroll لتقليل عدد المرات التي سيتم فيها تنشيط دالة الاستدعاء للحدث في فترة معيّنة. من خلال خفض معدّل تكرار تشغيل دالة الاستدعاء لحدث scroll، تمكّنت سلسلة المحادثات الرئيسية من الاستجابة بشكل أسرع لتفاعلات المستخدمين على صفحة البحث.
• تم منح الأولوية لعملية العرض الناتجة باستخدام دالة استدعاء requestAnimationFrame. يُعلم requestAnimationFrame المتصفّح بأنّه يجب تنفيذ العمل في ردّ الاتصال قبل عرض اللقطة التالية.

بالإضافة إلى ذلك، تم إجراء التحسينات التالية على صفحة نتائج البحث:

• تم جلب دفعات جديدة من النتائج في البطاقة قبل الأخيرة في صفحة نتائج البحث لتحسين تجربة المستخدم والأداء المرئي من خلال تفعيل ميزة "التحميل البطيء" في وقت أبكر.
• تم جلب عدد أقل من النتائج في كل طلب للشبكة أثناء التحميل البطيء. من خلال تقليل عمليات الجلب من 30 إلى 10 نتائج، لوحظ انخفاض في نطاقات INP من 870 إلى 900 إلى 350 إلى 370.

على الرغم من أنّ هذه التغييرات أدّت إلى تحسين مقياس INP لصفحة البحث بشكل كبير، ظلّت المشكلة قائمة بأنّ الحدث change في حقول الإدخال في صفحة البحث سيستدعي وظيفة تقليل مُكلّفة لتعديل واجهة المستخدم. وقد أدّى ذلك إلى إعادة عرض واجهة المستخدم بشكل غير ضروري، ما أثّر في مقياس INP للصفحة.

لتحسين هذا التفاعل، عالجت redBus حالة مكوّنات الإدخال محليًا ولم تتم مزامنتها مع متجر Redux إلا عند بدء حدث blur للإدخال. وقد أدّى هذا التغيير إلى تقليل عدد عمليات إعادة التقديم وإزالة عمليات إعادة التقديم غير المرغوب فيها لواجهة المستخدم من خلال استدعاء المُخفِّض بمعدل أقل.

بعد إجراء هذا التغيير، تحسّنت معدّلات INP للصفحة بنسبة %72، ما أدّى إلى تقديم تجربة أسرع وأكثر سلاسة للمستخدمين، ما يزيد من احتمال تفاعلهم مع الصفحة.

التأثير في النشاط التجاري

من المعروف أنّ هناك علاقة بين مستوى أداء النشاط التجاري وأداء الصفحة. على الرغم من أنّ مقياس "مدى استجابة الصفحة لتفاعلات المستخدم" (INP) هو مقياس جديد نسبيًا مقارنةً بمؤشرات Core Web Vitals الأخرى، لاحظت شركة redBus نتائج أفضل للنشاط التجاري من خلال التركيز على تحسين مقياس الأداء المهم هذا الذي تركّز على المستخدم. وكانت النتيجة زيادة بنسبة% 7 في المبيعات بشكل عام.

باختصار، ساعدت تقنية INP في تقديم صورة عن مشاكل الأداء أثناء التشغيل على موقع redBus الإلكتروني. بعد معرفة أنّ هناك تحسينات يجب إجراؤها، تمكّنت شركة redBus من رصد المشكلة وإعادة إنتاجها واستخدام هذه المعلومات المهمة لإجراء تحسينات كانت مفيدة لشركة redBus ونشاطها التجاري.