مقاله‌ای که ارائه دادید درباره Interaction to Next Paint (INP)، یکی از معیارهای کلیدی Core Web Vitals، است که پاسخگویی یک صفحه وب به تعاملات کاربر را ارزیابی می‌کند. در ادامه، خلاصه‌ای از نکات اصلی مقاله به همراه توضیحات تکمیلی ارائه می‌شود تا به درک بهتر موضوع کمک کند.

INP چیست؟

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

  • چرا مهم است؟ 90% از زمان کاربران در یک صفحه، پس از بارگذاری اولیه صرف می‌شود. بنابراین، پاسخگویی سریع به تعاملات کاربر (مانند باز شدن منو، اضافه شدن آیتم به سبد خرید، یا ارسال فرم) برای تجربه کاربری خوب ضروری است.
  • تفاوت با FID: برخلاف First Input Delay (FID) که تنها تأخیر ورودی (input delay) اولین تعامل را اندازه می‌گیرد، INP تمام تعاملات در طول عمر صفحه را بررسی می‌کند و شامل تأخیر ورودی، زمان پردازش و زمان ارائه فریم بعدی است.

امتیاز خوب برای INP چیست؟

برای اطمینان از پاسخگویی خوب، معیار INP در صدک 75ام (75th percentile) بازدیدهای صفحه بررسی می‌شود:

  • خوب: کمتر یا برابر با 200 میلی‌ثانیه.
  • نیاز به بهبود: بین 200 تا 500 میلی‌ثانیه.
  • ضعیف: بیشتر از 500 میلی‌ثانیه.

تصویر معیارهای INP

یک تعامل شامل چیست؟

تعامل (interaction) گروهی از رویدادهای مرتبط با یک ژست کاربری (مانند کلیک یا ضربه) است. برای مثال:

  • کلیک ماوس: شامل رویدادهای pointerdown، pointerup و click.
  • فشردن کلید: شامل keydown، keypress و keyup.

تأخیر تعامل شامل سه بخش است:

  1. تأخیر ورودی (Input Delay): زمان از شروع تعامل تا اجرای اولین handler.
  2. زمان پردازش (Processing Duration): زمان اجرای همه handlerهای مرتبط.
  3. تأخیر ارائه (Presentation Delay): زمان تا ارائه فریم بعدی در مرورگر.

فقط تعاملات زیر برای INP اندازه‌گیری می‌شوند:

  • کلیک با ماوس.
  • ضربه روی صفحه لمسی.
  • فشردن کلید (فیزیکی یا روی صفحه).

توجه: ژست‌هایی مثل اسکرول، زوم یا هاور کردن در INP محاسبه نمی‌شوند.

چگونه INP را اندازه‌گیری کنیم؟

1. در محیط واقعی (Field Measurement):

  • داده‌های واقعی کاربران (RUM): بهترین روش برای اندازه‌گیری INP، جمع‌آوری داده‌ها از کاربران واقعی است. ابزارهایی مثل Chrome User Experience Report (CrUX) در PageSpeed Insights می‌توانند داده‌های INP را در سطح دامنه یا URL ارائه دهند.
  • مزیت: داده‌های واقعی نشان می‌دهند کدام تعاملات کند هستند و در چه مرحله‌ای (مثلاً هنگام لود یا بعد از آن) رخ می‌دهند.
  • محدودیت: CrUX مشکل را نشان می‌دهد، اما دلیل آن را مشخص نمی‌کند. برای جزئیات بیشتر، نیاز به ابزارهای RUM دارید.

2. در آزمایشگاه (Lab Measurement):

  • چالش‌ها: INP به تعاملات کاربر وابسته است، و رفتار کاربران در آزمایشگاه ممکن است با واقعیت متفاوت باشد. ابزارهای آزمایشگاهی ممکن است INP را گزارش ندهند، مگر اینکه تعاملات خاصی شبیه‌سازی شوند.

  • راهکارها:

    • شبیه‌سازی تعاملات رایج کاربران (مثل کلیک روی دکمه‌ها یا منوها).
    • تست در حین لود صفحه، زمانی که نخ اصلی (main thread) مشغول است.
    • استفاده از Total Blocking Time (TBT) به‌عنوان معیاری جایگزین (هرچند نه دقیقاً معادل INP).

3. اندازه‌گیری با جاوااسکریپت:

  • از کتابخانه web-vitals برای اندازه‌گیری INP استفاده کنید:
