Check out what’s new from Firebase at Google I/O 2022. Learn more

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

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

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

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

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

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

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

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

  • השהיית קלט ראשונה - מדד שמודד את הזמן שבין הזמן שבו המשתמש מקיים אינטראקציה עם דף ועד שהדפדפן מסוגל להגיב לקלט זה

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

הגדרה של עקבות טעינת עמוד

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

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

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

עקבות אלה הן עקבות מחוץ לקופסה, כך שלא ניתן להוסיף להן מדדים מותאמים אישית או מאפיינים מותאמים אישית.

צבע ראשון

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

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

  • מתחיל כאשר המשתמש מנווט לדף.

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

צבע תוכן ראשון

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

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

  • מתחיל כאשר המשתמש מנווט לדף.

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

domInteractive

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

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

  • מתחיל כאשר המשתמש מנווט לדף.

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

domContentLoadedEventEnd

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

  • מתחיל כאשר המשתמש מנווט לדף.

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

loadEventEnd

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

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

  • מתחיל כאשר המשתמש מנווט לדף.

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

עיכוב קלט ראשון

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

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

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

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

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

עקוב, הצג וסנן נתוני ביצועים

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

עקוב אחר מדדי מפתח במרכז השליטה שלך

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

תמונה של לוח המדדים בלוח המחוונים לניטור הביצועים של Firebase

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

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

למידע נוסף על השימוש בלוח המחוונים .

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

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

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

תמונה של נתוני ניטור הביצועים של Firebase מסוננים לפי תכונה
  • סנן לפי כתובת אתר של דף כדי להציג נתונים עבור דף ספציפי באתר שלך
  • סנן לפי סוג חיבור אפקטיבי כדי ללמוד כיצד חיבור 3G משפיע על האפליקציה שלך
  • סנן לפי מדינה כדי לוודא שמיקום מסד הנתונים שלך אינו משפיע על אזור ספציפי

למידע נוסף על הצגת נתונים עבור העקבות שלך .

הצעדים הבאים

  • למידע נוסף על שימוש במאפיינים לבחינת נתוני ביצועים.

  • למידע נוסף על איך לעקוב אחר בעיות ביצועים במסוף Firebase.

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