این مطلب نسخه خلاصه‌شده‌ای از یکی از راهنماهای تخصصی وبتیک است.
فرض کنید کاربر روی دکمه «افزودن به سبد خرید» کلیک می‌کند، اما برای چند لحظه هیچ اتفاقی روی صفحه نمی‌افتد. کاربر نمی‌داند کلیک ثبت شده یا نه، دوباره روی دکمه می‌زند و چند لحظه بعد چند تغییر به‌صورت هم‌زمان اتفاق می‌افتد. حتی اگر صفحه در ابتدا سریع باز شده باشد، چنین تجربه‌ای باعث می‌شود سایت کند و غیرقابل‌اعتماد به نظر برسد.
INP یا Interaction to Next Paint معیاری برای سنجش همین بخش از تجربه کاربر است: صفحه پس از تعامل کاربر با چه سرعتی می‌تواند بازخورد بصری بعدی را نمایش دهد.
INP یکی از سه معیار فعلی Core Web Vitals است و پاسخ‌گویی یا پاسخ‌گویی صفحه را اندازه‌گیری می‌کند. این معیار از ۱۲ مارس ۲۰۲۴ جایگزین FID شد و در کنار LCP و CLS برای ارزیابی جنبه‌های مهمی از تجربه واقعی کاربران استفاده می‌شود. (Google Search Central)
INP چیست؟
INP تعاملاتی مانند کلیک، لمس صفحه و ورودی‌های صفحه‌کلید را در طول حضور کاربر در صفحه مشاهده می‌کند و مدت زمانی را می‌سنجد که از شروع تعامل تا زمانی که مرورگر بتواند فریم بعدی را نمایش دهد طول می‌کشد.
INP تقریباً تمام تعاملات واجد شرایط در طول بازدید از صفحه را در نظر می‌گیرد. در بیشتر صفحات، کندترین تعامل نقش اصلی را در مقدار نهایی INP دارد؛ هرچند در صفحاتی با تعداد بسیار زیاد تعامل، سازوکار INP بعضی Outlierها را کنار می‌گذارد تا یک کندی تصادفی نماینده کل تجربه صفحه نشود. (web.dev)
عدد مناسب برای INP چقدر است؟
برای ارزیابی تجربه اکثر کاربران، معیارها در سطح صدک ۷۵ Page Viewها بررسی می‌شوند و داده موبایل و دسکتاپ نیز باید جداگانه در نظر گرفته شود. بنابراین سریع بودن صفحه روی لپ‌تاپ توسعه‌دهنده به‌تنهایی نشان نمی‌دهد کاربران واقعی هم INP خوبی دارند. (web.dev)
INP دقیقاً از چه بخش‌هایی تشکیل می‌شود؟
فرض کنید کاربر روی دکمه باز شدن یک پنل کلیک کرده است. اگر رشته اصلی مشغول اجرای یک اسکریپت سنگین باشد، قبل از اینکه کد مربوط به کلیک اجرا شود Input Delay ایجاد می‌شود. اگر خود Handler محاسبات زیادی انجام دهد، Processing Duration بالا می‌رود. اگر تغییر بزرگی در DOM ایجاد شود و مرورگر برای Layout و Paint زمان زیادی مصرف کند، Presentation Delay افزایش پیدا می‌کند.
تفاوت INP و FID چیست؟
این تفاوت یک نتیجه عملی دارد: اگر قبلاً فقط روی سریع بودن اولین تعامل تمرکز می‌کردید، برای INP باید رفتار صفحه را در تمام طول استفاده کاربر بررسی کنید.
آیا Lighthouse برای اندازه‌گیری INP کافی است؟
INP ذاتاً به Interactionهای واقعی در طول حضور کاربر در صفحه وابسته است. تست‌های Lab که فقط Loading صفحه را بررسی می‌کنند ممکن است نتوانند INP واقعی را اندازه بگیرند.
جمع‌بندی
INP یا Interaction to Next Paint نشان می‌دهد یک صفحه در طول استفاده کاربر چقدر سریع به Interactionهای او پاسخ بصری می‌دهد. برخلاف FID، تمرکز آن فقط روی اولین Interaction نیست و رفتار صفحه را در طول بازدید کاربر بهتر منعکس می‌کند.
ابتدا با داده کاربران واقعی مشخص کنید کدام صفحات مشکل دارند. سپس Interaction کند را پیدا کنید و بررسی کنید زمان بیشتر در Input Delay، Processing Duration یا Presentation Delay مصرف می‌شود. بعد سراغ علت فنی همان بخش بروید؛ از وظیفه طولانی و JavaScript سنگین گرفته تا مدیریت‌کننده رویداد پرهزینه یا رندرینگ پیچیده.
مطالعه نسخه کامل
برای مطالعه توضیحات کامل، مثال‌ها و جزئیات بیشتر، INP چیست و چگونه Interaction to Next Paint را بهتر کنیم؟ را در وبتیک بخوانید.
Top comments (0)