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