Catch up on everthing we announced at this year's Firebase Summit. Learn more

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

צבע ראשון

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

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

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

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

צבע ראשון מרוצה

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

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

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

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

domInteractive

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

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

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

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

domContentLoadedEventEnd

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

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

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

loadEventEnd

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

הצעדים הבאים