שימוש בתוסף Web Vitals כדי לנפות באגים בבעיות של מדדי ליבה לבדיקת חוויית המשתמש באתר

התוסף Web Vitals מציג עכשיו מידע נוסף על ניפוי באגים, שיעזור לכם לזהות את הגורמים העיקריים לבעיות במדדים הבסיסיים של חוויית המשתמש.

Barry Pollard

Michal Mocny

Rick Viscomi

Brendan Kenny

תאריך פרסום: 4 במאי 2023

זהירות: התכונות שמתוארות בפוסט הזה זמינות עכשיו בכלי הפיתוח ל-Chrome. התוסף Web Vitals יצא משימוש והוא יוסר ב-7 בינואר 2025.

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

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

הצגת מידע על תוצאות ניפוי הבאגים במסוף

כבר זמן מה יש בתוסף Web Vitals אפשרות לניפוי באגים באמצעות 'רישום ביומן במסוף'. אפשר להפעיל אותו במסך האפשרויות:

לפני השדרוג האחרון הזה, תועדו הפלטים מה-web-vitals library (שמבסס את התוסף) באובייקט JSON:

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

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

מידע חדש על ניפוי באגים לכל מדד

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

מידע על תוצאות ניפוי הבאגים של LCP

במדד Largest Contentful Paint‏ (LCP), אנחנו מציגים גם את הרכיב וגם את פירוט 4 השלבים שמפורטים במדריך שלנו בנושא אופטימיזציה של LCP:

זמן ה-LCP (2,876 אלפיות השנייה, או כ-2.9 שניות) מודגש בכתום כי הוא נמצא בקטגוריה 'דרוש שיפור'.

בדוגמה הזו, נראה שמשך הזמן Resource load time הוא הארוך ביותר. לכן, כדי לשפר את זמן ה-LCP, צריך לבצע אופטימיזציה. אולי כדאי להימנע מאירוח בדומיין נפרד, או באמצעות תמונות קטנות יותר או פורמטים יעילים יותר. במקרה הזה הסיבה לכך היא האטה באופן מלאכותי לצורך הדגמה של הפלט – web.dev הוא אתר מהיר 😀

אפשר גם להעביר את העכבר מעל הרכיב כדי להדגיש את התמונה:

לחיצה ימנית על הרכיב מאפשרת גם לחשוף אותו בחלונית הרכיבים.

כאן אלמנט ה-LCP הוא תמונה, והעכבר מרחף מעל התמונה במסוף שמימין, והאלמנט מודגש גם באתר שמשמאל.

מידע על תוצאות ניפוי הבאגים של CLS

גם השינויים שתורמים ל-Cumulative Layout Shift (CLS) מופיעים עכשיו, ואפשר להעביר את העכבר מעליהם כדי להדגיש את הרכיב הרלוונטי:

בצילום המסך שלמעלה מוצגות שתי העברות, הראשונה מורכבת משני רכיבים (כשתמונה של באנר נטענת והתוכן שמתחתיה מועבר למטה) והשנייה מורכבת מ-4 רכיבים (כשמודעה דינמית נטענת ורוב הדף מועבר למטה).

מעבירים את העכבר מעל הרכיב h2 בצילום המסך הזה במסוף מצד שמאל, ובצד שמאל אפשר לראות את הרכיב הזה שמדגיש את הרכיב באתר.

נקודת מפתח:

חשוב לזכור שהרכיבים שהועברו הם לא הרכיבים שגורמים להזזה, אלא הרכיבים שהושפעו מהזזות.

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

מידע על תוצאות ניפוי הבאגים של FID

במדד השהיה לאחר קלט ראשוני (FID) מוצגים האלמנט המושפע (שוב, אפשר להעביר מעליו את העכבר כדי להדגיש אותו בדף) וסוג האינטראקציה, יחד עם אובייקט ה-JSON המלא כרגיל:

מידע על תוצאות ניפוי הבאגים של INP

עבור המדד זמן אינטראקציה עד התוכן הבא (INP), הוספנו שני יומנים חדשים:

• INP – האינטראקציה הארוכה ביותר
• אינטראקציות – כל האינטראקציות

מדד INP

קודם כול, אנחנו מדגישים את מדד ה-INP כשיש בו שינוי:

בדומה ל-LCP, התוסף מפרק את זמן ה-INP לשלושה שלבים:

1. השהיה לאחר קלט
2. משך העיבוד
3. עיכוב בהצגת התגובה

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

אינטראקציות

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

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

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

סינון יומני המסוף

כל המידע הנוסף הזה, למרות שהוא שימושי, עלול להסיח את הדעת אם אתם מבצעים פיתוח אחר שלא קשור ל-Core Web Vitals, או אם אתם מתעניינים רק במדד Core Web Vital אחד מסוים כרגע.

אתם יכולים להשתמש באפשרויות הסינון של המסוף בכלי הפיתוח כדי לסנן את ההודעות או את כולן:

• כדי להסיר את כל ההודעות מהתוסף, אפשר להשבית את התכונה הזו באפשרויות או להשתמש במסנן -Extension.
• כדי לבחון רק LCP, אפשר להשתמש במסנן Web Vitals Extension LCP.
• כדי להציג רק את נתוני ה-INP והאינטראקציות, אפשר להשתמש במסנן Web Vitals Extension -LCP -CLS -FID.

אנחנו מנסים לצמצם את מספר האפשרויות בתוסף הזה, אבל אם הסינון של DevTools לא מספיק לך ואת/ה מעדיף/ה אפשרויות אחרות, אפשר לדווח לנו על כך בדיווח על בעיה ב-GitHub.

סיכום

אנחנו מקווים שהאפשרויות החדשות לניפוי באגים בגרסה האחרונה של התוסף יהיו מועילות, ושהן מאפשרות לזהות ולפתור בעיות Core Web Vitals בקלות רבה יותר, ולשפר את חוויות המשתמש באתר.

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

נשמח לקבל מכם משוב על השיפורים האלה או הצעות נוספות בכלי למעקב אחר בעיות ב-GitHub.

תודות

התמונה הראשית (Hero) של Farzad ב-Unsplash