شاخص INP در سال ۲۰۲۶: چگونه تاخیر تعامل کاربر با صفحه را به زیر ۲۰۰ میلی‌ثانیه برسانیم؟

شاخص INP چیست و چرا گوگل معیار قدیمی FID را بازنشسته کرد؟#

در دنیای سئو و تجربه کاربری (Core Web Vitals)، سال‌ها متریک FID (First Input Delay) معیار سنجش پاسخ‌دهی صفحه به کاربر بود. اما این شاخص یک ایراد بزرگ داشت: FID فقط اولین تعامل کاربر (مثلاً اولین کلیک بعد از لود) را می‌سنجید و اگر صفحه بعد از آن در حین باز کردن منو، تب‌ها یا سبد خرید قفل می‌شد، هیچ جریمه‌ای لحاظ نمی‌کرد!

برای رفع این کاستی، گوگل رسماً متریک INP (Interaction to Next Paint) را جایگزین کرد. شاخص INP تمام تعاملات کاربر در طول مدت حضور او در صفحه (کلیک روی دکمه‌ها، لمس المان‌ها و فشردن کلیدها) را رصد می‌کند و بدترین تأخیر ایجادشده تا رندر فریم بعدی تصویر را به عنوان نمره نهایی ثبت می‌نماید.

استانداردهای گوگل برای شاخص INP#

• خوب و ایده‌آل: کمتر از ۲۰۰ میلی‌ثانیه (واکنش آنی و نرم)
• نیازمند بهبود: بین ۲۰۰ تا ۵۰۰ میلی‌ثانیه
• ضعیف و بحرانی: بالای ۵۰۰ میلی‌ثانیه (کاربر با لمس دکمه احساس لگ و فریز شدن صفحه می‌کند)

۳ بخش تشکیل‌دهنده زمان تاخیر در INP#

هر تعامل کاربر از لحظه فشرده شدن دکمه تا نمایش واکنش بصری از سه فاز زمانی عبور می‌کند:

$$ ext{INP} = ext{Input Delay} + ext{Processing Time} + ext{Presentation Delay}$$

1. تاخیر ورودی (Input Delay): زمانی که رویداد منتظر می‌ماند تا صف Main Thread مرورگر از وظایف سنگین دیگر (Long Tasks) خالی شود.
2. زمان پردازش (Processing Time): مدت زمانی که اجرای کدهای Event Listener شما طول می‌کشد.
3. تاخیر ارائه (Presentation Delay): مدت زمانی که مرورگر نیاز دارد تا صفحه را مجدداً چیدمان (Layout) و پیکسل‌ها را ترسیم (Paint) کند.

جدول راهکارهای طلایی برای رساندن INP به زیر ۲۰۰ میلی‌ثانیه#

تکنیک کدی: خرد کردن وظایف طولانی (Long Tasks)#

اگر کدهای شما یک حلقه پردازشی سنگین دارند، مرورگر قفل می‌شود. با قطعه کد مدرن زیر می‌توانید فریم مرورگر را آزاد کنید:

async function handleUserInteraction() {
  // ۱. ارائه فوری فیدبک بصری به کاربر (مثلاً نمایش آیکون لودینگ)
  showLoadingSpinner();

  // ۲. آزادسازی Main Thread برای اینکه مرورگر بتواند اسپینر را رسم کند
  await yieldToMain();

  // ۳. اجرای محاسبات سنگین
  processHeavyData();
}

function yieldToMain() {
  if ('scheduler' in window && 'yield' in scheduler) {
    return scheduler.yield();
  }
  return new Promise((resolve) => setTimeout(resolve, 0));
}

پرسش‌های متداول (FAQ)#

آیا سرعت سرور (TTFB) روی شاخص INP تاثیر دارد؟

به طور مستقیم خیر؛ INP کاملاً در مرورگر کلاینت و پس از لود صفحه رخ می‌دهد. اما لود کند اسکریپت‌ها می‌تواند آغاز کاربری صفحه را به تعویق بیندازد.

چگونه INP را تست و مانیتور کنیم؟

بهترین ابزار، تب Performance در DevTools مرورگر کروم و همچنین گزارش Core Web Vitals در سرچ کنسول بر اساس داده‌های کاربران واقعی (CrUX) است.