قياس مدى استجابة الصفحة لتفاعلات المستخدم (INP)

1. مقدمة

هذا درس تطبيقي تفاعلي حول كيفية قياس مدى استجابة الصفحة لتفاعلات المستخدم (INP) باستخدام مكتبة web-vitals.

المتطلبات الأساسية

• معرفة بتطوير HTML وJavaScript
• ننصحك بقراءة مستندات مقياس INP على web.dev.

ما ستتعلمه

• كيفية إضافة مكتبة web-vitals إلى صفحتك واستخدام بيانات تحديد المصدر فيها
• استخدِم بيانات تحديد المصدر لتحديد مكان وكيفية البدء في تحسين مقياس INP.

المتطلبات

• جهاز كمبيوتر يمكنه استنساخ الرمز البرمجي من GitHub وتنفيذ أوامر npm
• محرِّر نصوص
• إصدار حديث من Chrome لكي تعمل جميع مقاييس التفاعل

2. طريقة الإعداد

الحصول على الرمز البرمجي وتشغيله

يمكن العثور على الرمز في مستودع web-vitals-codelabs.

1. استنسِخ المستودع في نافذة الأوامر: git clone https://github.com/GoogleChromeLabs/web-vitals-codelabs.git.
2. انتقِل إلى الدليل الذي تم نسخه: cd web-vitals-codelabs/measuring-inp.
3. تثبيت التبعيات: npm ci
4. ابدأ خادم الويب: npm run start.
5. انتقِل إلى http://localhost:8080/ في المتصفّح.

تجربة الصفحة

يستخدم هذا الدرس التطبيقي حول الترميز موقع Gastropodicon (وهو موقع مرجعي شهير حول تشريح الحلزون) لاستكشاف المشاكل المحتملة في مقياس INP.

حاوِل التفاعل مع الصفحة لمعرفة التفاعلات البطيئة.

3- التعرّف على "أدوات مطوّري البرامج في Chrome"

افتح "أدوات المطوّرين" من القائمة مزيد من الأدوات > أدوات المطوّرين، أو من خلال النقر بزر الماوس الأيمن على الصفحة واختيار فحص، أو من خلال استخدام اختصار لوحة المفاتيح.

في هذا الدرس العملي، سنستخدم كلاً من لوحة الأداء ووحدة التحكّم. يمكنك التبديل بين هذه اللغات في علامات التبويب أعلى DevTools في أي وقت.

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

4. تثبيت مكتبة web-vitals

web-vitals هي مكتبة JavaScript لقياس مقاييس Web Vitals التي يختبرها المستخدمون. يمكنك استخدام المكتبة لتسجيل هذه القيم، ثم إرسالها إلى نقطة نهاية خاصة بالإحصاءات لتحليلها لاحقًا، وذلك لتحديد وقت حدوث التفاعلات البطيئة ومكان حدوثها.

هناك عدة طرق مختلفة لإضافة المكتبة إلى صفحة. ستعتمد طريقة تثبيت المكتبة على موقعك الإلكتروني على كيفية إدارة التبعيات وعملية التصميم وعوامل أخرى. يُرجى الاطّلاع على مستندات المكتبة لمعرفة جميع الخيارات المتاحة لك.

سيتم تثبيت هذا الدرس التطبيقي حول الترميز من npm وتحميل النص البرمجي مباشرةً لتجنُّب الخوض في عملية التصميم معيّنة.

يتوفّر إصداران من web-vitals يمكنك استخدامهما:

• يجب استخدام الإصدار "العادي" إذا كنت تريد تتبُّع قيم مقاييس Core Web Vitals عند تحميل صفحة.
• تضيف النسخة التجريبية "تحديد المصدر" معلومات إضافية عن تصحيح الأخطاء إلى كل مقياس لتشخيص سبب حصول المقياس على القيمة التي يحصل عليها.

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

أضِف web-vitals إلى devDependencies المشروع من خلال تنفيذ npm install -D web-vitals

إضافة web-vitals إلى الصفحة:

أضِف نسخة تحديد المصدر من النص البرمجي إلى أسفل index.html وسجِّل النتائج في وحدة التحكّم:

<script type="module">
  import {onINP} from './node_modules/web-vitals/dist/web-vitals.attribution.js';

  onINP(console.log);
</script>

للتجربة:

