رفع مشکل INP: چگونه از کند به نظر رسیدن اپلیکیشنهای React جلوگیری کنیم
داشبورد شما کند به نظر میرسد. API شما سریع است. Lighthouse امتیازهای سبز نشان میدهد. با این حال، هر کلیک با تأخیر همراه است.
این یک مشکل INP است.
شاخص Interaction to Next Paint (INP) زمان پاسخگویی یک صفحه به کاربر را اندازهگیری میکند. این شاخص در مارس ۲۰۲۴ جایگزین First Input Delay (FID) شد. FID فقط اولین کلیک را بررسی میکرد؛ اما INP تمام تعاملات را زیر نظر میگیرد.
امتیاز INP زیر ۲۰۰ میلیثانیه، سریع به نظر میرسد. امتیاز بالای ۵۰۰ میلیثانیه، کند و سنگین است.
برای رفع مشکل INP، آن را به سه مرحله تقسیم کنید:
- Input Delay – فاصله زمانی بین یک کلیک و زمانی که کد شما شروع به اجرا میشود. این مورد زمانی رخ میدهد که main thread مشغول باشد.
- Processing Time – مدت زمانی که توابع و بهروزرسانیهای state در React اجرا میشوند.
- Presentation Delay – فاصله زمانی بین پایان یافتن اجرای کد و زمانی که مرورگر صفحه را paint میکند.
رفع مشکل Input Delay
تسکهای طولانی، main thread را مسدود میکنند. اگر تسکی بیش از ۵۰ میلیثانیه اجرا شود، باعث توقف کلیکها میشود. از scheduler.yield() استفاده کنید تا تسکهای طولانی را به بخشهای کوچکتر تقسیم کنید تا مرورگر بتواند بین آنها کلیکها را پردازش کند.
رفع مشکل Processing Time
از APIهای transition در React استفاده کنید تا رابط کاربری (UI) پاسخگو باقی بماند.
startTransition– بهروزرسانیهای غیرضروری را در این تابع قرار دهید. React میتواند یک بهروزرسانی سنگین را متوقف کند تا به یک کلیک جدید رسیدگی کند.useDeferredValue– مقادیری را که نیاز به بهروزرسانی فوری ندارند، به تعویق بیندازید.
این APIها سرعت کد را بالا نمیبرند؛ بلکه آن را قابل توقف (interruptible) میکنند که باعث کاهش INP میشود.
رفع مشکل Presentation Delay
تعداد زیاد عناصر DOM باعث کند شدن فرآیند paint میشود.
- از
content-visibility: autoدر CSS استفاده کنید تا از رندر کردن عناصر خارج از صفحه صرفنظر شود. - از layout thrashing جلوگیری کنید: هرگز در یک حلقه، ابتدا یک استایل را بخوانید و سپس همان استایل را بنویسید. در عوض، خواندنها و نوشتنها را دستهبندی (batch) کنید.
- لیستهای طولانی را مجازیسازی (Virtualize) کنید.
نحوه اندازهگیری
Lighthouse در محیط آزمایشگاهی (lab) اجرا میشود و نمیتواند مانند یک انسان واقعی روی دکمههای شما کلیک کند. کتابخانه web-vitals را نصب کنید و دادههای واقعی را از کاربران خود دریافت کنید.