مقياس INP يعاقب التحليلات الثقيلة: لماذا يعمل أداة التتبع لديك على الخيط الرئيسي
Interaction to Next Paint هو مقياس Core Web Vital الذي تفشل فيه معظم المواقع، وبيانات الميدان تُظهر أن سكربتات تتبع السلوك سبب رئيسي. الحل هو إرسال عمل أقل إلى الخيط الرئيسي.
Interaction to Next Paint (INP) هو مقياس Core Web Vital الذي يفشل فيه المطوّرون أكثر من غيره، والسبب يقبع داخل وسم <head> لديك. أصبح INP مقياس Core Web Vital مستقرًا في عام 2024 ليحل محل First Input Delay، وهو يقيس ما لم يستطع FID قياسه قط: مدى بقاء الصفحة مستجيبة لكل نقرة ولمسة وضغطة مفتاح طوال دورة حياتها بأكملها.
هذا المقياس لا يرحم نوع الـ JavaScript الذي تشحنه تحليلات المراقبة. فإذا أدّى أداة التتبع لديك عملًا فعليًا على الخيط الرئيسي، فإن كل تفاعل يقوم به مستخدموك يرث تلك التكلفة.
ماذا يقيس INP فعليًا
يبلّغ INP عن زمن استجابة التفاعلات عند المئين الخامس والسبعين لجميع النقرات واللمسات وضغطات المفاتيح على الصفحة. والنتيجة 200 مللي ثانية أو أقل تُعدّ "جيدة"؛ ومن 200 إلى 500 مللي ثانية "تحتاج إلى تحسين"؛ وأكثر من 500 مللي ثانية "ضعيفة".
ينقسم كل تفاعل إلى ثلاث مراحل:
- تأخير الإدخال (input delay) — الوقت قبل أن تتمكن معالِجات الأحداث لديك من البدء أصلًا، لأن الخيط الرئيسي مشغول.
- مدة المعالجة — الوقت الذي تستغرقه دوال رد النداء لمعالِجات أحداثك للتنفيذ.
- تأخير العرض (presentation delay) — الوقت من انتهاء دالة رد النداء حتى يرسم المتصفح الإطار التالي.
تضرّ التحليلات الثقيلة بالمراحل الثلاث جميعها. فأداة التتبع التي تحلّل حزمة كبيرة، أو تُقيّم منطق الموافقة، أو تجمّع طابور tag manager، أو تقرأ التخطيط لبناء بصمة، تشغل الخيط الرئيسي في اللحظة نفسها التي يحاول فيها المستخدم التفاعل.
المهام الطويلة هي الآلية
لا يستطيع المتصفح معالجة تفاعل بينما تعمل مهمة ما. وأي مهمة تدوم أكثر من 50 مللي ثانية هي مهمة طويلة (long task)، والجزء الزائد عن 50 مللي ثانية هو وقت ميت تتراكم خلاله النقرات في الطابور.
إن tag manager الذي يحمّل وينفّذ بشكل متزامن عشرات من سكربتات الموردين يُنتج سلسلة متتالية من المهام الطويلة. ينقر المستخدم، فلا يحدث شيء، فينقر مجددًا — وحين يتحرّر الخيط الرئيسي أخيرًا، تنطلق المدخلات المتراكمة كلها دفعة واحدة.
وهذا ليس نظريًا. وجد تقرير Web Almanac لعام 2024 من HTTP Archive أن الصفحات التي تحمل سكربتات سلوك المستخدم — إعادة تشغيل الجلسة، والخرائط الحرارية، والتحليلات السلوكية — بلغت INP جيدًا في 37% فقط من الحالات على الهاتف المحمول، مقابل 60% على سطح المكتب. أما سكربتات إدارة الموافقة — وهي اللافتات التي تتطلبها تلك الأدوات — فقد اجتازت INP على 53% فقط من صفحات الهاتف المحمول. فالأدوات التي يُفترض أنها "تفهم المستخدمين" تُدهور تجربتهم فعليًا.
البنية التي تتجنب ذلك
الحل بنيوي، وليس مفتاحًا تشغّله. أرسل كودًا أقل، وأبقِه بعيدًا عن المسار الحرج.
يمكن أن تكون أداة تتبع تراعي الخصوصية أولًا صغيرة بما يكفي بحيث لا يُسجَّل تحليلها وتنفيذها أبدًا كمهمة طويلة. أداة التتبع من Monoid تبلغ نحو 2 كيلوبايت، ولا تعتمد على أي اعتماديات، ولا تضع ملفات تعريف ارتباط، ولا تقرأ التخطيط — فلا يوجد ما يُبصَم ولا شيء ثقيل لتنفيذه. تسجّل مشاهدة صفحة بطلب keepalive واحد، وتبقى خاملة فيما عدا ذلك:
fetch('/collect', {
method: 'POST',
keepalive: true,
body: JSON.stringify({ site_id, path: location.pathname })
})
تتيح keepalive: true للطلب أن يبقى بعد انتهاء الصفحة دون احتجاز الخيط الرئيسي، فلا يُحجَب التنقل و unload أبدًا في انتظار منارة (beacon).
وحين تشغّل سكربتاتك الخاصة، تنازل عن الخيط الرئيسي بين كتل العمل كي تتمكن التفاعلات المتراكمة من العمل:
async function processQueue(items) {
for (const item of items) {
handle(item)
if (navigator.scheduling?.isInputPending?.()) {
await scheduler.yield()
}
}
}
تقسّم scheduler.yield() المهمة الطويلة إلى أجزاء وتستأنف بأولوية، بحيث لا يستطيع سكربت طرف ثالث أن يتجاوز استئنافك في الطابور.
قِسه في الميدان لا في المختبر
لا يستطيع Lighthouse الإبلاغ عن INP، لأن INP لا يوجد إلا حين يتفاعل شخص حقيقي. أدوات المختبر تُقدّر؛ وهي لا تقيس الاستجابة.
استخدم بيانات الميدان. يجمّع Chrome User Experience Report (CrUX) التفاعلات الحقيقية لمستخدمي Chrome الذين اختاروا المشاركة، ويعرض تقرير Core Web Vitals في Search Console البيانات نفسها لكل مجموعة من عناوين URL. فإذا كان INP في CrUX جيدًا بينما Total Blocking Time في المختبر مرتفعًا، فلديك هامش؛ وإذا كان INP في CrUX ضعيفًا، فإن مستخدميك يشعرون بذلك فعلًا.
تتلاقى هنا حجة الخصوصية وحجة الأداء. فأداة التتبع التي لا تقرأ أي تخزين، ولا تبني بصمة، ولا تشحن سلسلة موردين، لا تكاد تفعل شيئًا على الخيط الرئيسي — ولهذا تحديدًا لا تظهر أبدًا في INP لديك. المراقبة باهظة التكلفة بالمللي ثانية، لا بالثقة وحدها.
Comments
Loading comments…