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

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

Jeremy Wagner

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

ما هو تأخير عملية الإدخال؟

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

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

كيفية التفكير في تأخُّر الاستجابة للإدخال

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

نتيجةً لذلك، عليك السعي إلى تحقيق أقصر مدة تأخير ممكنة في معالجة الإدخال من أجل استيفاء الحدّ الأدنى "الجيد" لمؤشر 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، من تصوير إريك ماكلين.