تعامل با رنگ بعدی (INP)

جرمی واگنر

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

  • کروم: 96.
  • لبه: 96.
  • فایرفاکس: پشتیبانی نمی شود.
  • سافاری: پشتیبانی نمی شود.

منبع

داده‌های استفاده از کروم نشان می‌دهد که ۹۰٪ از زمان کاربر در یک صفحه پس از بارگیری آن صرف می‌شود، بنابراین، اندازه‌گیری دقیق پاسخ‌دهی در طول چرخه عمر صفحه مهم است. این چیزی است که متریک INP ارزیابی می کند.

پاسخگویی خوب به این معنی است که یک صفحه به سرعت به تعاملات پاسخ می دهد. هنگامی که یک صفحه به یک تعامل پاسخ می دهد، مرورگر بازخورد بصری را در فریم بعدی که نقاشی می کند ارائه می دهد. بازخورد بصری به شما می‌گوید که آیا، برای مثال، کالایی که به یک سبد خرید آنلاین اضافه می‌کنید، واقعاً اضافه می‌شود، آیا منوی پیمایش تلفن همراه باز شده است، آیا محتوای فرم ورود توسط سرور تأیید می‌شود و غیره.

برخی از تعاملات به طور طبیعی بیشتر از سایرین طول می کشد، اما برای تعاملات پیچیده، بسیار مهم است که به سرعت برخی بازخوردهای بصری اولیه را ارائه دهید تا به کاربر بگویید که چیزی در حال رخ دادن است. فریم بعدی که مرورگر نقاشی خواهد کرد اولین فرصت برای انجام این کار است.

بنابراین، هدف INP اندازه‌گیری تمام اثرات نهایی یک تعامل - مانند واکشی شبکه و به‌روزرسانی‌های رابط کاربری از سایر عملیات ناهمزمان) نیست - بلکه زمانی است که رنگ بعدی مسدود می‌شود. با تأخیر در بازخورد بصری، کاربران ممکن است این تصور را داشته باشند که صفحه به اندازه کافی سریع پاسخ نمی‌دهد، و INP برای کمک به توسعه‌دهندگان برای اندازه‌گیری این بخش از تجربه کاربر ایجاد شده است.

در ویدیوی زیر، مثال سمت راست بازخورد بصری فوری را نشان می دهد که آکاردئون در حال باز شدن است. پاسخگویی ضعیف به عنوان مثال در سمت چپ نشان داده شده است، و اینکه چگونه می تواند تجربه کاربری ضعیفی ایجاد کند.

نمونه ای از پاسخگویی ضعیف در مقابل خوب. در سمت چپ، کارهای طولانی مانع از باز شدن آکاردئون می شوند. این باعث می شود که کاربر چندین بار کلیک کند و فکر می کند تجربه شکسته است. وقتی رزوه اصلی به خود می رسد، ورودی های تاخیری را پردازش می کند و در نتیجه آکاردئون به طور غیرمنتظره ای باز و بسته می شود. در سمت راست، یک صفحه پاسخگوتر آکاردئون را به سرعت و بدون حادثه باز می کند.

این راهنما توضیح می‌دهد که INP چگونه کار می‌کند، چگونه آن را اندازه‌گیری می‌کند و به منابعی برای بهبود آن اشاره می‌کند.

INP چیست؟

INP معیاری است که پاسخگویی کلی صفحه به تعاملات کاربر را با مشاهده تأخیر کلیه تعاملات کلیک، ضربه و صفحه کلید که در طول عمر بازدید کاربر از یک صفحه رخ می دهد، ارزیابی می کند. مقدار نهایی INP طولانی ترین برهمکنش مشاهده شده است، بدون توجه به نقاط پرت.

جزئیات نحوه محاسبه INP

INP با مشاهده تمام فعل و انفعالات انجام شده با یک صفحه محاسبه می شود. برای اکثر سایت‌ها، تعامل با بدترین تأخیر به عنوان INP گزارش می‌شود.

با این حال، برای صفحاتی که تعداد تعاملات زیادی دارند، سکسکه‌های تصادفی می‌تواند منجر به یک تعامل غیرمعمول با تأخیر بالا در صفحه‌ای که در غیر این صورت پاسخگو باشد، شود. هر چه فعل و انفعالات بیشتری در یک صفحه خاص رخ دهد، احتمال وقوع آن بیشتر است.

