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

Jeremy Wagner

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

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

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

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

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

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

INP چیست؟

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

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

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

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

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

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

• INP زیر یا در 200 میلی ثانیه به این معنی است که یک صفحه دارای پاسخگویی خوبی است.
• INP بالاتر از 200 میلی ثانیه و کمتر یا در 500 میلی ثانیه به این معنی است که پاسخگویی صفحه نیاز به بهبود دارد .
• INP بالای 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 در دسترس است تا شما را در فرآیند شناسایی تعاملات کند در میدان، و استفاده از داده‌های آزمایشگاهی برای کمک به شناسایی علل و بهینه‌سازی آنها راهنمایی کند.

تغییرات

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

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

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

دانشتان را امتحان کنید