حاوِل التفاعل مع الصفحة مرة أخرى مع إبقاء وحدة التحكّم مفتوحة. عند النقر على الصفحة، لا يتم تسجيل أي شيء.

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

توفّر web-vitals الخيار reportAllChanges لإعداد تقارير أكثر تفصيلاً. عند تفعيل هذا الخيار، لا يتم تسجيل كل تفاعل، ولكن يتم تسجيل كل تفاعل أبطأ من أي تفاعل سابق.

جرِّب إضافة الخيار إلى النص البرمجي والتفاعل مع الصفحة مرة أخرى:

<script type="module">
  import {onINP} from './node_modules/web-vitals/dist/web-vitals.attribution.js';

  onINP(console.log, {reportAllChanges: true});
</script>

أعِد تحميل الصفحة، وسيتم الآن إرسال التفاعلات إلى وحدة التحكّم، وسيتم تعديلها كلما ظهر تفاعل جديد هو الأبطأ. على سبيل المثال، جرِّب الكتابة في مربّع البحث ثم حذف الإدخال.

5- ما هي المعلومات التي تتضمّنها عملية تحديد المصدر؟

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

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

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

تتوفّر هذه المعلومات ذات المستوى الأعلى في كلّ من الإصدارات العادية وإصدارات تحديد المصدر من مقاييس Web Vitals:

{
  name: 'INP',
  value: 344,
  rating: 'needs-improvement',
  entries: [...],
  id: 'v4-1715732159298-8028729544485',
  navigationType: 'reload',
  attribution: {...},
}

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

لمعرفة ما يحدث خلال هذا الوقت، نهتم بشكل خاص بالسمة attribution. لإنشاء بيانات تحديد المصدر، يحدّد web-vitals إطار الرسوم المتحركة الطويل (LoAF) الذي يتداخل مع حدث ناتج عن النقر. يمكن أن يوفّر إطار LoAF بعد ذلك بيانات تفصيلية حول كيفية قضاء الوقت خلال هذا الإطار، بدءًا من النصوص البرمجية التي تم تنفيذها، وصولاً إلى الوقت المستغرَق في requestAnimationFrame معاودة الاتصال والنمط والتنسيق.

وسِّع السمة attribution للاطّلاع على مزيد من المعلومات. البيانات أكثر تفصيلاً.

attribution: {
  interactionTargetElement: Element,
  interactionTarget: '#confirm',
  interactionType: 'pointer',

  inputDelay: 27,
  processingDuration: 295.6,
  presentationDelay: 21.4,

  processedEventEntries: [...],
  longAnimationFrameEntries: [...],
}

أولاً، هناك معلومات حول المحتوى الذي تم التفاعل معه:

• ‫interactionTargetElement: مرجع مباشر إلى العنصر الذي تم التفاعل معه (إذا لم تتم إزالة العنصر من DOM).
• ‫interactionTarget: أداة اختيار للعثور على العنصر داخل الصفحة

بعد ذلك، يتم تقسيم التوقيت بطريقة عامة:

• inputDelay: هو الوقت بين بدء تفاعل المستخدِم (على سبيل المثال، النقر بالماوس) وبدء تشغيل متتبِّع الأحداث لهذا التفاعل. في هذه الحالة، كان تأخير الإدخال يبلغ 27 ملي ثانية فقط، حتى مع تفعيل ميزة الحدّ من سرعة وحدة المعالجة المركزية.
• ‫processingDuration: الوقت الذي تستغرقه أدوات معالجة الأحداث لتنفيذ العملية بالكامل في كثير من الأحيان، تحتوي الصفحات على أدوات معالجة متعددة لحدث واحد (على سبيل المثال، pointerdown وpointerup وclick). وإذا تم تشغيلها كلها في إطار الرسوم المتحركة نفسه، سيتم دمجها في هذا الوقت. في هذه الحالة، تستغرق مدة المعالجة 295.6 ملي ثانية، وهي الجزء الأكبر من وقت INP.
• ‫presentationDelay: هو الوقت المنقضي منذ اكتمال أدوات معالجة الأحداث إلى أن ينتهي المتصفّح من عرض الإطار التالي. في هذه الحالة، تبلغ المدة 21.4 ملي ثانية.

يمكن أن تكون مراحل INP هذه إشارة مهمة لتشخيص ما يجب تحسينه. يتضمّن دليل تحسين مقياس INP مزيدًا من المعلومات حول هذا الموضوع.