برای اندازه‌گیری بهتر پاسخ‌دهی واقعی برای صفحاتی که تعداد تعاملات بالایی دارند، یک بالاترین تعامل را برای هر 50 تعامل نادیده می‌گیریم. اکثریت قریب به اتفاق تجربه های صفحه بیش از 50 تعامل ندارند، بنابراین بدترین تعامل اغلب گزارش می شود. سپس صدک 75 از تمام بازدیدهای صفحه طبق معمول گزارش می‌شود، که بیشتر موارد پرت را حذف می‌کند تا مقداری را که اکثریت قریب به اتفاق کاربران یا بهتر از آن تجربه می‌کنند، ارائه دهد.

تعامل گروهی از کنترل‌کننده‌های رویداد است که در طول یک حرکت منطقی کاربر فعال می‌شوند. برای مثال، فعل و انفعالات «ضربه» روی یک دستگاه صفحه لمسی شامل چندین رویداد مانند pointerup ، pointerdown و click است. یک تعامل می تواند توسط جاوا اسکریپت، CSS، کنترل های داخلی مرورگر (مانند عناصر فرم)، یا ترکیبی از آنها هدایت شود.

تأخیر یک تعامل شامل طولانی‌ترین مدت گروهی از کنترل‌کننده‌های رویداد است که تعامل را هدایت می‌کنند، از زمانی که کاربر تعامل را شروع می‌کند تا زمانی که مرورگر بتواند بعداً یک فریم را نقاشی کند.

نمره INP خوب چیست؟

سنجاق کردن برچسب هایی مانند "خوب" یا "ضعیف" در یک معیار پاسخگویی دشوار است. از یک طرف، شما می خواهید شیوه های توسعه ای را تشویق کنید که پاسخگویی خوب را در اولویت قرار می دهند. از سوی دیگر، باید این واقعیت را در نظر بگیرید که تنوع قابل توجهی در قابلیت‌های دستگاه‌هایی وجود دارد که مردم برای تعیین انتظارات توسعه قابل دستیابی استفاده می‌کنند.

برای اطمینان از ارائه تجربیات کاربر با پاسخگویی خوب، یک آستانه خوب برای اندازه گیری صدک 75 بارگیری صفحه ثبت شده در این زمینه است که در دستگاه های تلفن همراه و دسکتاپ تقسیم بندی شده است:

  • INP زیر یا در 200 میلی ثانیه به این معنی است که یک صفحه دارای پاسخگویی خوبی است.
  • INP بالاتر از 200 میلی ثانیه و کمتر یا در 500 میلی ثانیه به این معنی است که پاسخگویی صفحه نیاز به بهبود دارد .
  • INP بالای 500 میلی ثانیه به این معنی است که یک صفحه پاسخگویی ضعیفی دارد.
مقادیر INP خوب 200 میلی ثانیه یا کمتر هستند، مقادیر ضعیف بیشتر از 500 میلی ثانیه هستند و هر چیزی در این بین نیاز به بهبود دارد.
مقادیر INP خوب 200 میلی ثانیه یا کمتر است. مقادیر ضعیف بیشتر از 500 میلی ثانیه هستند.

چه چیزی در یک تعامل وجود دارد؟

نموداری که یک تعامل روی رشته اصلی را نشان می دهد. کاربر در حالی که کارها را مسدود می کند یک ورودی ایجاد می کند. ورودی تا تکمیل آن وظایف به تعویق می‌افتد، پس از آن اشاره‌گر، ماوس و کنترل‌کننده رویداد کلیک اجرا می‌شود، سپس کار رندر و نقاشی شروع می‌شود تا فریم بعدی ارائه شود.
زندگی یک تعامل. تأخیر ورودی رخ می‌دهد تا زمانی که کنترل‌کننده‌های رویداد شروع به اجرا کنند، که احتمالاً ناشی از عواملی مانند کارهای طولانی در رشته اصلی است. کنترل کننده رویداد تعامل پس از تماس مجدد اجرا می شود و قبل از ارائه فریم بعدی تاخیر رخ می دهد.

محرک اصلی تعامل اغلب جاوا اسکریپت است، اگرچه مرورگرها تعامل را از طریق کنترل هایی که توسط جاوا اسکریپت پشتیبانی نمی شوند، مانند چک باکس ها، دکمه های رادیویی، و کنترل هایی که توسط CSS ارائه می شوند، ارائه می دهند.

به عنوان اهداف INP، تنها انواع تعامل زیر مشاهده می شود:

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

