إنّ تحسين مدى استجابة الصفحة لتفاعلات المستخدم (INP) على أجهزة التلفزيون الذكي وأجهزة الاستقبال الرقمية يشكّل تحديات أكثر بكثير من تلك التي تواجه المتصفّحات المتوافقة مع أجهزة الكمبيوتر المكتبي، بسبب القيود المفروضة على الدعم المحدود لواجهة برمجة التطبيقات ومواصفات النظام المتواضعة. سوف تتعرفون في دراسة الحالة هذه على الطريقة التي تمكّن بها Disney+ Hotstar في التغلّب على هذه العقبات بنجاح وحققت بالتالي فوائد تجارية كبيرة.
مع زيادة معدل استخدام أجهزة غرفة المعيشة، أدركت Disney+ Hotstar أنّ توفير تجربة تصفّح سلسة في تطبيقاتها لأجهزة التلفزيون الذكية وأجهزة الاستقبال الرقمية هو أحد متطلبات العمل المهمة. ويصعّب إصلاح مقياس INP على هذه الأجهزة أنّ أي طراز تلفزيون معيّن قد يستخدم إصدارات قديمة جدًا من المتصفّح. على سبيل المثال، يستخدم تلفزيون LG لعام 2020 الإصدار Chrome 68 الذي تم إطلاقه في عام 2018. يمكن تصنيف بعض هذه الأجهزة على أنها أجهزة منخفضة المستوى أيضًا، مما يعني أنها لا تستطيع الاستجابة للتفاعلات بنفس سرعة الأجهزة اللوحية والكمبيوتر المحمول الرئيسية.
يقارن الشكل التالي مقدار الوقت المستغرق في تحميل صفحة، بين جهاز كمبيوتر محمول تم خفض بطء وحدة المعالجة المركزية به بمقدار ست مرات عند تطبيقها في أدوات مطوّري البرامج في Chrome والتلفزيون الذكي. يتّضح مما سبق أنّ الكمبيوتر المحمول لا يزال أسرع بكثير من التلفزيون الذكي الذي تم تصنيعه مؤخرًا.
على الرغم من أنّ هذه الاختبارات أظهرت بيانات المختبر، بدأت Disney+ Hotstar في جمع البيانات الفعلية حول مدى استجابة الصفحة لتفاعلات المستخدم (INP) من مستخدمي التطبيق الفعليين باستخدام مكتبة صفحات الويب، ولاحظ أنّ% 75 من مستخدمي التطبيق قد لاحظوا مقياس INP بقيمة 675 مللي ثانية في هذا المجال، ما يُعتبر تجربة "سيئة" وفقًا لحدود مقياس INP.
تتناول دراسة الحالة هذه كيف حسّنت Disney+ Hotstar سرعة الاستجابة في تطبيقات البثّ، لا سيما على الأجهزة المنخفضة المواصفات. وحقّقت الشركة تحسّنًا بنسبة% 61 من خلال خفض قيم مقياس INP إلى 272 مللي ثانية، وهي لا تزال أعلى من الحدّ الأدنى "الجيد" الذي يُنصح به وهو 200 مللي ثانية، مع تحسّن كبير في هذا المستوى.
النتائج
استخدمت Disney+ Hotstar التطبيق في قياس أداء التطبيق باستخدام طريقة onINP من نموذج تحديد المصدر في مكتبة Web-vitals. خلال المرحلة الأولى، حدثت تحديات مختلفة، خاصةً في تحديد العنصر المستهدف الدقيق. وقد ظهرت هذه المشكلة لأنّ جميع المراجع التي تشير إلى النص الأساسي تعود إلى مكتبة تنقّل مكانية تابعة لجهة خارجية تم استخدامها مع بعض التخصيصات في تطبيق Disney+ Hotstar. تستمع هذه المكتبة فقط إلى الأحداث في نص المستند، وبالتالي تحدِّد العنصر الذي يتم التركيز عليه، وتتوقّع التركيز التالي استنادًا إلى ضغطات المفاتيح عن بُعد.
بدأت Disney+ Hotstar بحلّ مشكلة الإحالة أولاً للتعرّف على التفاعلات المسؤولة عن القيم العالية لمقياس INP (مدى استجابة الصفحة لتفاعلات المستخدم) بشكل صحيح. ولهذا السبب، سجّلت Disney+ Hotstar السمة focusKey المتوفّرة حاليًا في مكتبة التنقّل المكاني للعنصر الذي يتم التركيز عليه حاليًا، بالإضافة إلى خريطة لجميع العناصر التي يمكن التركيز عليها على الصفحة، وهي تشبه استهداف التفاعل المتوفّر في إصدار تحديد مصدر الحيوية على الويب.
focusKey مع المسار إلى العنصر الذي يشغّله.
بعد توفّر عمليات القياس والإحالة المناسبة، أظهرت نتائج البيانات الميدانية التفاعلات التالية باعتبارها الأكثر إشكالية في ما يتعلق بمقياس "مدى استجابة الصفحة لتفاعلات المستخدم" (INP):
- التنقّل في لوحة العرض الدوّارة الأفقية
- التنقّل في لوحة العرض الدوّارة العمودية
- التفاعلات أثناء التحميل الأولي للصفحة
بعد تحليل هذه التفاعلات مع لوحة الأداء في "أدوات مطوري البرامج في Chrome"، تم اكتشاف أنّ مكتبة التنقّل المكاني تقرأ مواضع جميع العناصر التي يمكن التركيز عليها وأنشأت شجرة جديدة. وهذه عملية مكلفة تؤدي إلى تقسيم التنسيق في كل تفاعل، مثل الانتقال من عنصر إلى آخر.
بالنسبة إلى الصفحة الرئيسية، تم إنشاء شجرة من خلال مكتبة التنقل المكاني على النحو التالي:
وهذا يعني أنه إذا عرض التطبيق 10 درجًا، وكان كل حاوية تحتوي على 7 بطاقات، فسيكون هناك 70 عنصرًا يمكن التركيز عليه لحاوية الحاوية، بما في ذلك عناصر التنقل. هذا عدد كبير من العناصر التفاعلية. تم أيضًا استخدام مكتبة لوحة عرض دوّارة تابعة لجهة خارجية، يمكن من خلالها الاطّلاع على أبعاد كل بطاقة أثناء التنقّل الأفقي لترجمة الحاوية، ما يزيد من وقت استجابة التفاعل.
حلّ المشاكل
كانت هناك العديد من المشكلات المختلفة التي كان يجب معالجتها جميعًا بشكل منفصل لحل مشكلات الاستجابة للتطبيق بشكل عام.
تحسينات على التنقّل في الدرج الأفقي
أنشأت Disney+ Hotstar مكتبة خاصة بها للوحة العرض الدوّارة، وهذه المكتبة لا تؤدي إلى إيقاف التنسيق باستخدام الصور المتحركة المُركّبة وقراءة الأبعاد مرة واحدة لكل شريط، بدلاً من قراءة السمات مرة واحدة لكل بطاقة.
يركز التنقل المكاني فقط على جذر العرض الدوار، وللمزيد من التنقل الأفقي، تأتي لوحة العرض الدوّارة المخصصة الخاصة بنا في الصورة. باستخدام هذا النهج، أزالت Disney+ Hotstar اعتماد التنقل المكاني ومكتبة لوحة العرض الدوّارة القديمة التي كانت تقرأ الأبعاد في كل عملية تنقُّل.
هذه هي الطريقة التي اتّبعتها شجرة التنقّل المكاني بعد هذه التحسينات.
الصور التالية هي مقارنة للأداء تم قياسها في لوحة الأداء في "أدوات مطوري البرامج في Chrome" قبل تنفيذ لوحة العرض الدوّارة وبعدها.
نتيجةً لهذا الانخفاض، شهدت Disney+ Hotstar انخفاضًا كبيرًا في مقياس INP لتطبيقها في المجال. وتمكّنت أيضًا الشركة من توفير حوالي 35 كيلوبايت (مضغوطة) من خلال إزالة المكتبة التابعة لجهة خارجية. بالإضافة إلى ذلك، سمحت هذه التحسينات أيضًا لـ Disney+ Hotstar بتقليل مدة المقياس المخصّص الذي تستخدمه هذه الميزة لقياس إجمالي وقت العرض للصفحة الرئيسية، لأنّه يتم بدء تشغيل التصاميم بوتيرة أقل بسبب انخفاض عُقد التنقّل المكاني.
تحسينات على التنقّل في العلبة العمودية
كما حسّنت Disney+ Hotstar أداء التنقل في الدرج العمودي من خلال التحميل الكسول للأطباق بدلاً من تحميلها جميعًا في المقدمة. لذلك عند تحميل الصفحة، بدلاً من تحميل 10 مثيلات من الدرج - والتي يحتوي كل منها داخليًا على مكون لوحة عرض دوّارة ومجموعة من الصور - لا يُحمِّل التطبيق سوى الدرجتين المرئيتين في إطار العرض، بالإضافة إلى الدرج الإضافي بالأعلى والأسفل. تم أيضًا تقسيم العرض إلى مهام متعدّدة باستخدام استراتيجية الأرباح الناتجة من setTimeout()، وذلك كي يتوفّر لسلسلة التعليمات الرئيسية فرص أكبر للتعامل مع تفاعلات المستخدمين.
التفاعلات أثناء التحميل الأولي للصفحة
سيكون مقياس INP مرتفعًا للتطبيقات التي تعالج عددًا كبيرًا من النصوص البرمجية أثناء تشغيل التطبيق. وذلك لأنه يتعين على المتصفح تنزيل هذه النصوص البرمجية وتحليلها وتقييمها. وبينما يحدث ذلك، ستظل سلسلة التعليمات الرئيسية مشغولة لفترة طويلة على الأرجح، ولن تتمكن من الاستجابة بسرعة لتفاعلات المستخدمين.
أدركَت Disney+ Hotstar أنّهما يعالجان نصوصًا برمجية أكثر من اللازم أثناء بدء تشغيل التطبيق (وقت استخدام شاشة البداية) من أجل زيادة سرعة تحميل الصفحات في المستقبل. وساهم ذلك في تنفيذ مهام إضافية لتقييم النصوص البرمجية، ما قد يؤثر سلبًا في مقياس INP.
لإصلاح هذه المشكلة، درست Disney+ Hotstar تحميل معظم مواد العرض ديناميكيًا، وبذلك توفِّر الوقت أثناء بدء تشغيل التطبيق. ومع ذلك، قد يؤدي ذلك إلى زيادة أوقات التحميل لعمليات الانتقال إلى الصفحات المستقبلية، لأنّه لن يتم تحميل لغة JavaScript بشكل مسبق مع هذا التغيير. لمعالجة هذه المشكلة، طوّرت Disney+ Hotstar مكتبة داخلية لأداة التحميل المسبق لمواد العرض، تحدد الصفحة التي قد تظهر بعد ذلك في تجربة المستخدم، وستحمّل مواد العرض مسبقًا لهذه الصفحة. مثلاً:
- عندما يكون المستخدم في صفحة تسجيل الدخول، ستعمل مكتبة أداة التحميل المسبق لمواد العرض على تحميل مواد العرض مسبقًا في صفحة اختيار الملف الشخصي.
- في صفحة اختيار الملف الشخصي، يتم تحميل أصول الصفحة الرئيسية.
- في الصفحة الرئيسية، يتم تحميل أصول صفحة التفاصيل.
- أخيرًا، يتم تحميل مواد العرض الخاصة بصفحة المشاهدة على صفحة التفاصيل.
ساعد تحسين تحميل مواد العرض Disney+ Hotstar في تحقيق شيئين: تخفيض INP في التطبيق (لأنّ سلسلة التعليمات الرئيسية أصبحت الآن مجانية نسبيًا لتنفيذ تفاعلات المستخدمين) وخفض استخدام الذاكرة أيضًا على الأجهزة ذات المستوى المنخفض.
أدّت هذه التغييرات إلى انخفاض بنسبة 32% في عدد INP الوارد في التقرير كما هو موضّح في لقطة الشاشة التالية.
تحسينات أخرى
اكتشفت Disney+ Hotstar أيضًا أنّ هناك مهامًا طويلة في بعض أحداث المستخدمين يمكن تقسيمها من خلال التركيز على سلسلة التعليمات الرئيسية بشكل متكرّر، وطوّرت أداة لإنشاء المهام تتيح للمستخدمين إلغاء المهمة في منتصف تنفيذها.
على سبيل المثال، عندما يتنقل المستخدم عبر بطاقات متعددة في الحاوية، يحدث ما يلي:
- يتم التركيز على البطاقة التالية.
- تتم ترجمة البطاقة إذا لزم الأمر.
- تم تحديث ميزة "تضمين كاميرا المُحاضر".
- يتم جلب المقطع الدعائي، في حال توفّره، ويبدأ التشغيل.
- يتم تنشيط أحداث "إحصاءات Google" للإجراء.
إذا ركز المستخدم أثناء هذه العملية على البطاقة التالية، فلن يلزم تنفيذ بقية الخطوات. على سبيل المثال، لن تكون هناك حاجة إلى جلب المقاطع الدعائية وتهيئة المشغّل لعنوان معيّن إذا انتقل المستخدم إلى البطاقة التالية. وبالتالي، يمكن إلغاء هذه المهام لتوفير سلسلة التعليمات الرئيسية.
تتيح أداة إنشاء مهام Disney+ Hotstar استخدام وظيفة معيّنة، وعندما تظهر مهمة أخرى في منتصف المهمة، يتم إلغاء المهمة السابقة مما يوفر لنا تنفيذ المهام غير الضرورية بسرعة.
النتائج
بشكل عام، انخفض مقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP) لتطبيق Disney+ Hotstar من 675 مللي ثانية إلى 272 مللي ثانية، ما يمثل تحسينات بنسبة 60% تقريبًا! بالإضافة إلى ذلك، انخفض وقت الاستجابة لتفاعل العلبة على وجه الخصوص من حوالي 400 ملّي ثانية إلى حوالي 100 مللي ثانية.
التأثير في النشاط التجاري: ارتفع عدد مشاهدات البطاقات أسبوعيًا من 111 إلى 226 لكل مستخدم. هذه زيادة بنسبة 100%، ما يشير إلى أن الواجهة الأسرع والأكثر استجابة تزيد احتمالية جذب المستخدمين لفترات زمنية أطول.
هذه ليست سوى البداية. وقد لم يكتفِ Disney+ Hotstar بتقديم تجربة أفضل من خلال تحسين أداء العرض والتفاعل استنادًا إلى مقياس INP، كما يتطلّع فريق الشركة إلى جعل Disney+ Hotstar تجربة استخدام سلسة للغاية للعملاء في المستقبل القريب.
نشكر "أيوش" و"أجاي" و"كيران" و"ميلان" و"ريشا" من Disney+ Hotstar لجهودهم في حل المشكلة.
شكر خاص لكل من أنكيت ماين، رئيس قسم الهندسة في Disney+ Hotstar، وراهول كريشنان بي، رئيس قسم تجربة العملاء في Disney+ Hotstar لدعم هذا العمل الإبداعي، و"جيريمي واغنر" و"جيلبرتو" و"باري بولارد" و"بريندان كيني" من Google لمراجعة دراسة الحالة هذه والمساعدة في نشرها.