بالتعمّق قليلاً، يحتوي processedEventEntries على خمسة أحداث، على عكس الحدث الفردي في مصفوفة INP ذات المستوى الأعلى entries. ما الفرق بينهما؟

processedEventEntries: [
  {
    name: 'mouseover',
    entryType: 'event',
    startTime: 1801.6,
    duration: 344,
    processingStart: 1825.3,
    processingEnd: 1825.3,
    cancelable: true
  },
  {
    name: 'mousedown',
    entryType: 'event',
    startTime: 1801.6,
    duration: 344,
    processingStart: 1825.3,
    processingEnd: 1825.3,
    cancelable: true
  },
  {name: 'mousedown', ...},
  {name: 'mouseup', ...},
  {name: 'click', ...},
],

الإدخال على أعلى مستوى هو حدث the INP، وهو في هذه الحالة نقرة. تمثّل سمات processedEventEntries جميع الأحداث التي تمت معالجتها خلال الإطار نفسه. لاحظ أنّه يتضمّن أحداثًا أخرى، مثل mouseover وmousedown، وليس حدث النقر فقط. يمكن أن تكون معرفة هذه الأحداث الأخرى أمرًا حيويًا إذا كانت بطيئة أيضًا، لأنّها ساهمت جميعًا في بطء الاستجابة.

أخيرًا، هناك مصفوفة longAnimationFrameEntries. قد يكون هذا إدخالاً واحدًا، ولكن هناك حالات يمكن أن ينتشر فيها التفاعل على مستوى إطارات متعدّدة. في ما يلي أبسط حالة مع إطار واحد طويل للرسوم المتحركة.

longAnimationFrameEntries

توسيع إدخال LoAF:

longAnimationFrameEntries: [{
  name: 'long-animation-frame',
  startTime: 1823,
  duration: 319,

  renderStart: 2139.5,
  styleAndLayoutStart: 2139.7,
  firstUIEventTimestamp: 1801.6,
  blockingDuration: 268,

  scripts: [{...}]
}],

تتوفّر هنا عدة قيم مفيدة، مثل تقسيم مقدار الوقت المستغرَق في تصميم الأنماط. تتضمّن مقالة Long Animation Frames API المزيد من التفاصيل حول هذه السمات. في الوقت الحالي، يهمّنا بشكل أساسي السمة scripts التي تحتوي على إدخالات تقدّم تفاصيل عن النصوص البرمجية المسؤولة عن اللقطة التي تستغرق وقتًا طويلاً:

scripts: [{
  name: 'script',
  invoker: 'BUTTON#confirm.onclick',
  invokerType: 'event-listener',

  startTime: 1828.6,
  executionStart: 1828.6,
  duration: 294,

  sourceURL: 'http://localhost:8080/third-party/cmp.js',
  sourceFunctionName: '',
  sourceCharPosition: 1144
}]

في هذه الحالة، يمكننا القول إنّ الوقت تم قضاؤه بشكل أساسي في event-listener واحد تم استدعاؤه في BUTTON#confirm.onclick. يمكننا حتى الاطّلاع على عنوان URL لمصدر النص البرمجي وموضع الحرف الذي تم فيه تحديد الدالة.

طعام سفري

ما الذي يمكن تحديده بشأن هذه الحالة من بيانات تحديد المصدر؟

• تم بدء التفاعل من خلال النقر على العنصر button#confirm (من attribution.interactionTarget والسمة invoker في إدخال تحديد مصدر النص البرمجي).
• تم قضاء الوقت بشكل أساسي في تنفيذ أدوات معالجة الأحداث (من attribution.processingDuration مقارنةً بالمقياس الإجمالي value).
• يبدأ رمز متتبِّع الأحداث البطيئة من متتبِّع النقرات المحدّدة في third-party/cmp.js (من scripts.sourceURL).

هذه البيانات كافية لمعرفة الجوانب التي يجب تحسينها.

6. أدوات معالجة أحداث متعدّدة

أعِد تحميل الصفحة لكي تكون وحدة تحكّم "أدوات مطوّري البرامج" فارغة ولا يكون التفاعل مع الموافقة على ملفات تعريف الارتباط هو أطول تفاعل.

ابدأ الكتابة في مربّع البحث. ماذا تعرض بيانات تحديد المصدر؟ ما الذي يحدث برأيك؟