فعل و انفعالات در سند اصلی یا در فریم های تعبیه شده در سند رخ می دهد - برای مثال کلیک کردن روی پخش روی یک ویدیوی جاسازی شده. کاربران نهایی نمی دانند در iframe چه چیزی وجود دارد یا نه، بنابراین، INP درون iframe برای اندازه گیری تجربه کاربر برای صفحه سطح بالا مورد نیاز است. از آنجایی که APIهای وب جاوا اسکریپت به محتویات iframe دسترسی ندارند، ممکن است به عنوان تفاوتی بین CrUX و RUM نشان داده شود.

تعاملات می تواند شامل چندین رویداد باشد. به عنوان مثال، یک ضربه کلید شامل رویدادهای keydown ، keypress ، و keyup است. فعل و انفعالات ضربه‌ای حاوی رویدادهای pointerup و pointerdown هستند. رویدادی با طولانی‌ترین مدت در تعامل، چیزی است که به تأخیر کلی تعامل کمک می‌کند.

تصویری از تعامل پیچیده تر که شامل دو تعامل است. اولین مورد یک رویداد ماوس کردن است که قبل از باز شدن دکمه ماوس یک فریم ایجاد می کند، که کار بیشتری را آغاز می کند تا زمانی که فریم دیگری به عنوان نتیجه ارائه شود.
تصویری از یک تعامل با چندین کنترل کننده رویداد. قسمت اول تعامل زمانی که کاربر روی دکمه ماوس کلیک می کند یک ورودی دریافت می کند. با این حال، قبل از اینکه دکمه ماوس را آزاد کنند، یک فریم ارائه می شود. هنگامی که کاربر دکمه ماوس را رها می کند، یک سری دیگر از کنترل کننده های رویداد باید قبل از ارائه فریم بعدی اجرا شوند.

INP صفحه زمانی محاسبه می شود که کاربر صفحه را ترک کند. نتیجه یک مقدار واحد است که نشان دهنده پاسخگویی کلی صفحه در طول چرخه عمر آن است. INP پایین به این معنی است که یک صفحه به طور قابل اعتمادی به ورودی کاربر پاسخ می دهد.

INP چه تفاوتی با تاخیر ورودی اول (FID) دارد؟

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

این تفاوت ها به این معنی است که هر دو INP و FID انواع مختلفی از معیارهای پاسخگویی هستند. در جایی که FID یک معیار پاسخگویی بار بود که برای ارزیابی اولین تأثیر صفحه بر کاربر طراحی شده بود، INP یک شاخص قابل اعتمادتر از پاسخگویی کلی است، صرف نظر از اینکه چه زمانی در طول عمر صفحه تعاملات رخ می دهد.

اگر مقدار INP گزارش نشود چه؟

این امکان وجود دارد که یک صفحه هیچ مقدار INP را برگرداند. این ممکن است به دلایل مختلفی رخ دهد، از جمله موارد زیر:

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

نحوه اندازه گیری INP

INP را می توان هم در میدان و هم در آزمایشگاه اندازه گیری کرد، تا جایی که بتوانید تعاملات واقعی کاربر را شبیه سازی کنید.

در میدان

در حالت ایده آل، سفر شما در بهینه سازی INP با داده های میدانی آغاز می شود. در بهترین حالت، داده‌های میدانی از مانیتورینگ کاربر واقعی (RUM) نه تنها مقدار INP صفحه را به شما می‌دهد، بلکه داده‌های متنی را نیز در اختیار شما قرار می‌دهد که نشان می‌دهد چه تعامل خاصی مسئول مقدار INP بوده است، خواه این تعامل در حین بارگذاری یا پس از بارگذاری صفحه رخ داده باشد. نوع تعامل (کلیک، فشار دادن کلید، یا ضربه زدن)، و سایر زمان‌بندی‌های ارزشمند که می‌تواند به شما کمک کند تشخیص دهید کدام بخش از تعامل بر پاسخ‌دهی تأثیر می‌گذارد.

اگر وب‌سایت شما واجد شرایط گنجاندن در گزارش تجربه کاربر Chrome (CrUX) باشد، می‌توانید به سرعت داده‌های میدانی برای INP از طریق CrUX در PageSpeed ​​Insights (و سایر موارد حیاتی وب اصلی) دریافت کنید. حداقل می توانید یک تصویر در سطح مبدا از INP وب سایت خود دریافت کنید، اما در برخی موارد، می توانید داده های سطح URL را نیز دریافت کنید.