import { onINP } from 'web-vitals';
onINP(console.log);

  • محدودیت‌ها:

    • رویدادهای با تأخیر کمتر از 104 میلی‌ثانیه به‌صورت پیش‌فرض گزارش نمی‌شوند (قابل تنظیم با durationThreshold).
    • تعاملات در iframeها توسط API جاوااسکریپت گزارش نمی‌شوند، اما در تجربه کاربر تأثیر دارند.
    • برای صفحاتی که مدت طولانی باز می‌مانند یا در پس‌زمینه هستند، باید از رویداد visibilitychange استفاده کنید.

چگونه INP را بهبود دهیم؟

بهبود INP نیازمند شناسایی و رفع تعاملات کند است. چند راهکار کلی:

  1. کاهش زمان پردازش جاوااسکریپت: کدهای سنگین را بهینه کنید یا به Web Workers منتقل کنید.
  2. کاهش بار نخ اصلی (Main Thread): از وظایف طولانی (long tasks) اجتناب کنید.
  3. ارائه فیدبک بصری سریع: حتی برای تعاملات پیچیده، فیدبک بصری اولیه (مثل انیمیشن لودینگ) ارائه دهید.
  4. استفاده از ابزارهای DevTools: از پنل Performance برای تحلیل تعاملات و شناسایی گلوگاه‌ها استفاده کنید.
  5. منابع پیشنهادی: مجموعه راهنماهای بهینه‌سازی INP را مطالعه کنید.

چرا ممکن است INP گزارش نشود؟

  • کاربر هیچ کلیک، ضربه یا فشردن کلیدی انجام نداده باشد.
  • تعاملات کاربر محدود به اسکرول یا هاور باشد.
  • صفحه توسط ربات (مثل خزنده‌های جستجو) بازدید شده باشد.

تفاوت INP با FID

  • FID: فقط تأخیر ورودی اولین تعامل را اندازه می‌گیرد و یک معیار پاسخگویی در زمان لود است.
  • INP: کل چرخه تعاملات (تأخیر ورودی، پردازش، و ارائه فریم بعدی) را در طول عمر صفحه بررسی می‌کند و معیاری جامع‌تر برای پاسخگویی است.

پشتیبانی مرورگرها

  • Chrome: نسخه 96 به بعد.
  • Edge: نسخه 96 به بعد.
  • Firefox: نسخه 144 به بعد.
  • Safari: پشتیبانی نمی‌شود.

نمودار پیشنهادی برای تجسم معیارهای INP

برای درک بهتر معیارهای INP، می‌توان از یک نمودار استفاده کرد که محدوده‌های خوب، نیاز به بهبود و ضعیف را نشان دهد:

{
  "type": "bar",
  "data": {
    "labels": ["Good", "Needs Improvement", "Poor"],
    "datasets": [{
      "label": "INP Thresholds (milliseconds)",
      "data": [200, 500, 500],
      "backgroundColor": ["#34C759", "#FFCC00", "#FF3B30"],
      "borderColor": ["#2E865F", "#CC9900", "#CC2E2A"],
      "borderWidth": 1
    }]
  },
  "options": {
    "scales": {
      "y": {
        "beginAtZero": true,
        "title": {
          "display": true,
          "text": "Time (milliseconds)"
        }
      },
      "x": {
        "title": {
          "display": true,
          "text": "INP Performance"
        }
      }
    },
    "plugins": {
      "legend": {
        "display": false
      },
      "title": {
        "display": true,
        "text": "INP Performance Thresholds"
      }
    }
  }
}

این نمودار به‌صورت بصری نشان می‌دهد که INP کمتر از 200 میلی‌ثانیه خوب، بین 200 تا 500 میلی‌ثانیه نیاز به بهبود، و بالای 500 میلی‌ثانیه ضعیف است.

جمع‌بندی

INP معیاری کلیدی برای ارزیابی پاسخگویی سایت به تعاملات کاربر است. با اندازه‌گیری و بهینه‌سازی آن، می‌توانید تجربه کاربری بهتری ارائه دهید. استفاده از ابزارهایی مثل Chrome DevTools، PageSpeed Insights و کتابخانه web-vitals به شما کمک می‌کند تا مشکلات را شناسایی و رفع کنید. برای اطلاعات بیشتر، به منابع پیشنهادی در مقاله مراجعه کنید.