תמיכה בכלי מאינטראקציה ועד הצגת התגובה (INP)

אנחנו נרגשים לקבל תמיכה בשימוש בכלים הראשונים במדד התגובתיות בהמתנה – מאינטראקציה ועד הצגת התגובה (INP). במדריך הרשמי של מדדי INP תוכלו למצוא מידע על המדד עצמו.

מדידה מוצעת

המטרה של מדידת INP היא להבין באיזו מהירות הדף שלכם מגיב לקלט של משתמשים. הדרך היחידה לקבל נתונים מציאותיים היא למדוד כיצד הדף מגיב למשתמשים אמיתיים שמבקרים באתר שלכם באמצעות נתונים מהשדה.

לאחר מכן, כדאי למדוד INP בשיעור ה-Lab כדי להבין טוב יותר תזמוני אירועים ואיפה צריך לבצע אופטימיזציה. כלי מעבדה לא מבצעים אינטראקציה אוטומטית עם הדף, ולכן יש להזין בהם קלט ידני בזמן המדידה או ליצור סקריפטים שלהם באמצעות כלי אוטומציה כמו Puppeteer. כשהמערכת מזהה אינטראקציות מרכזיות מתהליכים אופייניים של משתמשים, אפשר לנסות לזהות בעיות או לתכנת אותן, ולבצע בהן בדיקות CI כדי למנוע רגרסיות.

לגלות מה המשתמשים בפועל חווים (נתוני שטח)

כניסה ל-PageSpeed Insights

הכלי PageSpeed Insights שולף נתוני שדות מ-Chrome User Experience (CrUX) Report API, ומציג תמונת מצב של ביצועי הדף והמקור שלכם ב-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 ואופן המדידה במסוף כלי הפיתוח

תוסף Web Vitals ל-Chrome

תוסף Web Vitals מספק סקירה כללית של חוויית המשתמש בדף (מ-CWV API) וגם את הערכים של CWV בזמן אמת ומדדים עיקריים של הביקור הנוכחי בדף.

מתקינים את תוסף Web Vitals ל-Chrome.

מאבחנים בעיות בביצועים (נתוני מעבדה)

איך משתמשים ב-Lighthouse מסלולי משתמשים

מצב טווח הזמן החדש בחלונית Lighthouse ב-DevTools מאפשר להפעיל את Lighthouse, לבצע אינטראקציה עם דף הבדיקה בכל דרך שרוצים ולאחר מכן לקבל דוח לגבי מה שקרה במהלך התקופה הזו. הדוח הזה כולל עכשיו INP וביקורת שעוזרת לאבחן בעיות של תגובה.

אפשר להגדיר את אותה סדרה של אינטראקציות באופן אוטומטי באמצעות זרימת משתמשים ב-Lighthouse. החל מ-Lighthouse 9.6, INP זמין לתהליכי עבודה של משתמשים.

פרטים על זמינות הכלי

• דוח לגבי חוויית המשתמש ב-Chrome (CrUX)
  • BigQuery: INP זמין בתור interaction_to_next_paint
  • CrUX API: INP זמין בתור interaction_to_next_paint
  • לוח הבקרה של CrUX: כולל נתוני INP
• PageSpeed Insights
  • pagespeed.web.dev: נתוני שדות INP ברמת הדף וברמת המקור מממשק ה-API של CrUX הופיעו בתור Interaction to Next Paint.
  • PSI API: INP זמין בתור INTERACTION_TO_NEXT_PAINT_MS
• web-vitals ספריית JS
  • web-vitals כולל תמיכה ב-INP
• תוסף Web Vitals ל-Chrome
  • כולל מדידה מקומית של INP ונתוני שדות INP אם הם זמינים מ-CrUX API
• Lighthouse
  • החלונית Lighthouse ב-DevTools: מדידת INP זמינה במצב 'timespan' ב-Chrome Canary (104)
  • מודול npm Lighthouse: מדידת INP זמינה בפרקי זמן (יש להשתמש ב-puppeteer לקלט סינתטי)

עבודה עתידית ובקשת משוב

בהמשך, צוותי הכלים של Chrome ימשיכו להשקיע ביכולות ניפוי באגים ובהמלצות לאופטימיזציה עבור INP.

אם יש לך משוב על נושא השימושיות של המדד, כדי להקל על המדידה, אפשר לשלוח אותו אל קבוצת Google בנושא Web-vitals-feedback.