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

Brendan Kenny

Elizabeth Sweeny

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

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

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

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

ملاحظة: للاطّلاع على مزيد من المعلومات عن كيفية الاستفادة من البيانات التجريبية والميدانية، يمكنك الاطّلاع على أسباب اختلاف البيانات التجريبية عن البيانات الميدانية (وما يجب فعله حيال ذلك).

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

الانتقال إلى PageSpeed Insights

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

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

يمكن التشغيل الآلي لنفس سلسلة التفاعلات باستخدام مسارات المستخدِمين في Lighthouse. تتوفّر علامة INP في مسارات المستخدِمين اعتبارًا من الإصدار 9.6 من Lighthouse.

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

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

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

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

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