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

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

Amit Kumar

Saurabh Rajpal

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

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

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

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

أهم الأهداف

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

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

الرحلة

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

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

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

آلية شركة redBus لقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP)

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

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

بعد أن توفّرت شركة redBus نظامًا لتتبع مقياس INP، استطاعت تحليل البيانات لاكتساب فهم أفضل لمكان حدوث التفاعل البطيء.

لقطة شاشة لنظام تسجيل ELK الذي يُبلغ عن قيم INP لتحليلها — لقطة شاشة لنظام التسجيل الذي تستخدمه شركة redBus لتحليل قيم مقياس INP التي تم جمعها من الحقل. (انقر للحصول على نسخة أعلى دقة من هذه الصورة.)

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

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

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

سلوك التحميل الكسول المستخدَم لتحميل رسوم إضافية من واجهة برمجة التطبيقات عند التنقّل في الصفحة (انقر للحصول على نسخة من هذا الفيديو بدرجة دقة أعلى.)

الطريقة التي اتّبعتها شركة redBus لتحسين مقياس INP لصفحة البحث

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

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

لقطة شاشة للوحة الأداء في "أدوات مطوري البرامج في Chrome" تعرض الموقع الإلكتروني الخاص بـ RedBus الذي يتم فيه تنشيط طلبات معاودة الاتصال بالأحداث التي يتم تمريرها أثناء التمرير ولا يتم إيقاف هذه الطلبات والنتيجة هي حظر سلسلة التعليمات الرئيسية. — قبل: يتم تنشيط معالِجات التمرير بدون تطبيق الإيقاف على معاودة اتصال الحدث. هناك عدد كبير من مهام الحظر في سلسلة التعليمات الرئيسية، ما يؤدي إلى تأخير التفاعلات.

لقطة شاشة للوحة الأداء في "أدوات مطوري البرامج في Chrome" تعرض موقع إلكتروني RedBus الذي يُنشِط عمليات معاودة الاتصال بأحداث التمرير التي تم إيقافها والنتيجة هي أنّ سلسلة التعليمات الرئيسية أقل حظرًا لأنّ معالِجات أحداث التمرير يتم تنشيطها بمعدّل أقل بكثير. — بعد: يتم تنشيط معالِجات التمرير مع تطبيق الارتداد. ويتم تنشيط معاودة الاتصال بحدث التمرير بوتيرة أقل، ما يمنح سلسلة التعليمات الرئيسية مزيدًا من الفرص للاستجابة لتفاعلات المستخدمين.

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

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

سلوك التحميل الكسول المستخدَم لتحميل رسوم إضافية من واجهة برمجة التطبيقات عند الانتقال للأسفل أو للأعلى (انقر للحصول على نسخة من هذا الفيديو بدرجة دقة أعلى.)

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

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

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

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

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

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

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

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