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

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

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

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

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

اكتشاف ما يواجهه المستخدمون الفعليون (البيانات الفعلية)

الانتقال إلى "إحصاءات 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

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

ثبِّت إضافة "مؤشرات أداء الويب" في 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 مكتبة JavaScript
  • تشمل web-vitals دعم INP
• إضافة Web Vitals من Chrome
  • يتضمّن هذا الخيار بيانات قياس INP المحلية وبيانات حقل INP عند توفّرها من CrUX API.
• خدمة Lighthouse
  • لوحة Lighthouse في أدوات مطوري البرامج: يتوفر قياس INP في وضع "الفترة الزمنية" في Chrome Canary (104)
  • وحدة Lighthouse npm: يتوفّر قياس INP في فترات زمنية (استخدِم محرّك الدمى للإدخال الاصطناعي)

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

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

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