Interaction to Next Paint (INP) یک معیار جدید Core Web Vital متمرکز بر پاسخگویی است که قرار است در 12 مارس 2024 جایگزین First Input Delay شود. بهینه سازی برای INP با ابزارهای مناسب برای نظارت و ردیابی آن آسان تر است.
Interaction to Next Paint (INP) چیست؟
INP مقدار زمانی را که بازدیدکنندهی سایت پس از انجام کاری مانند کلیک بر روی یک دکمه یا تایپ کردن منتظر میماند و زمانی که سایت زمانی است که وبسایت فیدبک بصری را ارائه میدهد را اندازهگیری میکند. INP یک معیار است که نشان میدهد چه مقدار از زمان فیدبک بصری پس از تعامل کاربر مسدود است.
پشت سر این معیار این ایده قرار دارد که یک صفحه وب بدون پاسخگویی، یک تجربه کاربری ضعیف است. به عنوان مثال، افزودن محصول به سبد خرید باید بلافاصله پاسخی بصری ایجاد کند که به بازدیدکننده سایت نشان دهد با این تعامل برخورد شده است. در آن مثال خاص، INP زمان اضافه شدن محصول به سبد خرید را اندازه گیری نمی کند، بلکه فقط مدت زمان مسدود شدن بازخورد بصری آن عمل را اندازه گیری می کند.
امتیازات کمتر INP به معنای زمان پاسخ سریع است، که همان هدف است. امتیازات خوب INP آنهایی هستند که زیر 200 میلیثانیه هستند. جاوااسکریپت و CSS هدف اصلی برای بهینهسازی INP هستند.
INP موارد زیر را از تعاملهای کاربری اندازهگیری میکند:
- کلیکهای موس
- لمسها روی دستگاههایی که صفحهلمسی دارند.
- فشار دادن روی صفحه کلید (هر دو صفحه کلید فیزیکی و صفحه کلید مجازی)
ابزارهای اندازهگیری و بهینهسازی INP
هیچ ابزاری به تنهایی نمیتواند مشکلات INP را برطرف کند، زیرا این مشکلات از جاوا اسکریپت و CSS استفاده شده در تمها، افزونهها، ویژگیها و قابلیتهای اضافی که در یک صفحه وب استفاده میشوند، نشأت میگیرد.
به عنوان مثال، نصب و استفاده از (image carousel) یا افکتهای انیمیشن، کد جاوا اسکریپت و CSS اضافی را بارگذاری میکند که میتواند تأثیر منفی بر امتیاز INP بگذارد. کوچکسازی (minify) کردن جاوااسکریپت و CSS همیشه راهحل نیست، به این معنی که یک گام کلیدی برای بهینهسازی (Interaction To Next Paint) ممیزی کد و شناسایی هر چیزی است که به صفحه وب و کاربر برای رسیدن به هدفشان کمک نمیکند.
بنابراین، عملکرد کلیدی یک ابزار بهینهسازی INP شناسایی موارد مسدودکننده یا به تأخیر انداختن بازخورد بصری ناشی از تعامل کاربر است.
پنج ابزار تشخیصی Interaction To Next Paint
- Site Kit توسط گوگل – آنالیتیکس، کنسول جستجو، ادسنس، سرعت
افزونه وردپرس توسط گوگل
Site Kit by Google با بیش از 4 میلیون نصب وردپرس، یکی از قدرتمندترین راهها برای ادغام دادههای جستجوی گوگل در داشبورد وردپرس برای دسترسی آسان در داخل وردپرس است.
این ابزار دادههای PageSpeed Insights و Search Console را به همراه توصیههای عملی در مورد مواردی که باید بهبود یابد، نمایش میدهد. - DebugBear Interaction to Next Paint Tool (نسخه های رایگان و پولی)
INP Debugger رایگان
DebugBear یک ابزار محبوب برای نظارت بر سرعت صفحه است که نسخه حرفهای آن شامل تستهای زمانبندیشده، اعلانهای رویداد، تستهای عملکردی که تأثیرات را قبل از استقرار زنده پیشنمایش میدهد و مزایای دیگری میشود.
اما همچنین ابزارهای رایگان مانند این ابزار عالی Interaction to Next Paint را ارائه میدهد که یک صفحه وب را بازدید میکند و مشکلات را تشخیص میدهد و نکات عملی برای رفع مشکلات Interaction To Next Paint ارائه میدهد. - افزونه کروم Web Vitals
این افزونه کروم معیارهای Core Web Vitals، از جمله INP را ارائه میدهد. یک ویژگی مفید این افزونه نمایشگر سربالا (HUD) منحصر به فرد است که روی صفحه وب قرار میگیرد و میتواند در هنگام توسعه یا ایجاد تغییرات در یک صفحه وب مفید باشد. - سرعت سایت TREO
ابزار سرعت سایت Treo ابزارهای Page Speed باورنکردنی سریع را با یک رابط کاربری جذاب ارائه میدهد که خواندن و درک آن آسان است.
یک ویژگی مفید Treo این است که کاربران میتوانند با انتخاب کشور خاص، معیارها را در آن کشور مشاهده کنند.
یک ابزار پیشرفته برای اندازهگیری معیارهای اصلی Core Web Vitals از بازدیدکنندگان واقعی وجود دارد که میتوانند توسط ناشران فردی بر روی سرورهای وب خودشان پیادهسازی شود. این ابزار میتواند به ناشران کمک کند تا امتیازهای واقعی معیارهای اصلی ویتالهای وب را ببینند که برای رفع مشکلات واقعی صفحه وب مفید هستند. یک مرور و توضیحات در اینجا در دسترس است.
- Chrome Web Vitals Library
ابزار پیشرفتهای برای اندازهگیری معیارهای اصلی وب از بازدیدکنندگان واقعی سایت وجود دارد که میتواند توسط ناشران در سرورهای وب مستقر شود. این ابزار میتواند ناشران را قادر سازد تا نمرات اصلی اصلی وب را که برای عیبیابی مشکلات واقعی صفحه وب مفید هستند، ببینند. یک مرور کلی و توضیحی در اینجا موجود است.
ابزارهای اضافی
استودیو لوکر Looker Studio
Looker Studio برای تجسم دادههای INP
Looker Studio، که قبلا با نام Google Data Studio شناخته می شد، یک ابزار تجسم داده است که به کاربران امکان می دهد به منابع داده متصل شوند و اطلاعات را با گزارش ها و داشبوردهای قابل درک به راحتی تجسم کنند.
برای یافتن کانکتور گزارش Chrome UX (CrUX) که می تواند داده های منبع Chrome UX را به گزارشی تبدیل کند که به راحتی امکان مشاهده روندهای واقعی CWV را در دنیای واقعی فراهم می کند، کافیست به اینجا: link to Chrome UX Report connector for Looker Studio بروید.
توجه: من نمی توانم مستقیماً به وب سایت ها دسترسی پیدا کنم، بنابراین نمی توانم پیوند را در بالا قرار دهم. اما با جستجوی “Chrome UX Report connector for Looker Studio” می توانید آن را پیدا کنید.
گوگل یک توضیحدهنده در صفحات Chrome for Developers منتشر کرده است که نشان میدهد چگونه یک داشبورد CrUX را در Looker راهاندازی کنید. آن را بررسی کنید، استفاده از این ابزار برای تبلیغات سئو بسیار آسان است!
پلتفرمهای ساخت وبسایت آماده هستند
پلتفرم سازنده وبسایت Duda تعامل با نقاشی بعدی را پیشبینی کرده بود و از پیش کار کرده بود تا اطمینان حاصل کند که سایتهایی که از پلتفرم آنها استفاده میکنند، نمره خوبی در معیار جدید کسب میکنند.
به سرعت برای INP آماده شوید
اگرچه INP ممکن است یک عامل مستقیم رتبهبندی نباشد، اما INP هنوز یک معیار مفید برای ایجاد تجربهی صفحه سریعتر است، زیرا اطلاعاتی نشان داده شده است که سرعت سایت فروشها، کلیکها و نمایشهای تبلیغاتی را افزایش میدهد و با سیگنالهایی که گوگل برای رتبهبندی استفاده میکند، همخوانی دارد.
منابع: https://www.searchenginejournal.com/inp-tools/507355/