با این حال، در حالی که CrUX می تواند به شما بگوید که آیا مشکلی وجود دارد ، نمی تواند به شما بگوید که چه چیزی باعث این مشکل شده است. یک راه حل RUM می تواند به شما کمک کند تا جزئیات بیشتری در مورد صفحات، کاربران یا تعاملات کاربرانی که مشکلات پاسخگویی را تجربه می کنند کشف کنید. توانایی نسبت دادن INP به تعاملات فردی از حدس و گمان و تلاش بیهوده جلوگیری می کند.

در آزمایشگاه

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

با این حال، کاملاً ممکن است که شما داده های میدانی نداشته باشید. در حالی که INP را می توان در برخی از ابزارهای آزمایشگاهی اندازه گیری کرد، مقدار INP حاصل برای یک صفحه در طول آزمایش آزمایشگاهی به تعاملاتی که در طول دوره اندازه گیری انجام می شود بستگی دارد. رفتارهای کاربر می تواند غیرقابل پیش بینی و بسیار متغیر باشد، به این معنی که آزمایش شما در آزمایشگاه ممکن است تعاملات مشکل را به همان شکلی که داده های میدانی می تواند نشان دهد. علاوه بر این، برخی از ابزارهای آزمایشگاهی INP صفحه را گزارش نمی‌کنند، زیرا آنها فقط بارگذاری یک صفحه را بدون هیچ گونه تعاملی مشاهده می‌کنند. در چنین مواردی، زمان انسداد کل (TBT) ممکن است یک معیار پراکسی معقول برای INP باشد، اما به خودی خود جایگزینی برای INP نیست.

حتی اگر زمانی که نوبت به ارزیابی INP صفحه می‌رسد، محدودیت‌هایی در ابزارهای آزمایشگاهی وجود دارد، استراتژی‌هایی برای بازتولید تعاملات آهسته در آزمایشگاه وجود دارد. استراتژی‌ها شامل دنبال کردن جریان‌های مشترک کاربر و آزمایش تعاملات در طول مسیر، و همچنین تعامل با صفحه در حین بارگیری - زمانی که رشته اصلی اغلب شلوغ‌تر است - به منظور شناسایی تعاملات کند در طول آن بخش حیاتی از تجربه کاربر.

نحوه بهبود INP

مجموعه‌ای از راهنماهای بهینه‌سازی INP در دسترس است تا شما را در فرآیند شناسایی تعاملات کند در میدان، و استفاده از داده‌های آزمایشگاهی برای کمک به شناسایی علل و بهینه‌سازی آنها راهنمایی کند.

تغییرات

گاهی اوقات، اشکالاتی در APIهای مورد استفاده برای اندازه گیری معیارها و گاهی اوقات در تعاریف خود معیارها کشف می شود. در نتیجه، گاهی اوقات باید تغییراتی ایجاد شود، و این تغییرات می‌تواند به صورت بهبود یا پسرفت در گزارش‌های داخلی و داشبورد شما نشان داده شود.

برای کمک به شما در مدیریت این موضوع، همه تغییرات در اجرا یا تعریف این معیارها در این Changelog ظاهر می‌شود.

اگر بازخوردی برای این معیارها دارید، آن را در گروه web-vitals-feedback Google ارائه کنید.

دانش خود را آزمایش کنید

هدف اصلی متریک INP چیست؟

برای اندازه گیری مدت زمانی که طول می کشد تا اولین محتوای یک صفحه نمایش داده شود.
نادرست - این اولین رنگ محتوایی را توصیف می کند
برای تعیین کمیت ثبات بصری یک صفحه و به حداقل رساندن تغییرات غیرمنتظره چیدمان.
نادرست - این تغییر چیدمان تجمعی را توصیف می کند
برای ارزیابی مدت زمانی که طول می کشد تا یک صفحه کاملا تعاملی شود.
نادرست - این مربوط به Time to Interactive است، اما INP به طور خاص بر پاسخگویی به ورودی کاربر تمرکز دارد.
برای به حداقل رساندن زمان از زمانی که کاربر یک تعامل را آغاز می کند تا فریم بعدی رنگ آمیزی می شود، برای همه یا بیشتر تعاملاتی که کاربر شروع می کند.
درسته!

کدام یک از انواع برهمکنش زیر برای محاسبه INP مشاهده می شود؟ (همه موارد اعمال شده را انتخاب کنید.)

کلیک کردن با ماوس.
درسته!
پیمایش صفحه با چرخ ماوس یا پد لمسی.
نادرست - INP پیمایش را در نظر نمی گیرد
ضربه زدن روی صفحه لمسی
درسته!
نشانگر ماوس را روی عناصر قرار دهید.
نادرست - INP شناور بودن را در نظر نمی گیرد
فشار دادن یک کلید روی صفحه کلید.
درسته!
بزرگنمایی یا کوچکنمایی صفحه.
نادرست - INP بزرگنمایی را در نظر نمی گیرد

