تحسين مهلة الإدخال

ويمكنك التعرُّف على معنى تأخير الإدخال، والتعرّف على الأساليب لتقليله للحصول على تفاعل أسرع.

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

ما معنى تأخير الإدخال؟

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

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

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

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

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

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

كيفية تقليل تأخير الإدخال

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

تجنُّب الموقتات المتكرّرة التي تبدأ عملاً مفرطًا في سلسلة التعليمات الرئيسية

هناك دالتان للموقّتات شائعة الاستخدام في JavaScript يمكن أن تساهم في تأخير الإدخال: setTimeout وsetInterval. والفرق بين الاثنين هو أن setTimeout يجدول معاودة الاتصال لتنفيذها بعد وقت محدّد. من ناحية أخرى، يحدِّد تطبيق setInterval موعدًا لمعاودة الاتصال كل n مللي ثانية إلى أن يتم إيقاف الموقّت باستخدام clearInterval.

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

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

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

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

تجنُّب المهام الطويلة

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

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

انتبه إلى تداخل التفاعل

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

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

• يمكنك إلغاء مرتدات الإدخالات للحدّ من عدد مرات تنفيذ استدعاء حدث خلال فترة زمنية معيّنة.
• يمكنك استخدام AbortController لإلغاء طلبات fetch الصادرة حتى لا تصبح سلسلة المحادثات الرئيسية مزدحمة عند التعامل مع عمليات معاودة الاتصال fetch. ملاحظة: يمكن أيضًا استخدام السمة signal لمثيل AbortController من أجل إلغاء الأحداث.

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

الخاتمة

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

صورة رئيسية من Unsplash، من إعداد إريك ماكلين