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

Brendan Kenny

Elizabeth Sweeny

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

מדידה מוצעת

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

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

הערה: כדי ללמוד איך להפיק תועלת גם מנתונים מהמעבדה וגם מנתונים מהשטח, כדאי לקרוא את המאמר למה נתונים מהמעבדה ונתונים מהשטח עשויים להיות שונים (ומה עושים בקשר לזה).

רוצה נתונים על החוויה של המשתמשים בפועל? (נתוני שדה)

מעבר אל PageSpeed Insights

כלי PageSpeed Insights שולף נתוני שטח מ-Report 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 ל-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 ב-DevTools: מדידת INP זמינה במצב 'טווח זמן' ב-Chrome Canary (104)
  • מודול npm של Lighthouse: מדידת INP זמינה בפרקי זמן (משתמשים ב-puppeteer להזנה סינתטית)

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

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

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