إصلاح INP: كيف تمنع تطبيقات React من الشعور بالبطء
لوحة التحكم الخاصة بك تبدو بطيئة. واجهة برمجة التطبيقات (API) سريعة. Lighthouse تظهر نتائج خضراء. ومع ذلك، كل نقرة تعاني من تأخير.
هذه مشكلة INP.
يقيس مقياس Interaction to Next Paint (INP) المدة التي تستغرقها الصفحة للاستجابة للمستخدم. وقد حل محل First Input Delay (FID) في مارس 2024. كان FID يركز فقط على النقرة الأولى؛ أما INP فيراقب كل تفاعل.
درجة INP أقل من 200 مللي ثانية تبدو سريعة. أما أكثر من 500 مللي ثانية فتبدو بطيئة.
لإصلاح INP، قم بتقسيمه إلى ثلاث مراحل:
- Input Delay – الفجوة بين النقرة وبداية تشغيل الكود الخاص بك. تظهر هذه الفجوة عندما يكون الخيط الرئيسي (main thread) مشغولاً.
- Processing Time – المدة التي تستغرقها وظائفك وتحديثات حالة React (state updates).
- Presentation Delay – الفجوة بين انتهاء الكود الخاص بك وقيام المتصفح برسم الشاشة (painting).
إصلاح Input Delay
المهام الطويلة تعيق الخيط الرئيسي. إذا استغرقت المهمة أكثر من 50 مللي ثانية، فإنها تعطل النقرات. استخدم scheduler.yield() لتقسيم المهام الطويلة إلى أجزاء أصغر حتى يتمكن المتصفح من معالجة النقرات بينها.
إصلاح Processing Time
استخدم واجهات برمجة تطبيقات الانتقال (transition APIs) في React للحفاظ على استجابة واجهة المستخدم.
startTransition– لتغليف التحديثات غير العاجلة. يمكن لـ React إيقاف تحديث ثقيل مؤقتاً للتعامل مع نقرة جديدة.useDeferredValue– لتأجيل القيم التي لا تحتاج إلى تحديث فوري.
هذه الواجهات لا تسرع الكود؛ بل تجعله قابلاً للمقاطعة، مما يقلل من قيمة INP لديك.
إصلاح Presentation Delay
كثرة عناصر DOM تبطئ عملية الرسم (paint).
- طبق
content-visibility: autoفي CSS لتخطي عملية التصيير (rendering) للعناصر الموجودة خارج الشاشة. - توقف عن حدوث layout thrashing: لا تقم أبداً بقراءة نمط (style) ثم كتابة نمط آخر في نفس الحلقة (loop). بدلاً من ذلك، قم بتجميع عمليات القراءة والكتابة معاً.
- استخدم تقنية Virtualization للقوائم الطويلة.
كيفية القياس
يعمل Lighthouse في بيئة مخبرية ولا يمكنه النقر على الأزرار مثل الشخص الحقيقي. قم بتثبيت مكتبة web-vitals واجمع بيانات حقيقية من مستخدميك.