بيانات تحديد المصدر

أولاً، إليك نظرة عامة على مثال لاختبار العرض التوضيحي:

{
  name: 'INP',
  value: 1072,
  rating: 'poor',
  attribution: {
    interactionTargetElement: Element,
    interactionTarget: '#search-terms',
    interactionType: 'keyboard',

    inputDelay: 3.3,
    processingDuration: 1060.6,
    presentationDelay: 8.1,

    processedEventEntries: [...],
    longAnimationFrameEntries: [...],
  }
}

إنّها قيمة INP رديئة (مع تفعيل تقييد سرعة وحدة المعالجة المركزية) ناتجة عن تفاعل لوحة المفاتيح مع العنصر input#search-terms. تم قضاء معظم الوقت، أي 1061 ملي ثانية من إجمالي 1072 ملي ثانية من مقياس INP، في مدة المعالجة.

ومع ذلك، فإنّ إدخالات scripts أكثر إثارة للاهتمام.

الاحتدام في التصميم

يقدّم لنا الإدخال الأول في مصفوفة scripts بعض المعلومات السياقية القيّمة:

scripts: [{
  name: 'script',
  invoker: 'BUTTON#confirm.onclick',
  invokerType: 'event-listener',

  startTime: 4875.6,
  executionStart: 4875.6,
  duration: 497,
  forcedStyleAndLayoutDuration: 388,

  sourceURL: 'http://localhost:8080/js/index.js',
  sourceFunctionName: 'handleSearch',
  sourceCharPosition: 940
},
...]

