مدى استجابة الصفحة لتفاعلات المستخدم (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 الخاصة بملاحظات وآراء العملاء على الويب.

اختبِر معلوماتك

ما هو الهدف الأساسي لمقياس INP؟

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

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

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

كيف يتم تحديد "وقت الاستجابة" للتفاعل بالنسبة إلى INP؟

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

ما الفرق بين INP وFID؟

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

في أي ظروف قد لا تتوفر بيانات INP لصفحة في أدوات مثل "إحصاءات PageSpeed"؟

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

ما هي الاستراتيجية الأكثر فعالية لإعادة إنتاج التفاعلات البطيئة في بيئة معملية؟

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

هذا الاختبار من إنشاء Gemini 1.5 وراجعه فريق المراجعين. مشاركة ملاحظاتك