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

Brendan Kenny

Elizabeth Sweeny

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

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

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

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

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

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

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

تُستخدَم أداة "إحصاءات PageSpeed" لسحب بيانات الاستخدام الفعلي من واجهة برمجة التطبيقات Chrome User Experience (CrUX) Report API، وتقدّم نبذة عن أداء صفحتك ومصدرها على مدار آخر 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: تظهر بيانات حقل INP على مستوى الصفحة وعلى مستوى المصدر من واجهة برمجة التطبيقات CrUX API باسم "مدى استجابة الصفحة لتفاعلات المستخدم".
  • PSI API: تتوفّر واجهة برمجة التطبيقات INP على النحو التالي: INTERACTION_TO_NEXT_PAINT_MS
• web-vitals مكتبة JS
  • تتضمّن web-vitals ميزة "مدى استجابة الصفحة لتفاعلات المستخدم"
• إضافة Web Vitals في Chrome
  • يتضمّن قياس INP المحلي وبيانات حقل INP عند توفّرها من واجهة برمجة التطبيقات CrUX API
• Lighthouse
  • لوحة Lighthouse في "أدوات مطوّري البرامج": يتوفّر قياس INP في وضع "المدى الزمني" في Chrome Canary (104)
  • وحدة npm في Lighthouse: يتوفّر قياس INP في الفترات الزمنية (استخدِم puppeteer للإدخال الاصطناعي).

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

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

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