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

Brendan Kenny

Elizabeth Sweeny

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

הצעה למדידה

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

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

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

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

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