"تأخیر" یک تعامل برای INP چگونه تعریف می شود؟

مقدار زمانی که مرورگر برای پردازش گردانندگان رویداد یک تعامل دارد.
نادرست - این فقط مدت زمان پردازش را محاسبه می کند، نه تاخیر ورودی یا زمان ارائه فریم بعدی
میانگین زمانی که طول می کشد تا تمام تعاملات در یک صفحه یک پاسخ بصری ایجاد کند.
نادرست - INP بر طولانی ترین تعامل تمرکز می کند، نه میانگین
زمانی که مرورگر طول می کشد تا پردازشگرهای رویداد مرتبط با یک تعامل را شروع کند.
نادرست - این فقط تاخیر ورودی را محاسبه می کند، نه زمان پردازش و رندر
زمان از شروع تعامل تا لحظه ارائه کامل فریم بعدی.
درسته!

تفاوت بین INP و FID چیست؟

INP زمان نمایش اولین محتوای یک صفحه را اندازه گیری می کند، در حالی که FID میزان پاسخگویی به ورودی کاربر را اندازه گیری می کند.
نادرست - این اولین رنگ محتوایی را توصیف می کند، نه INP
INP طول مدت تمام تعاملات را در نظر می گیرد، در حالی که FID فقط تاخیر ورودی اولین تعامل را اندازه گیری می کند.
درسته!
INP و FID مُهرهای زمانی متفاوتی را اندازه گیری می کنند که در آن یک صفحه تعاملی می شود.
نادرست - INP و FID معیارهایی هستند که نشان می دهد صفحه با چه سرعتی به تعاملات پاسخ می دهد، صرف نظر از زمان وقوع تعاملات.
هیچ تفاوتی وجود ندارد؛ INP و FID فقط دو نام متفاوت برای یک متریک هستند.
نادرست - آنها تعاریف متمایز دارند

تحت چه شرایطی ممکن است داده های INP برای یک صفحه در ابزارهایی مانند PageSpeed ​​Insights در دسترس نباشد؟

این صفحه از یک کتابخانه اندازه‌گیری عملکرد سفارشی استفاده می‌کند که داده‌های INP را گزارش نمی‌کند.
نادرست - INP به طور خودکار با استفاده از API های پلت فرم وب اندازه گیری می شود و به صفحاتی که عملکرد خود را از طریق کتابخانه های سفارشی گزارش می دهند متکی نیست.
داده‌های تعاملی کافی از کاربران Chrome برای محاسبه مقدار INP معنی‌دار در مجموعه داده CrUX وجود ندارد.
درسته!
کاربران صرفاً از طریق پیمایش و شناور کردن با صفحه تعامل داشتند که برای INP در نظر گرفته نمی شود.
درسته!
صفحه با استفاده از چارچوبی ساخته شده است که به طور خودکار برای INP بهینه می شود، بنابراین نیازی به گزارش آن نیست.
نادرست - چارچوب‌ها می‌توانند به INP کمک کنند، اما اندازه‌گیری همچنان مرتبط است و در صورت موجود بودن داده گزارش می‌شود.

موثرترین استراتژی برای بازتولید فعل و انفعالات کند در محیط آزمایشگاه چیست؟

شبیه سازی یک دستگاه پیشرفته با اتصال شبکه کند و غیر قابل اعتماد برای ایجاد شرایط چالش برانگیز.
نادرست - در حالی که شبکه می تواند نقشی داشته باشد، قابلیت های دستگاه بیشتر احتمال دارد تعاملات کند را نشان دهد.
تست فعل و انفعالات فقط پس از بارگیری کامل صفحه و غیرفعال بودن صفحه.
نادرست - ممکن است فعل و انفعالاتی که در طول بارگیری کند هستند را از دست بدهد
تعامل با صفحه در حین بارگذاری و دنبال کردن جریان های مشترک کاربر برای شناسایی تنگناهای بالقوه.
درسته!
تمرکز بر تعاملات پیچیده و حاشیه ای که بعید است اکثر کاربران با آن مواجه شوند.
نادرست - جریان های کاربر رایج برای شناسایی مسائل معمولی INP مرتبط تر است

✨ این مسابقه توسط Gemini 1.5 تولید و توسط انسان بررسی شده است. بازخورد خود را به اشتراک بگذارید