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

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

Jeremy Wagner

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

ما هو تأخُّر الإدخال؟

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

الخاتمة

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

الصورة الرئيسية من Unsplash، لأحد أعمال Erik Mclean.