پشتیبانی از ابزار Interaction to Next Paint (INP).

Brendan Kenny

Elizabeth Sweeny

ما از داشتن اولین دور پشتیبانی ابزار برای معیار جدید پاسخگویی در انتظار ، تعامل با رنگ بعدی (INP) هیجان زده هستیم. برای آشنایی با خود معیار، راهنمای رسمی متریک INP را بررسی کنید.

اندازه گیری پیشنهادی

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

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

توجه: برای کسب اطلاعات بیشتر در مورد نحوه استفاده از داده‌های آزمایشگاهی و میدانی، در مورد اینکه چرا داده‌های آزمایشگاهی و میدانی می‌توانند متفاوت باشند (و در مورد آن چه باید کرد) مطالعه کنید.

کشف کنید که کاربران واقعی شما چه چیزی را تجربه می کنند (داده های میدانی)

از PageSpeed ​​Insights دیدن کنید

PageSpeed ​​Insights داده‌های میدانی را از API گزارش تجربه کاربر Chrome (CrUX) استخراج می‌کند و تصویری از عملکرد صفحه و مبدا شما در 28 روز گذشته ارائه می‌کند. این داده ها اکنون شامل INP می شوند:

آن را در PageSpeed ​​Insights امتحان کنید.

مقادیر INP خود را از فیلد جمع آوری کنید

اگر می‌خواهید خودتان داده‌های INP را برای یک سایت جمع‌آوری کنید، ساده‌ترین راه برای انجام این کار کتابخانه web-vitals است که اکنون در نسخه بتا خود از پشتیبانی کامل INP برخوردار است.

import {onINP} from 'web-vitals';

onINP(({value}) => {
  // Log the value to the console, or send it to your analytics provider.
  console.log(value);
});

درباره web-vitals و نحوه اندازه گیری در کنسول DevTools بیشتر بخوانید.

افزونه Web Vitals کروم

افزونه Web Vitals هم نمای کلی از تجربه صفحه کاربران شما (از CrUX API) و هم مقادیر بیدرنگ CWV و معیارهای کلیدی بازدید فعلی از صفحه را ارائه می دهد.

افزونه Web Vitals را برای Chrome نصب کنید.

تشخیص مشکلات عملکرد (داده های آزمایشگاهی)

از جریان های کاربر فانوس دریایی استفاده کنید

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

همین سری از تعاملات را می توان با استفاده از جریان های کاربر Lighthouse خودکار کرد. INP در جریان کاربران از Lighthouse 9.6 در دسترس است.

جزئیات در دسترس بودن ابزار

• گزارش تجربه کاربر Chrome (CrUX)
  • BigQuery : INP به عنوان interaction_to_next_paint در دسترس است
  • CrUX API : INP به عنوان interaction_to_next_paint در دسترس است
  • داشبورد CrUX : شامل داده های INP است
• PageSpeed ​​Insights
  • pagespeed.web.dev : داده‌های فیلد INP در سطح صفحه و سطح مبدا از CrUX API به‌عنوان «تعامل با رنگ بعدی» ظاهر شد.
  • PSI API : INP در دسترس به عنوان INTERACTION_TO_NEXT_PAINT_MS
• کتابخانه JS web-vitals
  • web-vitals شامل پشتیبانی INP است
• افزونه Web Vitals کروم
  • شامل اندازه‌گیری محلی INP و داده‌های میدان INP زمانی که از CrUX API در دسترس باشد
• فانوس دریایی
  • پانل Lighthouse در DevTools : اندازه‌گیری INP در حالت «زمان زمانی» در Chrome Canary (104) موجود است
  • ماژول Lighthouse npm : اندازه‌گیری INP در بازه‌های زمانی موجود است (از عروسک‌گردان برای ورودی مصنوعی استفاده کنید)

کارهای آینده و درخواست بازخورد

با حرکت رو به جلو، تیم‌های ابزار Chrome به سرمایه‌گذاری در قابلیت‌های اشکال‌زدایی و توصیه‌های بهینه‌سازی برای INP ادامه خواهند داد.

اگر بازخوردی از سودمندی متریک گرفته تا سهولت اندازه‌گیری دارید، لطفاً آن را به گروه Google web-vitals-feedback بیاورید.