תמיכה בכלי מאינטראקציה ועד הצגת התגובה (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 ואיך למדוד אותו במסוף של כלי הפיתוח.

תוסף Web Vitals ל-Chrome

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

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

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

שימוש במסלולי המשתמשים של Lighthouse

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

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

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

• הדוח לגבי חוויית המשתמש ב-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 ל-Chrome
  • כולל מדידת INP מקומית ונתוני שדה של INP כשהם זמינים מ-CrUX API
• Lighthouse
  • חלונית Lighthouse בכלי הפיתוח: מדידת INP זמינה במצב 'טווח זמן' ב-Chrome Canary‏ (104)
  • מודול npm של Lighthouse: מדידת INP זמינה בטווחי זמן (משתמשים ב-Puppeteer לקלט סינתטי)

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

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

אם יש לכם משוב על כל דבר, החל מהתועלת של המדד ועד לקלות המדידה, אתם מוזמנים לשתף אותו בקבוצת Google‏ web-vitals-feedback.