پشتیبانی ابزار «تعامل تا ترسیم بعدی» (INP)

Brendan Kenny

Elizabeth Sweeny

بسیار خوشحالیم که اولین دور پشتیبانی ابزار را برای سنجه پاسخ‌دهی معلقه جدید، «تعامل تا ترسیم بعدی» (INP)، ارائه می‌دهیم. برای آشنایی با خود سنجه، راهنمای رسمی سنجه INP را بررسی کنید.

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

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

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

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

بازدید از «اطلاعات آماری PageSpeed»

PageSpeed Insights داده‌های فیلد را از Chrome User Experience (CrUX) Report API می‌گیرد و نمایی از عملکرد صفحه و مبدأ شما در ۲۸ روز گذشته ارائه می‌دهد. این داده‌ها اکنون شامل INP است:

آن را در اطلاعات آماری PageSpeed امتحان کنید.

مقادیر 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 Chrome

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

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

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

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

حالت بازه زمانی جدید در «پانل 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
  • pagespeed.web.dev: داده‌های فیلد INP در سطح صفحه و سطح مبدأ از CrUX API که به‌عنوان «Interaction to Next Paint» ظاهر شده است
  • PSI API: INP به‌عنوان INTERACTION_TO_NEXT_PAINT_MS دردسترس است
• کتابخانه JS‏ web-vitals
  • web-vitals شامل پشتیبانی INP می‌شود
• افزونه Web Vitals Chrome
  • شامل اندازه‌گیری INP محلی و داده‌های فیلد INP درصورت دردسترس بودن از CrUX API
• Lighthouse
  • پانل Lighthouse در DevTools: اندازه‌گیری INP در حالت «بازه زمانی» در Chrome Canary (‏۱۰۴) دردسترس است
  • مدول npm در Lighthouse: اندازه‌گیری INP در بازه‌های زمانی دردسترس است (از puppeteer برای ورودی مصنوعی استفاده کنید)

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

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

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