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

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

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.