Performance Monitoring משתמש במעקבים כדי לאסוף נתונים על תהליכים במעקב באפליקציה. מעקב הוא דוח שמכיל נתונים שנאספו בין שתי נקודות זמן באפליקציה.
באפליקציות אינטרנט, Performance Monitoring אוסף באופן אוטומטי נתיב לכל דף באפליקציה שנקרא נתיב טעינה של דף. בכל מעקב אחר טעינת דף נאספים המדדים הבאים שמוגדרים כברירת מחדל:
Largest Contentful Paint – מדד שמודד את הזמן שחולף מהרגע שבו המשתמש מנווט לדף ועד לרגע שבו מתרחש השינוי החזותי הגדול ביותר.
מהירות התגובה לאינטראקציה באתר (INP) – מדד שמודד את הזמן הארוך ביותר בין האינטראקציה של המשתמש עם הדף לבין הצביעה הבאה.
תזוזת פריסה נצברת – מדד שמודד ומעניק ציונים לשינויי פריסה בלתי צפויים בדף
הצגת תוכן ראשוני – מדד שמודד את הזמן שחולף מהרגע שבו המשתמש מנווט לדף ועד לזמן שבו מתרחש שינוי חזותי כלשהו
הצגת תוכן ראשוני (FCP) – מדד שמודד את הזמן שחולף מהרגע שבו משתמש מנווט לדף ועד שהתוכן המשמעותי מוצג, כמו תמונה או טקסט.
domInteractive – מדד שמודד את הזמן שחולף מהרגע שבו המשתמש מנווט לדף ועד שהדף נחשב לאינטראקטיבי עבור המשתמש.
domContentLoadedEventEnd – מדד שמודד את הזמן שחולף מהרגע שבו המשתמש מנווט לדף ועד שהמסמך ה-HTML הראשוני נטען ומנותח במלואו
loadEventEnd – מדד שמודד את הזמן שחולף מהרגע שבו המשתמש מנווט לדף ועד לסיום אירוע הטעינה של המסמך הנוכחי
השהיה לאחר קלט ראשוני – מדד שמודד את הזמן שחולף מהרגע שבו המשתמש מבצע אינטראקציה עם הדף ועד לרגע שבו הדפדפן יכול להגיב לקלט הזה.
אפשר להציג נתונים מהמעקבים האלה בכרטיסייה המשנית טעינה של דף בטבלת המעקבים, שנמצאת בחלק התחתון של לוח הבקרה ביצועים (מידע נוסף על השימוש במסוף מופיע בהמשך הדף).
הגדרה של ניתוח נתוני טעינה של דף
בניתוח הזה נמדדים כמה מדדים לגבי אופן טעינת הדפים באפליקציה, ובמיוחד משך הזמן עד שמגיעים לנקודות טעינה נפוצות, כמו אפליקציה רספונסיבית.
נתוני המעקב אחר טעינה של דפים עוזרים לכם לעקוב אחרי מדדי הליבה לבדיקת חוויית המשתמש באתר של האפליקציה, כמו הצגת התמונה הראשונית (FP) עם תוכן.
מדדים שנאספים למעקב אחר טעינות דפים
הטרייסים האלה הם טרייסים מוכנים לשימוש, כך שלא ניתן להוסיף להם מדדים מותאמים אישית או מאפיינים מותאמים אישית.
Largest Contentful Paint (LCP)
המדד הזה מודד את הזמן שחלף מהרגע שבו המשתמש מנווט לדף ועד שהתוכן של התמונה, הטקסט או הסרטון הגדול ביותר מוצג.
המדד הזה עוזר להבין באיזו מהירות התוכן הראשי של דף האינטרנט מוצג למשתמש.
מופעל כשהמשתמש עובר לדף.
המדד מפסיק לפעול כשמתרחש השינוי החזותי הגדול ביותר, כולל תמונות, טקסט או רכיבי וידאו. פרטים נוספים זמינים במאמר בנושא מדדים בסיסיים של חוויית המשתמש (Core Web Vitals).
רכיב ה-Largest Contentful Paint הוא מאפיין מותאם אישית שמזהה את הרכיב שתואם ל-Largest Contentful Paint. הנתון הזה מתועד בנוסף לזמני ה-LCP.
זמן אינטראקציה עד התוכן הבא (INP)
המדד הזה מודד את הזמן שחלף מהרגע שבו משתמש יוצר אינטראקציה עם דף ועד לזמן שבו מתרחשת ההצגה הבאה.
המדד הזה שימושי כי הוא מודד את רמת הרספונסיביות של הדף לקלט של משתמשים.
מתחיל כשהמשתמש יוצר אינטראקציה עם הדף (לחיצה בעכבר, הקשה במכשיר או קלט במקלדת).
הפעולה מופסקת כשמתרחשת פעולת הצביעה הבאה. פרטים נוספים זמינים במאמר בנושא מדדים בסיסיים של חוויית המשתמש (Core Web Vitals).
המאפיין Longest interaction to next paint הוא מאפיין מותאם אישית שמזהה את הרכיב שבו המשתמש ביצע אינטראקציה כשאירוע האינטראקציה עד לציור הבא התרחש. הנתון הזה מתועד בנוסף לזמנים של האינטראקציה ועד להצגת התגובה.
Cumulative Layout Shift (CLS)
המדד הזה מודד את הרצף הארוך ביותר של ציונים לשינויי פריסה עבור כל שינוי פריסה בלתי צפוי שמתרחש במהלך כל מחזור החיים של הדף.
המדד הזה שימושי כי שינויים לא צפויים בפריסה עלולים לשבש את חוויית המשתמש. המדד הזה מדווח על ציון על סמך Layout Instability API. כאן מוסבר איך מחושב הדירוג.
Largest layout shift target הוא מאפיין בהתאמה אישית שמזהה את הרכיב שהשתנה כשהתרחש השינוי הגדול ביותר בתוכן. הערך הזה מתועד בנוסף לציון של שינוי הפריסה המצטבר.
הצגת תמונה ראשונית במסך (FP)
המדד הזה מודד את הזמן שחולף מהרגע שבו המשתמש מנווט לדף ועד שמתרחש שינוי חזותי כלשהו.
המדד הזה שימושי כי הצגת התוכן הראשונה מאותתת למשתמשים שהדף מתחיל להיטען.
מופעל כשהמשתמש עובר לדף.
הבדיקה מופסקת כשמתרחש שינוי חזותי כלשהו, כולל שינוי של צבע הרקע או טעינת כותרת.
הצגת תוכן ראשוני (FCP)
המדד הזה מודד את הזמן שחלף מהרגע שבו משתמש מנווט לדף ועד שהתוכן המשמעותי מוצג, כמו תמונה או טקסט.
המדד הזה שימושי כדי לקבל תובנות לגבי המהירות שבה המשתמשים רואים את התוכן בפועל של האפליקציה, ולא רק צבע רקע או כותרת חדשים.
מופעל כשהמשתמש עובר לדף.
המדד הזה מפסיק לפעול מיד אחרי שהדפדפן מעבד את התוכן הראשון מ-DOM, כולל טקסט, תמונה (כולל תמונות רקע), לוח קנבס שאינו לבן או קובץ SVG.
domInteractive
המדד הזה מודד את הזמן שחולף מהרגע שבו המשתמש מנווט לדף ועד שהדף נחשב לאינטראקטיבי עבור המשתמש.
המדד הזה שימושי כדי לקבל תובנות לגבי המועד שבו המשתמשים יכולים לבצע אינטראקציה עם אלמנטים באפליקציה, כמו לחצנים והיפר-קישורים, ולא רק לראות אותם במסך. חשוב לזכור שהמדד הזה לא מעיד על כך שהדפדפן יגיב לאינטראקציה (למדד הזה, אפשר לעיין במעקב אחר זמן האחזור של הקלט הראשון).
מופעל כשהמשתמש עובר לדף.
הבדיקה נעצרת מיד לפני שסוכן המשתמש מגדיר את מצב הנכונות של מסמך ה-HTML הנוכחי ל'אינטראקטיבי'.
domContentLoadedEventEnd
המדד הזה מודד את הזמן שחולף מהרגע שבו המשתמש מנווט לדף ועד שטעינה וניתוח של מסמך ה-HTML הראשוני מסתיימים.
מופעל כשהמשתמש עובר לדף.
הטעינה נעצרת מיד אחרי שמסמך ה-HTML הראשוני נטען ונותח במלואו (
DOMContentLoaded), אבל זה לא אומר שהטעינה של גיליונות הסגנונות, התמונות והפריימים המשניים הסתיימה.
loadEventEnd
המדד הזה מודד את הזמן שחלף מהרגע שבו המשתמש מנווט לדף ועד לסיום אירוע הטעינה של המסמך הנוכחי.
המדד הזה מאפשר לקבל תובנות לגבי משך הזמן שלוקח לטעון את כל התוכן, כולל גיליונות סגנונות ותמונות.
מופעל כשהמשתמש עובר לדף.
הפעולה מופסקת מיד אחרי שאירוע הטעינה של מסמך ה-HTML הנוכחי מסתיים.
השהיה לאחר קלט ראשוני (FID)
המדד הזה מודד את הזמן שחולף מהרגע שבו המשתמש מבצע אינטראקציה עם דף ועד שהדפדפן יכול להגיב לקלט הזה.
המדד הזה שימושי כי התגובה של הדפדפן לאינטראקציה של המשתמש נותנת למשתמשים את ההתרשמוות הראשונות שלהם לגבי מהירות התגובה של האפליקציה.
מתחילה כשהמשתמש יוצר בפעם הראשונה אינטראקציה עם רכיב בדף, למשל לחיצה על לחצן או על היפר-קישור.
הבדיקה מופסקת מיד אחרי שהדפדפן יכול להגיב לקלט, כלומר שהדפדפן לא עסוק בטעינת התוכן או בניתוח שלו.
שימו לב: כדי למדוד את המדד 'הזמן שחלף מהקלדה עד לתגובה הראשונה', צריך להוסיף את ספריית ה-polyfill למדד הזה. הוראות ההתקנה מפורטות במסמכי התיעוד של הספרייה.
מעקב אחר נתוני הביצועים, הצגה שלהם וסינון שלהם
כדי להציג נתוני ביצועים בזמן אמת, צריך לוודא שהאפליקציה משתמשת בגרסת SDK למעקב ביצועים שתואמת לעיבוד נתונים בזמן אמת. מידע נוסף על נתוני ביצועים בזמן אמת
מעקב אחר מדדי מפתח במרכז הבקרה
כדי לראות את המגמות של מדדי המפתח, מוסיפים אותם ללוח המדדים בחלק העליון של מרכז הבקרה ביצועים. תוכלו לזהות במהירות נסיגה בביצועים על ידי הצגת השינויים השבועיים, או לוודא שהשינויים האחרונים בקוד משפרים את הביצועים.
מרכז הבקרה של מעקב הביצועים ב-Firebase" />
כדי להוסיף מדד ללוח המדדים:
- עוברים אל לוח הבקרה לביצועים במסוף Firebase.
- לוחצים על כרטיס מדד ריק ובוחרים מדד קיים להוספה ללוח.
- לוחצים על בכרטיס מדדים מאוכלס כדי להציג אפשרויות נוספות, למשל החלפה או הסרה של מדד.
בלוח המדדים מוצגים נתוני המדדים שנאספו לאורך זמן, גם בצורה גרפית וגם כשינוי מספרי באחוזים.
הצגת נתוני המעקב והנתונים שלהם
כדי להציג את הטרייסים, עוברים למרכז הבקרה Performance במסוף Firebase, גוללים למטה לטבלת הטרייסים ולוחצים על כרטיסיית המשנה המתאימה. בטבלה מוצגים כמה מהמדדים המובילים לכל מעקב, ואפשר גם למיין את הרשימה לפי השינוי באחוזים של מדד ספציפי.
ב-Performance Monitoring יש דף פתרון בעיות במסוף Firebase שמציג שינויים במדדים, כך שקל לטפל במהירות בבעיות בביצועים ולצמצם את ההשפעה שלהן על האפליקציות והמשתמשים. אפשר להשתמש בדף פתרון הבעיות כשמקבלים מידע על בעיות פוטנציאליות בביצועים, למשל בתרחישים הבאים:
- בוחרים מדדים רלוונטיים בלוח הבקרה ומבחינים בתנודות גדולות.
- בטבלת המעקב, ממיינים כך שהפערים הגדולים ביותר יופיעו בחלק העליון, ותראו שינוי משמעותי באחוזים.
- תקבלו התראה באימייל על בעיה בביצועים.
אפשר לגשת לדף פתרון הבעיות בדרכים הבאות:
- בלוח הבקרה של המדדים, לוחצים על הלחצן הצגת פרטי המדד.
- בכרטיס מדד כלשהו, בוחרים באפשרות
=> הצגת פרטים . בדף פתרון הבעיות מוצג מידע על המדד שבחרתם. - בטבלת המעקב, לוחצים על שם מעקב או על ערך של מדד כלשהו בשורה שמשויכת למעקב הזה.
- בהתראה באימייל, לוחצים על בדיקה.
כשלוחצים על שם של מעקב בטבלת המעקבים, אפשר להציג פירוט של המדדים שמעניינים אתכם. לוחצים על הלחצן
נתוני מעקב אחר ביצועים ב-Firebase שמסוננים לפי מאפיין" />
- סינון לפי כתובת ה-URL של הדף כדי להציג נתונים לגבי דף ספציפי באתר
- סינון לפי סוג החיבור בפועל כדי לראות איך חיבור 3G משפיע על האפליקציה
- סינון לפי מדינה כדי לוודא שמיקום מסד הנתונים לא משפיע על אזור ספציפי
מידע נוסף על הצגת נתונים של שרטוטים
השלבים הבאים
מידע נוסף על שימוש במאפיינים לבדיקה של נתוני הביצועים
מידע נוסף על מעקב אחר בעיות בביצועים במסוף Firebase
להגדיר התראות על טעינת דפים שגורמים לירידה בביצועים של האפליקציה. לדוגמה, אפשר להגדיר התראה באימייל לצוות אם הזמן שחלף מהקלדה הראשונה עד לקבלת תגובה בדף ספציפי חורג מהסף שהגדרתם.