מידע על נתוני ביצועים של טעינת דפים (אפליקציות אינטרנט)

Performance Monitoring משתמש במעקבים כדי לאסוף נתונים על תהליכים במעקב באפליקציה. מעקב הוא דוח שמכיל נתונים שנאספו בין שתי נקודות זמן באפליקציה.

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

  • הצגת תוכן ראשוני – מדד שמודד את הזמן שחולף מהרגע שבו המשתמש מנווט לדף ועד לזמן שבו מתרחש שינוי חזותי כלשהו

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

  • domInteractive – מדד שמודד את הזמן שחולף מהרגע שבו המשתמש מנווט לדף ועד שהדף נחשב לאינטראקטיבי עבור המשתמש.

  • domContentLoadedEventEnd – מדד שמודד את הזמן שחולף מהרגע שבו המשתמש מנווט לדף ועד שהמסמך ה-HTML הראשוני נטען ומנותח במלואו

  • loadEventEnd – מדד שמודד את הזמן שחולף מהרגע שבו המשתמש מנווט לדף ועד לסיום אירוע הטעינה של המסמך הנוכחי

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

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

הגדרה של ניתוח נתוני טעינה של דף

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

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

מדדים שנאספים למעקב אחר טעינות דפים

הטרייסים האלה הם טרייסים מוכנים לשימוש, ולכן אי אפשר להוסיף להם מדדים מותאמים אישית או מאפיינים מותאמים אישית.

הצגת תמונה ראשונית במסך (FP)

המדד הזה מודד את הזמן שחולף מהרגע שבו המשתמש מנווט לדף ועד שמתרחש שינוי חזותי כלשהו.

המדד הזה שימושי כי הצגת התוכן הראשונה מאותתת למשתמשים שהדף מתחיל להיטען.

  • מופעל כשהמשתמש עובר לדף.

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

הצגת תוכן ראשוני (FCP)

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

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

  • מופעל כשהמשתמש עובר לדף.

  • המדד הזה מפסיק לפעול מיד אחרי שהדפדפן מעבד את התוכן הראשון מ-DOM, כולל טקסט, תמונה (כולל תמונות רקע), לוח קנבס שאינו לבן או קובץ SVG.

domInteractive

המדד הזה מודד את הזמן שחולף מהרגע שבו המשתמש מנווט לדף ועד שהדף נחשב לאינטראקטיבי עבור המשתמש.

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

  • מופעל כשהמשתמש עובר לדף.

  • הבדיקה נעצרת מיד לפני שסוכן המשתמש מגדיר את מצב הנכונות של מסמך ה-HTML הנוכחי ל'אינטראקטיבי'.

domContentLoadedEventEnd

המדד הזה מודד את הזמן שחולף מהרגע שבו המשתמש מנווט לדף ועד שטעינה וניתוח של מסמך ה-HTML הראשוני מסתיימים.

  • מופעל כשהמשתמש עובר לדף.

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

loadEventEnd

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

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

  • מופעל כשהמשתמש עובר לדף.

  • הפעולה מופסקת מיד אחרי שאירוע הטעינה של מסמך ה-HTML הנוכחי מסתיים.

השהיה לאחר קלט ראשוני (FID)

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

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

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

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

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

מעקב אחר נתוני הביצועים, הצגה שלהם וסינון שלהם

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

מעקב אחר מדדי מפתח במרכז הבקרה

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

תמונה של לוח המדדים בקטע <span class=מרכז הבקרה של מעקב הביצועים ב-Firebase" />

כדי להוסיף מדד ללוח המדדים:

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

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

איך משתמשים במרכז הבקרה

הצגת נתוני המעקב והנתונים שלהם

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

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

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

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

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

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

תמונה של <span class=נתונים של מעקב אחר ביצועים ב-Firebase שמסוננים לפי מאפיין" />
  • סינון לפי כתובת ה-URL של הדף כדי להציג נתונים לגבי דף ספציפי באתר
  • סינון לפי סוג החיבור בפועל כדי לראות איך חיבור 3G משפיע על האפליקציה
  • סינון לפי מדינה כדי לוודא שמיקום מסד הנתונים לא משפיע על אזור ספציפי

מידע נוסף על הצגת נתונים של שרטוטים

השלבים הבאים