قياس مدى استجابة الصفحة لتفاعلات المستخدم (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"

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

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

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

يمكنك أيضًا فتح كلتا اللوحةَين في الوقت نفسه إذا كان ذلك مناسبًا لك. انتقِل إلى لوحة الأداء ثم اضغط على مفتاح Escape لفتح وحدة التحكّم.

4. تثبيت علامات قياس علامات الأداء الرئيسية

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

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

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

هناك إصداران من 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 تلقائيًا إلى أن يغادر المستخدم الصفحة أو يغلقها. هذا هو السلوك المثالي لنشر إشارات المرور لشيء مثل الإحصاءات، ولكنه أقل مثالية لتصحيح الأخطاء بشكل تفاعلي.

يوفّر 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- ما هي العناصر التي تتضمّنها عملية تحديد المصدر؟

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

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

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

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

تتوفّر هذه المعلومات ذات المستوى الأعلى في كلّ من الإصدارَين العادي والإصدارَين المخصّصَين لتحديد المصدر من مؤشرات الأداء الحيوي للمواقع الإلكترونية:

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

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

لمعرفة ما يحدث خلال هذه الفترة، نحن مهتمون أكثر بالسمة attribution. لإنشاء بيانات تحديد المصدر، يبحث web-vitals عن إطار الرسوم المتحرّكة الطويلة (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', ...},
],

الإدخال من المستوى الأعلى هو الحدث 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 ملي ثانية، في عمليات إعادة ترتيب المخططات.

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

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

بشكلٍ فردي، لا يوجد شيء ملحوظ بشكلٍ خاص في إدخالَي النص البرمجي التاليَين:

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.

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

{
  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.

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

إليك بعض الإدخالات في النصوص البرمجية لميزة "الإعلانات التي تظهر خارج نطاق التصفّح":

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.

بما أنّه غالبًا ما يتم استخدام requestAnimationFrame لتشغيل JavaScript في كل إطار من الرسوم المتحركة، من السهل اعتبار أنّه يؤدي إلى تشغيل دالة استدعاء للإطار التالي، ولكنّه في الواقع يطلب دالة استدعاء قبل أن يرسم المتصفّح الإطار الحالي. وهذا يعني أنّ وقت الاستجابة البطيء لطلب requestAnimationFrame الذي يتم تشغيله من خلال تفاعل سيجعل هذا التفاعل أبطأ ومن المرجّح أن يؤدي إلى ضعف استجابة الصفحة لتفاعلات المستخدم (INP).

9. الخاتمة

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

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

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

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

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

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

نسب المحتوى إلى صاحبه في كل مكان

إنّ تحديد مصدر الإحالات الناجحة بالاستناد إلى نموذج LoAF هو أداة فعّالة لتحديد الأخطاء وإصلاحها. ويقدّم بيانات دقيقة عن ما حدث بالتحديد أثناء عملية 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: تحسين مقياس "مدى استجابة الصفحة لتفاعلات المستخدم"
• التعرّف على تطبيق Codelab لقياس مدى استجابة الصفحة لتفاعلات المستخدم (INP)