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

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

Jeremy Wagner

تاريخ النشر: 9 أيار (مايو) 2023

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

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

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

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

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

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

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

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

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

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

المقاييس المباشرة في لوحة "الأداء" في أدوات مطوّري البرامج

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

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

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

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

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

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

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

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

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

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

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

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

من هنا، عليك التعمّق في المشاكل التي تؤدي إلى بطء التفاعل، والتي يتم تناولها لاحقًا في هذا الدليل.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

كيفية تحديد تأخّر عرض المحتوى

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

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

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

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

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

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

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

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

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

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

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