مدى استجابة الصفحة لتفاعلات المستخدم (INP)

التوافق مع المتصفح

  • 96
  • 96
  • x
  • x

المصدر

توضِّح بيانات استخدام Chrome أنّ% 90 من وقت المستخدِم على الصفحة يقضي بعد تحميلها، لذلك من المهم قياس الاستجابة بدقة طوال دورة حياة الصفحة. هذا ما يقيّمه مقياس INP.

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

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

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

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

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

تشرح هذه المقالة طريقة عمل مقياس INP وكيفية قياسه وتشير إلى مراجع لتحسينه.

ما هو مقياس "مدى استجابة الصفحة لتفاعلات المستخدم" (INP)؟

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

ملاحظة حول كيفية احتساب INP

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

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

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

ما هي درجة INP الجيدة؟

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

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

  • وإذا كان مقياس INP يقلّ عن أو عندما يبلغ 200 مللي ثانية، يعني ذلك أنّ صفحتك تستجيب بشكل جيد.
  • إذا زاد مقياس INP عن 200 مللي ثانية وأقل أو عند 500 مللي ثانية، يعني ذلك أن استجابة صفحتك بحاجة إلى تحسين.
  • ويعني مقياس "مدى استجابة الصفحة لتفاعلات المستخدم" (INP) الذي يزيد عن 500 مللي ثانية أنّ استجابة صفحتك سيئة.
إنّ قيم مقياس INP الجيدة هي 200 ملّي ثانية أو أقلّ، والقيم الضعيفة أكبر من 500 مللي ثانية، وأي قيمة تتراوح بين 10% و 100 ريال سعودي.

ماذا يوجد في التفاعل؟

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

غالبًا ما يكون المحرّك الأساسي للتفاعل هو JavaScript، على الرغم من أنّ المتصفّحات توفّر التفاعل من خلال عناصر التحكّم التي لا تدعمها JavaScript، مثل مربّعات الاختيار وأزرار الاختيار وعناصر التحكّم التي توفّرها خدمة CSS.

فيما يتعلق بمقياس INP، نلاحظ فقط أنواع التفاعلات التالية:

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

تحدث التفاعلات في المستند الرئيسي أو في إطارات iframe المضمّنة في المستند، مثلاً عند النقر على "تشغيل" على فيديو مضمّن. لن يكون المستخدمون النهائيون على دراية بما يتضمّنه إطار iframe أو لا. وبالتالي، يجب استخدام مقياس INP ضمن إطارات iframe لقياس تجربة المستخدم في صفحة المستوى الأعلى. تجدر الإشارة إلى أنّه لن تتمكّن واجهات برمجة تطبيقات الويب المستندة إلى JavaScript من الوصول إلى محتوى إطار iframe، لذا قد لا تتمكّن هذه واجهات برمجة التطبيقات من قياس INP ضمن إطار iframe، وسيظهر ذلك كفرق بين CrUX وRUM.

قد تتكون التفاعلات من جزأين، ولكل منهما أحداث متعددة. على سبيل المثال، تتكون ضغطة المفتاح من الأحداث keydown وkeypress وkeyup. تحتوي تفاعلات النقر على pointerup وpointerdown حدث. يتم اختيار الحدث ذي أطول مدة ضمن التفاعل باعتباره وقت استجابة التفاعل.

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

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

ما هي أوجه الاختلاف بين مقياس "مدى استجابة الصفحة لتفاعلات المستخدم" (INP) و"مهلة الاستجابة الأولى" (FID)؟

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

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

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

ماذا لو لم يتم تسجيل أي قيمة لمقياس "مدى استجابة الصفحة لتفاعلات المستخدم" (INP)؟

ومن الممكن ألا تعرض الصفحة أي قيمة لمقياس INP. قد يحدث هذا لعدة أسباب:

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

كيفية قياس INP

ويمكن قياس مدى استجابة الصفحة لتفاعلات المستخدم (INP) في المجال والمختبر من خلال مجموعة متنوعة من الأدوات.

في الميدان

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

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

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

في جلسة المعمل،

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

طريقة تحسين مقياس INP

تتوفّر مجموعة من الأدلة حول تحسين INP لإرشادك خلال عملية تحديد التفاعلات البطيئة في المجال واستخدام البيانات المختبرية للتوغّل فيها وتحسينها بعدة طرق.

سجلّ التغييرات

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

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

إذا كانت لديك ملاحظات حول هذه المقاييس، يمكنك تقديمها من خلال مجموعة Google الخاصة بملاحظات حول الإلكترونيات الشخصية.