تشخيص التفاعلات البطيئة في المختبر يدويًا

تعرَّف على طريقة نقل البيانات الميدانية إلى المختبر لإعادة إنتاج وتحديد أسباب بطء التفاعلات من خلال الاختبار اليدوي.

Jeremy Wagner

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

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

ماذا لو لم تتوفّر لديك بيانات الحقول؟

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

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

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

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

سواء كان لديك بيانات حقل أم لا، فإن الخطوة التالية هي اختبار التفاعلات البطيئة وإعادة إنتاجها يدويًا - لأنه فقط عندما تكون قادرًا على إعادة إنتاج تفاعل بطيء، يمكنك إصلاحه.

إعادة إنتاج التفاعلات البطيئة في التمرين المعملي

وهناك عدة طرق يمكنك من خلالها إعادة إنتاج التفاعلات البطيئة في التمرين المعملي من خلال الاختبار اليدوي، ولكن فيما يلي إطار عمل يمكنك تجربته.

تسجيل عملية تتبُّع

محلّل أداء Chrome هو الأداة الموصى بها لتشخيص التفاعلات البطيئة وتحديد مشاكلها وحلّها. لإضافة ملف شخصي لتفاعل في محلّل الأداء في Chrome، اتبع الخطوات التالية:

  1. افتح الصفحة التي تريد اختبارها.
  2. افتح أدوات مطوري البرامج في Chrome وانتقِل إلى لوحة الأداء.
  3. انقر على الزر تسجيل في أعلى يمين اللوحة لبدء التتبع.
  4. نفِّذ التفاعلات التي تريد تحديد مشاكلها وحلّها.
  5. انقر على الزر تسجيل مرة أخرى لإيقاف التتبع.

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

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

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

بعد التركيز على مكان حدوث التفاعل، يساعدك مسار التفاعلات على ترتيب التفاعل والنشاط الذي حدث في مسار سلسلة المحادثات الرئيسي أسفله:

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

يمكنك الحصول على تفاصيل إضافية عن الجزء الذي استغرق وقتًا أطول من التفاعل عن طريق تمرير مؤشر الماوس فوق التكرار في مسار التفاعلات:

تلميح تمرير مؤشر الماوس فوق أحد التفاعلات كما هو موضّح في لوحة الأداء ضمن "أدوات مطوري البرامج في Chrome" يعرض التلميح مقدار الوقت الذي تم قضاؤه في التفاعل، وفي أي جزء منها، بما في ذلك تأخير إدخال التفاعل ومدة المعالجة وتأخير العرض التقديمي.
التلميح الذي يظهر عند تمرير مؤشر الماوس فوق أحد التفاعلات في مسار التفاعلات في لوحة الأداء يعرض التلميح مقدار الوقت الذي قضيته في كل جزء من التفاعل.

يمثل الجزء المخطط من التفاعل مقدار وقت التفاعل الذي تجاوز 200 ملي ثانية، وهو الحد الأقصى للقيمة "الجيدة" لـ "مدى استجابة الصفحة لتفاعلات المستخدم" (INP) على الصفحة أجزاء التفاعل المدرجة هي:

  1. مهلة الإدخال: تظهر من خلال الشارب الأيسر.
  2. مدة المعالجة: تظهر من خلال كتلة صلبة بين الشاربين الأيسر والأيمن.
  3. مهلة العرض التقديمي: تظهر من خلال الشارب الأيمن.

من هنا، تكمن مسألة التعمق في المشكلات التي تتسبب في بطء التفاعل، والتي سيتم تناولها لاحقًا في هذا الدليل.

إضافة Web Vitals في Chrome

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

بعد تثبيت الإضافة، تعرض "مؤشرات أداء الويب" بيانات التفاعل في وحدة تحكّم أدوات مطوّري البرامج في حال اتّباع الخطوات التالية:

  1. في Chrome، انقر على رمز الإضافات على يسار شريط العناوين.
  2. حدِّد موقع الإضافة "مؤشرات أداء الويب" في القائمة المنسدلة.
  3. انقر على الرمز على يسار الصفحة لفتح إعدادات الإضافة.
  4. انقر على الخيارات.
  5. فعِّل مربّع الاختيار تسجيل وحدة التحكّم في الشاشة الناتجة، ثم انقر على حفظ.

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

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

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

كيفية تحديد الجزء البطيء من التفاعل

تتكون التفاعلات من ثلاثة أجزاء: تأخير الإدخال، ومدة المعالجة، وتأخير العرض. تعتمد طريقة تحسين التفاعل لخفض "مدى استجابة الصفحة لتفاعلات المستخدم" (INP) على الصفحة التي تستغرق معظم الوقت.

كيفية تحديد التأخيرات الطويلة في الإدخال

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

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

لا يمكن أبدًا أن تكون تأخيرات الإدخال صفرًا، ولكن يمكنك التحكم في مدة تأخير الإدخال. يكمن السر في معرفة ما إذا كان هناك عمل يتم تنفيذه في سلسلة التعليمات الرئيسية، ما يمنع عمليات معاودة الاتصال في أقرب وقت ممكن.

تأخير الإدخال كما هو موضَّح في لوحة أداء Chrome. يأتي بدء التفاعل بشكلٍ كبير قبل استدعاء الحدث بسبب زيادة تأخير الإدخال بسبب تنشيط موقّت من نص برمجي تابع لجهة خارجية.
تأخُّر الإدخال بسبب مهمة تم تنشيطها من خلال موقّت من نص برمجي تابع لجهة خارجية. يعرض الجزء الأيسر من الشارب في التفاعل المعروض في مسار التفاعلات تأخّر الإدخال.

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

