إتاحة أداة "سرعة عرض الاستجابة لتفاعل المستخدم" (INP)

Brendan Kenny

Elizabeth Sweeny

يسرّنا أن نعلن عن توفير الجولة الأولى من أدوات الدعم لمقياس الاستجابة المعلق الجديد، وهو مقياس "مدى استجابة الصفحة لتفاعلات المستخدم" (INP). لمعرفة المزيد عن المقياس نفسه، اطّلِع على دليل مقياس INP الرسمي.

القياس المقترَح

الهدف من قياس INP هو معرفة مدى سرعة استجابة صفحتك لبيانات المستخدم. الطريقة الوحيدة للحصول على بيانات واقعية هي قياس مدى استجابة صفحتك للمستخدمين الحقيقيين الذين يزورون موقعك الإلكتروني باستخدام البيانات من المجال.

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

التعرّف على تجارب المستخدمين الحقيقيين (البيانات الميدانية)

الانتقال إلى "إحصاءات PageSpeed"

تستخرج أداة إحصاءات PageSpeed بيانات الاستخدام الفعلي من واجهة برمجة التطبيقات لتقرير تجربة المستخدم في Chrome (CrUX)، وتقدّم نبذة عن أداء صفحتك ومصدرها خلال آخر 28 يومًا. تتضمّن هذه البيانات الآن مقياس INP:

يمكنك تجربة هذه الأداة من خلال إحصاءات PageSpeed.

جمع قيم INP الخاصة بك من الميدان

إذا أردت جمع بيانات INP لموقع إلكتروني بنفسك، فإنّ أسهل طريقة لإجراء ذلك هي استخدام مكتبة web-vitals التي تتوافق الآن بشكل كامل مع مقياس INP في إصدارها التجريبي.

import {onINP} from 'web-vitals';

onINP(({value}) => {
  // Log the value to the console, or send it to your analytics provider.
  console.log(value);
});

مزيد من المعلومات حول web-vitals وكيفية قياسه في وحدة تحكّم "أدوات مطوّري البرامج"

إضافة Web Vitals على Chrome

تقدّم إضافة Web Vitals نظرة عامة على تجربة الصفحة لدى المستخدمين (من CrUX API) والقيم في الوقت الفعلي لمؤشرات أداء الويب الأساسية والمقاييس الرئيسية للزيارة الحالية للصفحة.

ثبِّت إضافة Web Vitals في Chrome.

تشخيص مشكلة في الأداء (بيانات التمرين المعملي)

استخدام مسارات المستخدم في Lighthouse

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

يمكن أتمتة السلسلة نفسها من التفاعلات باستخدام مسارات المستخدمين في Lighthouse. تتوفّر مقياس INP في مسارات المستخدمين اعتبارًا من الإصدار 9.6 من Lighthouse.

تفاصيل توفّر الأداة

• تقرير تجربة المستخدم على Chrome (CrUX)
  • BigQuery: يتوفّر مقياس INP على شكل interaction_to_next_paint
  • واجهة برمجة التطبيقات CrUX: يتوفّر مقياس INP على شكل interaction_to_next_paint
  • لوحة بيانات CrUX: تتضمّن بيانات INP
• إحصاءات PageSpeed
  • pagespeed.web.dev: بيانات حقل INP على مستوى الصفحة ومستوى المصدر من CrUX API تظهر على أنّها "مدى استجابة الصفحة لتفاعلات المستخدم"
  • واجهة PSI API: يتوفّر مقياس INP كـ INTERACTION_TO_NEXT_PAINT_MS
• web-vitals مكتبة JavaScript
  • web-vitals يتضمّن دعمًا لمقياس INP
• إضافة Web Vitals في Chrome
  • تتضمّن قياس INP على المستوى المحلي وبيانات الاستخدام الفعلي لمقياس INP عندما تكون متاحة من CrUX API
• Lighthouse
  • لوحة Lighthouse في "أدوات مطوّري البرامج": يتوفّر قياس INP في وضع "الفترة الزمنية" في Chrome Canary‏ (104)
  • وحدة npm في Lighthouse: قياس INP متاح في الفترات الزمنية (استخدِم Puppeteer لإدخال البيانات الاصطناعية)

العمل المستقبلي وطلب الحصول على ملاحظات

من الآن فصاعدًا، ستواصل فِرق أدوات Chrome الاستثمار في إمكانات تصحيح الأخطاء واقتراحات التحسين الخاصة بمؤشر INP.

إذا كانت لديك ملاحظات حول أي شيء، بدءًا من مدى فائدة المقياس إلى سهولة قياسه، يُرجى إرسالها إلى مجموعة Google المخصّصة للملاحظات حول Web Vitals.