مدى استجابة الصفحة لتفاعلات المستخدم (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 ريال سعودي.
تبلغ قيم INP الجيدة 200 مللي ثانية أو أقل. تتجاوز القيم السيئة 500 مللي ثانية.

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

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

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

ولأغراض تتعلق بمقياس INP، يتم رصد أنواع التفاعلات التالية فقط:

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

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

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

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

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

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

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

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

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

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

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

كيفية قياس INP

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

في الميدان

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

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

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

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

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

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

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

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

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

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

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