هل صفحتك تُحمل بسرعة ولكنها تبدو بطيئة؟ المشكلة في INP
تقرير Lighthouse الخاص بك يظهر باللون الأخضر. LCP جيد. CLS جيد. الصفحة تُحمل بسرعة.
ثم تنخفض درجاتك في العالم الحقيقي. ولا تعرف السبب.
المشكلة على الأرجح هي INP. لقد حلّ Interaction to Next Paint محل FID في مارس 2024. كان FID يقيس التأخير الأول فقط. بينما يقيس INP كل تفاعل يقوم به المستخدم أثناء تواجده في صفحتك، ويقوم بالإبلاغ عن أبطأ تفاعل.
INP ليس مقياساً لسرعة التحميل. بل هو مقياس للاستجابة. إنه يجيب على سؤال واحد: عندما تنقر أو تكتب، كم من الوقت يستغرق الأمر حتى تتغير الشاشة؟
تستخدم Google هذه الفئات:
- 200 مللي ثانية أو أقل يعتبر جيداً.
- أكثر من 500 مللي ثانية يعتبر سيئاً.
يمكن للموقع أن يُحمل في ثانية واحدة ومع ذلك يفشل. التحميل السريع والاستجابة السريعة مهمتان مختلفتان.
غالباً ما تغفل أدوات Lighthouse عن INP. فـ Lighthouse لا تنقر على أزرارك، بل تقدم تقديراً فقط. قد تحصل على تقرير مختبري (lab report) أخضر ودرجة ميدانية (field score) حمراء.
لرؤية الرقم الحقيقي، استخدم هذا الكود:
import { onINP } from 'web-vitals';
onINP(function (metric) {
console.log('INP', metric.value, metric.entries);
});
يقوم هذا بتسجيل التفاعل البطيء والعنصر المحدد.
تحدث مشكلات INP لأن الخيط الرئيسي (main thread) مشغول. لا يمكن للمتصفح رسم الاستجابة (paint) حتى تنتهي مهمة JavaScript.
الأسباب الشائعة:
- معالجات أحداث (event handlers) ثقيلة تعمل عند كل نقرة.
- سكربتات الطرف الثالث مثل أدوات الدردشة أو التحليلات.
- تذبذب التخطيط (Layout thrashing) الناتج عن عمليات القراءة والكتابة المستمرة في الـ DOM.
- مهام الـ hydration الخاصة بإطارات العمل (Frameworks).
قم بإصلاح ذلك عن طريق تقسيم المهام الطويلة. اترك المتصفح "يتنفس" بين الخطوات:
async function onClick() {
doUrgentPart();
await yieldToMain();
doExpensivePart();
}
استخدم yieldToMain للسماح للمتصفح برسم واجهة المستخدم (UI) قبل بدء العمل الثقيل.
إصلاحات أخرى:
- تأجيل (Defer) السكربتات التي لا تطلب فوراً.
- مراجعة أدوات الطرف الثالث (third-party widgets).
- استخدام الـ Debounce لمعالجات الأحداث الثقيلة.
- تجميع (Batch) عمليات القراءة والكتابة في الـ DOM.
توقف عن التركيز على LCP إذا كانت درجاتك الحقيقية منخفضة. قم بقياس تفاعلاتك بدلاً من ذلك.
المصدر: https://dev.to/lamas51/your-page-loads-fast-but-still-feels-slow-its-inp-not-load-time-2gkn