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