صفحه شما سریع بارگذاری میشود اما کند به نظر میرسد؟ مشکل از INP است
گزارش Lighthouse شما سبز است. LCP خوب است. CLS خوب است. صفحه سریع بارگذاری میشود.
اما امتیازهای دنیای واقعی شما افت میکند. و نمیدانید چرا.
مشکل احتمالاً INP است. Interaction to Next Paint در مارس ۲۰۲۴ جایگزین FID شد. FID فقط اولین تأخیر را اندازهگیری میکرد. اما INP تمام تعاملات کاربر را در مدتی که در صفحه شما حضور دارد، اندازهگیری میکند و کندترین آنها را گزارش میدهد.
INP یک معیار بارگذاری (loading) نیست. بلکه یک معیار پاسخگویی (responsiveness) است. این معیار به یک سوال پاسخ میدهد: وقتی کلیک میکنید یا تایپ میکنید، چقدر طول میکشد تا صفحه تغییر کند؟
گوگل از این دستهبندیها استفاده میکند:
- ۲۰۰ میلیثانیه یا کمتر: خوب (good).
- بیش از ۵۰۰ میلیثانیه: ضعیف (poor).
یک سایت میتواند در یک ثانیه بارگذاری شود اما همچنان در این معیار شکست بخورد. سریع بارگذاری شدن و سریع پاسخ دادن، دو کار متفاوت هستند.
ابزارهای 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 فریمورکها.
با تقسیم کردن تسکهای طولانی، آن را اصلاح کنید. اجازه دهید مرورگر بین مراحل، فرصت نفس کشیدن داشته باشد:
async function onClick() {
doUrgentPart();
await yieldToMain();
doExpensivePart();
}
از yieldToMain استفاده کنید تا مرورگر بتواند قبل از شروع کار سنگین، رابط کاربری (UI) را رندر کند.
سایر راهکارها:
- اسکریپتهایی که بلافاصله مورد نیاز نیستند را به تعویق (defer) بیندازید.
- ویجتهای شخص ثالث را بررسی (audit) کنید.
- هندلرهای سنگین را Debounce کنید.
- خواندن و نوشتن در DOM را دستهای (batch) انجام دهید.
اگر امتیازهای واقعی شما پایین است، دیگر فقط به LCP خیره نشوید. در عوض، تعاملات خود را اندازهگیری کنید.
Source: https://dev.to/lamas51/your-page-loads-fast-but-still-feels-slow-its-inp-not-load-time-2gkn