كيفية تحديد مُدد المعالجة الطويلة

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

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

يمكن العثور على استدعاءات أحداث باهظة الثمن من خلال رصد ما يلي في تتبُّع تفاعل معيّن:

  1. حدِّد ما إذا كانت المهمة المرتبطة باستدعاءات الحدث مهمة طويلة. للكشف عن المهام الطويلة في بيئة اختبارية بشكل أكثر موثوقية، قد تحتاج إلى تفعيل تقييد وحدة المعالجة المركزية (CPU) في لوحة الأداء، أو ربط جهاز Android من المستوى الأدنى والمتوسط واستخدام تصحيح الأخطاء عن بُعد.
  2. إذا كانت المهمة التي تشغِّل عمليات استدعاء الحدث مهمة طويلة، ابحث عن إدخالات معالج الأحداث، على سبيل المثال، الإدخالات التي تحمل أسماء مثل الحدث: نقرة، في حزمة الاستدعاء التي تحتوي على مثلث أحمر في أعلى يسار الإدخال.

يمكنك تجربة إحدى الاستراتيجيات التالية لتقليل مدة معالجة التفاعل:

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

من المفترض أن تكون هذه الاستراتيجيات قادرة على مساعدتك في تحسين عمليات معاودة الاتصال للأحداث حتى يستغرق تشغيلها وقتًا أقل.

كيفية تحديد تأخيرات العرض

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

يتم عرض طريقة العرض كما هو موضّح في لوحة الأداء في "أدوات مطوري البرامج في Chrome". يتم تنفيذ العرض بعد استدعاء الحدث لعرض الإطار التالي.
يتم عرض المهام كما هو موضَّح في محلّل أداء Chrome. يتصور الشارب الأيمن طول تأخيرات العرض التقديمي.

غالبًا ما يتكون عمل العرض من مهام مثل إعادة حساب النمط والتخطيط والطلاء والمركب، ويتم تمثيله بكتل أرجوانية وأخضر في مخطط اللهب الخاص بالمحلل. يتم تمثيل إجمالي تأخير العرض بواسطة الشارب الأيمن للتفاعل في مسار التفاعلات.

من بين جميع الأسباب المحتملة لوقت استجابة التفاعل المرتفع، قد تكون تأخيرات العرض التقديمي الأكثر صعوبة في استكشاف الأخطاء وإصلاحها وإصلاحها. قد ينتج عن العرض المفرط في عرض الإعلانات أيًا مما يلي:

  • أحجام DOM الكبيرة: غالبًا ما يزداد عمل العرض المطلوب لتعديل العرض التقديمي للصفحة مع حجم DOM للصفحة. للحصول على مزيد من المعلومات، يُرجى الاطّلاع على مدى تأثير أحجام DOM الكبيرة في التفاعل، وما يمكنك فعله بشأن ذلك.
  • عمليات إعادة التدفق الإلزامية: يحدث هذا عند تطبيق تغييرات النمط على عناصر في JavaScript، ثم الاستعلام على الفور عن نتائج ذلك العمل. وتكون النتيجة أن المتصفح يجب أن يقوم بعمل التخطيط قبل القيام بأي شيء آخر، بحيث يمكن للمتصفح إعادة الأنماط المحدثة. للمزيد من المعلومات والنصائح عن تجنُّب عمليات إعادة التدفق الإلزامية، يُرجى الاطّلاع على المقالة تجنُّب عمليات إعادة التنسيق الكبيرة والمعقّدة.
  • عمل زائد أو غير ضروري في عمليات معاودة الاتصال على requestAnimationFrame. يتم تنفيذ عمليات استدعاء requestAnimationFrame() أثناء مرحلة العرض من تكرار الحدث، ويجب إكمالها قبل عرض الإطار التالي. في حال استخدام requestAnimationFrame() لتنفيذ عمل لا يتضمّن تغييرات على واجهة المستخدم، يُرجى العِلم أنّه قد يؤدي ذلك إلى تأخير الإطار التالي.
  • استدعاءات ResizeObserver يتم تنفيذ عمليات الاستدعاء هذه قبل العرض، وقد تؤخر عرض الإطار التالي إذا كان العمل فيها مكلفًا. وكما هو الحال مع استدعاءات الأحداث، يمكنك تأجيل أي منطق غير ضروري للإطار التالي.

ماذا لو لم تتمكن من إعادة إنتاج تفاعل بطيء؟

ماذا لو أشارت بيانات الحقل إلى بطء تفاعل معيّن، ولكن لا يمكنك إعادة إنتاج المشكلة يدويًا في التمرين المعملي؟ هناك سببان لذلك.

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

  1. إذا كان لديك جهاز Android، استخدِم ميزة تصحيح الأخطاء عن بُعد لفتح مثيل "أدوات مطوري البرامج في Chrome" على جهازك المضيف ومحاولة إعادة إنتاج التفاعلات البطيئة هناك. غالبًا ما لا تكون الأجهزة المحمولة بنفس سرعة أجهزة الكمبيوتر المحمولة أو أجهزة سطح المكتب، لذلك قد تكون التفاعلات البطيئة أكثر سهولة في ملاحظة هذه الأجهزة.
  2. إذا لم يكن لديك جهاز فعلي، يمكنك تفعيل ميزة تقييد وحدة المعالجة المركزية (CPU) ضمن "أدوات مطوري البرامج في Chrome".

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

تحديد وحلّ مشاكل INP هي عملية متكررة

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

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