خلاصه و تحلیل مقاله: بهینه‌سازی Interaction to Next Paint (INP)

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

---

INP چیست؟

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

• چرا مهم است؟ INP نشان‌دهنده تجربه کاربری در تعاملات پویا با صفحه است. تأخیرهای طولانی می‌توانند باعث نارضایتی کاربران شوند، به‌ویژه در برنامه‌هایی که تعاملات مکرر دارند (مثل ویرایشگرهای متنی یا بازی‌ها).
• هدف: برای تجربه کاربری خوب، INP باید 200 میلی‌ثانیه یا کمتر باشد، که در صدک 75ام (75th percentile) بارگذاری‌های صفحه (برای دستگاه‌های موبایل و دسکتاپ) اندازه‌گیری می‌شود.
• خوب: ≤ 200 میلی‌ثانیه
• نیاز به بهبود: 200–500 میلی‌ثانیه
• ضعیف: > 500 میلی‌ثانیه

---

اجزای یک تعامل

هر تعامل شامل سه بخش اصلی است که مجموع آن‌ها تأخیر کلی تعامل را تشکیل می‌دهد:

1. تأخیر ورودی (Input Delay): زمان بین شروع تعامل کاربر (مثل کلیک) و آغاز اجرای callbackهای رویداد.
2. مدت پردازش (Processing Duration): زمان لازم برای اجرای کامل callbackهای رویداد.
3. تأخیر ارائه (Presentation Delay): زمان تا ارائه فریم بعدی که نتیجه بصری تعامل را نمایش می‌دهد.

انواع تعاملات محاسبه‌شده در INP:

• کلیک با ماوس (شامل رویدادهای pointerdown, pointerup, click)
• ضربه روی صفحه لمسی
• فشردن کلید کیبورد (شامل keydown, keypress, keyup)

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

---

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

1. اندازه‌گیری در دنیای واقعی (Field Data):

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

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

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

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

• استفاده از کتابخانه web-vitals:

import { onINP } from 'web-vitals';
onINP(console.log);

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

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

---

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

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

1. کاهش تأخیر ورودی (Input Delay):

• علل تأخیر ورودی:

  • فعالیت‌های سنگین در نخ اصلی (مانند بارگذاری اسکریپت‌ها، تجزیه و تحلیل، یا اجرای توابع تایمر).
  • همپوشانی تعاملات متوالی.

• راهکارها:

  • کاهش وظایف طولانی (Long Tasks): اسکریپت‌های بزرگ را تجزیه کنید یا به Web Workers منتقل کنید.
  • بهینه‌سازی بارگذاری جاوااسکریپت: از روش‌هایی مثل defer یا async برای کاهش زمان تجزیه و تحلیل اسکریپت‌ها استفاده کنید.
  • مطالعه بیشتر: بهینه‌سازی تأخیر ورودی.

2. بهینه‌سازی Callbackهای رویداد (Event Callbacks):

• کاهش زمان اجرا:

  • حداقل کار ممکن را در callbackها انجام دهید.
  • وظایف پیچیده را به چندین task کوچک تقسیم کنید تا از مسدود شدن نخ اصلی جلوگیری شود.

• تکنیک‌های Yielding:

• Timeout برای تقسیم وظایف استفاده کنید:

setTimeout(() => { /* کار غیرضروری */ }, 0);

• برای بهبود رندر، callbackها را به گونه‌ای ساختار دهید که فقط منطق ضروری برای فریم بعدی اجرا شود. مثال:

textBox.addEventListener('input', (inputEvent) => {
    updateTextBox(inputEvent); // به‌روزرسانی فوری UI
    requestAnimationFrame(() => {
    setTimeout(() => {
        const text = textBox.textContent;
        updateWordCount(text);
        checkSpelling(text);
        saveChanges(text);
    }, 0);
    });
});

• این روش تضمین می‌کند که به‌روزرسانی‌های بصری سریع‌تر انجام شوند.

• اجتناب از Layout Thrashing:

  • از دسترسی همزمان به ویژگی‌های DOM که باعث محاسبات مجدد چیدمان (layout) می‌شوند (مانند offsetWidth یا getComputedStyle) خودداری کنید.
  • مطالعه بیشتر: اجتناب از چیدمان‌های بزرگ و پیچیده.

3. کاهش تأخیر ارائه (Presentation Delay):

• کاهش اندازه DOM:
  • DOM بزرگ باعث افزایش زمان رندر می‌شود، به‌ویژه در بارگذاری اولیه یا پس از تعاملات.
  • راهکارها: ساده‌سازی ساختار DOM یا افزودن تدریجی عناصر در پاسخ به تعاملات کاربر.
• استفاده از content-visibility:
  • این ویژگی CSS به رندر تنبل (lazy rendering) عناصری که خارج از viewport هستند کمک می‌کند:

.offscreen-element {
    content-visibility: auto;
    contain-intrinsic-size: 1000px 500px;
}

• مطالعه بیشتر: content-visibility.

• رندر HTML در سمت کلاینت:

  • رندر HTML با جاوااسکریپت (مانند برنامه‌های تک‌صفحه‌ای یا SPA) می‌تواند پرهزینه باشد، زیرا مرورگر تا اتمام پردازش HTML متوقف نمی‌شود.
  • راهکار: تا حد امکان از رندر سمت سرور یا رندر تدریجی (streaming) استفاده کنید.

---

نمودار پیشنهادی برای تجسم معیارهای 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 یک فرآیند تکراری است که نیازمند شناسایی تعاملات کند، تحلیل آن‌ها در دنیای واقعی و آزمایشگاه، و اعمال بهینه‌سازی‌های هدفمند است. با تمرکز بر کاهش تأخیر ورودی، بهینه‌سازی callbackهای رویداد، و کاهش تأخیر ارائه، می‌توانید تجربه کاربری بهتری ارائه دهید. ابزارهایی مانند Chrome DevTools، PageSpeed Insights، و web-vitals در این مسیر کمک‌کننده هستند. مطالعه منابع پیشنهادی در مقاله (مانند راهنماهای بهینه‌سازی تأخیر ورودی و وظایف طولانی) برای اطلاعات دقیق‌تر توصیه می‌شود.