تحدث معظم مدة المعالجة أثناء تنفيذ هذا النص البرمجي، وهو أداة معالجة input (المستدعي هو INPUT#search-terms.oninput). يتم تقديم اسم الدالة (handleSearch)، بالإضافة إلى موضع الحرف داخل ملف المصدر index.js.

هناك سمة جديدة، وهي: forcedStyleAndLayoutDuration. يشير ذلك إلى الوقت المستغرَق في استدعاء النص البرمجي حيث تم إجبار المتصفّح على إعادة تخطيط الصفحة. بعبارة أخرى، تمّ قضاء% 78 من الوقت، أي 388 ملي ثانية من أصل 497، في تنفيذ متتبِّع الأحداث هذا في عملية Layout thrashing.

يجب أن تكون هذه المشكلة من أهم المشاكل التي يجب حلّها.

المستمعون المتكرّرون

لا يتضمّن العنصران التاليان في النص البرمجي أي معلومات مميزة بشكل خاص:

scripts: [...,
{
  name: 'script',
  invoker: '#document.onkeyup',
  invokerType: 'event-listener',

  startTime: 5375.3,
  executionStart: 5375.3,
  duration: 124,

  sourceURL: 'http://localhost:8080/js/index.js',
  sourceFunctionName: '',
  sourceCharPosition: 1526,
},
{
  name: 'script',
  invoker: '#document.onkeyup',
  invokerType: 'event-listener',

  startTime: 5673.9,
  executionStart: 5673.9,
  duration: 95,

  sourceURL: 'http://localhost:8080/js/index.js',
  sourceFunctionName: '',
  sourceCharPosition: 1526
}]

كلا الإدخالَين هما مستمعان keyup، ويتم تنفيذ أحدهما بعد الآخر مباشرةً. إنّ أدوات معالجة الأحداث هي دوال مجهولة الهوية (لذلك لا يتم تسجيل أي شيء في السمة sourceFunctionName)، ولكن لا يزال لدينا ملف مصدر وموضع الحرف، لذا يمكننا العثور على مكان الرمز.

والغريب في الأمر هو أنّ كلاهما من ملف المصدر وموضع الحرف نفسهما.

انتهى الأمر بالمتصفّح إلى معالجة ضغطات مفاتيح متعدّدة في إطار صورة متحركة واحد، ما أدّى إلى تشغيل متتبِّع الأحداث هذا مرّتَين قبل أن يتم عرض محتوى الصفحة.

يمكن أن يتضاعف هذا التأثير أيضًا، فكلما استغرق مستمعو الأحداث وقتًا أطول لإكمالها، زاد عدد أحداث الإدخال الإضافية التي يمكن أن تحدث، ما يؤدي إلى إطالة مدة التفاعل البطيء.

بما أنّ هذا تفاعل بحث/إكمال تلقائي، سيكون الحدّ من ارتداد الإدخال استراتيجية جيدة لكي تتم معالجة ضغطة مفتاح واحدة على الأكثر في كل إطار.

7. تأخير عملية الإدخال

السبب النموذجي لتأخُّر الإدخال هو أنّ سلسلة التعليمات الرئيسية مشغولة، وهو الوقت المستغرَق منذ أن يتفاعل المستخدم إلى أن يتمكّن متتبِّع الأحداث من بدء معالجة التفاعل. قد يعود ذلك إلى عدة أسباب:

• يتم تحميل الصفحة ويكون مؤشر الترابط الرئيسي مشغولاً بتنفيذ العمل الأولي لإعداد نموذج المستند (DOM) وتنسيق الصفحة وتصميمها وتقييم النصوص البرمجية وتشغيلها.
• تكون الصفحة مشغولة بشكل عام، مثلاً بتنفيذ عمليات حسابية أو صور متحركة مستندة إلى نصوص برمجية أو إعلانات.
• تستغرق التفاعلات السابقة وقتًا طويلاً في المعالجة، ما يؤدي إلى تأخير التفاعلات المستقبلية، كما رأينا في المثال الأخير.

تتضمّن الصفحة التجريبية ميزة سرية، فإذا نقرت على شعار الحلزون في أعلى الصفحة، سيبدأ في التحرك وتنفيذ بعض مهام JavaScript المكثفة في سلسلة التعليمات الرئيسية.

• انقر على شعار الحلزون لبدء الصورة المتحركة.
• يتم تشغيل مهام JavaScript عندما يكون الحلزون في أسفل الارتداد. حاوِل التفاعل مع الصفحة بالقرب من أسفل معدّل الارتداد قدر الإمكان واطّلِع على أعلى قيمة يمكنك تسجيلها لمقياس INP.

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

في العديد من الصفحات، لن يكون العمل الثقيل في سلسلة التعليمات الرئيسية بهذا الشكل، ولكن هذا مثال جيد لتوضيح كيفية التعرّف عليه في بيانات تحديد مصدر INP.

في ما يلي مثال على تحديد المصدر من خلال التركيز على مربّع البحث فقط أثناء الارتداد البطيء:

{
  name: 'INP',
  value: 728,
  rating: 'poor',

  attribution: {
    interactionTargetElement: Element,
    interactionTarget: '#search-terms',
    interactionType: 'pointer',

    inputDelay: 702.3,
    processingDuration: 4.9,
    presentationDelay: 20.8,

    longAnimationFrameEntries: [{
      name: 'long-animation-frame',
      startTime: 2064.8,
      duration: 790,

      renderStart: 2065,
      styleAndLayoutStart: 2854.2,
      firstUIEventTimestamp: 0,
      blockingDuration: 740,

      scripts: [{...}]
    }]
  }
}

وكما توقّعنا، تم تنفيذ أدوات معالجة الأحداث بسرعة، حيث بلغت مدة المعالجة 4.9 ملي ثانية، وتم استغراق معظم مدة التفاعل السيئ في تأخير الإدخال، حيث استغرقت 702.3 ملي ثانية من إجمالي 728 ملي ثانية.

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

إليك بعض إدخالات النصوص البرمجية في LoAF التي ستساعدك:

scripts: [{
  name: 'script',
  invoker: 'SPAN.onanimationiteration',
  invokerType: 'event-listener',

  startTime: 2065,
  executionStart: 2065,
  duration: 788,

  sourceURL: 'http://localhost:8080/js/index.js',
  sourceFunctionName: 'cryptodaphneCoinHandler',
  sourceCharPosition: 1831
}]

على الرغم من أنّ هذه الدالة لم تكن مرتبطة بالتفاعل، إلا أنّها أبطأت إطار الرسوم المتحركة، وبالتالي تم تضمينها في بيانات LoAF التي تم ربطها بحدث التفاعل.

من خلال ذلك، يمكننا معرفة كيفية تشغيل الدالة التي أخرت معالجة التفاعل (من خلال أداة معالجة animationiteration)، والدالة المسؤولة تحديدًا، ومكانها في ملفات المصدر.

8. تأخُّر العرض: عندما يتعذّر عرض التحديث

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

أعِد تحميل الصفحة لإعادة ضبط قيمة INP مرة أخرى، ثم افتح قائمة الخطوط الثلاثة. يحدث خلل واضح عند فتحها.

كيف يبدو ذلك؟

{
  name: 'INP',
  value: 376,
  rating: 'needs-improvement',
  delta: 352,

  attribution: {
    interactionTarget: '#sidenav-button>svg',
    interactionType: 'pointer',

    inputDelay: 12.8,
    processingDuration: 14.7,
    presentationDelay: 348.5,

    longAnimationFrameEntries: [{
      name: 'long-animation-frame',
      startTime: 651,
      duration: 365,

      renderStart: 673.2,
      styleAndLayoutStart: 1004.3,
      firstUIEventTimestamp: 138.6,
      blockingDuration: 315,

      scripts: [{...}]
    }]
  }
}

في هذه الحالة، يكون تأخير العرض هو السبب الرئيسي في التفاعل البطيء. وهذا يعني أنّ أيّ شيء يحظر سلسلة التعليمات الرئيسية يحدث بعد اكتمال أدوات معالجة الأحداث.

scripts: [{
  entryType: 'script',
  invoker: 'FrameRequestCallback',
  invokerType: 'user-callback',

  startTime: 673.8,
  executionStart: 673.8,
  duration: 330,

  sourceURL: 'http://localhost:8080/js/side-nav.js',
  sourceFunctionName: '',
  sourceCharPosition: 1193,
}]

بالنظر إلى الإدخال الفردي في مصفوفة scripts، نرى أنّ الوقت يُستغرَق في user-callback من FrameRequestCallback. في هذه المرة، يحدث تأخير في العرض التقديمي بسبب عملية ردّ الاتصال requestAnimationFrame.

9. الخاتمة

تجميع بيانات تجارب المستخدمين الحقيقيين

من الجدير بالذكر أنّ كل ذلك يصبح أسهل عند النظر إلى إدخال واحد لتحديد مصدر INP من عملية تحميل صفحة واحدة. كيف يمكن تجميع هذه البيانات لتحديد المشاكل في مقياس INP استنادًا إلى بيانات الحقل؟ إنّ كمية التفاصيل المفيدة تجعل هذه العملية أكثر صعوبة.

على سبيل المثال، من المفيد جدًا معرفة عنصر الصفحة الذي يشكّل مصدرًا شائعًا للتفاعلات البطيئة. ومع ذلك، إذا كانت صفحتك تتضمّن أسماء فئات CSS مجمَّعة تتغيّر من إصدار إلى آخر، قد تختلف أدوات الاختيار web-vitals من العنصر نفسه بين الإصدارات.

بدلاً من ذلك، عليك التفكير في تطبيقك لتحديد ما هو الأكثر فائدة وكيف يمكن تجميع البيانات. على سبيل المثال، قبل إرسال بيانات تحديد المصدر باستخدام إشارات، يمكنك استبدال أداة الاختيار web-vitals بمعرّف خاص بك، استنادًا إلى المكوّن الذي يقع فيه العنصر المستهدَف أو أدوار ARIA التي يفي بها العنصر المستهدَف.

وبالمثل، قد تحتوي إدخالات scripts على تجزئة مستندة إلى الملفات في مسارات sourceURL التي تجعل من الصعب دمجها، ولكن يمكنك إزالة التجزئة استنادًا إلى عملية التصميم المعروفة قبل إعادة إرسال البيانات.

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

نسبة الفضل إلى أصحابها في كل مكان

يُعدّ تحديد المصدر المستند إلى LoAF أداة فعّالة لتصحيح الأخطاء. ويوفّر بيانات دقيقة حول ما حدث تحديدًا أثناء تفاعل INP. في كثير من الحالات، يمكن أن يشير إلى الموقع الجغرافي الدقيق في نص برمجي حيث يجب أن تبدأ جهود التحسين.

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

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

const script = document.createElement('script');
script.src = 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.iife.js';
script.onload = function () {
  webVitals.onINP(console.log, {reportAllChanges: true});
};
document.head.appendChild(script);

مزيد من المعلومات

• web.dev: مدى استجابة الصفحة لتفاعلات المستخدم
• web.dev: العثور على التفاعلات البطيئة في الحقل
• web.dev: تحسين مقياس "مدى استجابة الصفحة لتفاعلات المستخدم"
• درس تطبيقي حول الترميز بشأن فهم مقياس INP