אנחנו נרגשים לקבל תמיכה בשימוש בכלים הראשונים במדד התגובתיות בהמתנה – מאינטראקציה ועד הצגת התגובה (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
- BigQuery: INP זמין בתור
- PageSpeed Insights
- pagespeed.web.dev: נתוני שדות INP ברמת הדף וברמת המקור מממשק ה-API של CrUX הופיעו בתור Interaction to Next Paint.
- PSI API: INP זמין בתור
INTERACTION_TO_NEXT_PAINT_MS
web-vitals
ספריית JSweb-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.