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

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

Jeremy Wagner

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

إضافة Web Vitals في Chrome

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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