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

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

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

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

  • צבע 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 משפיע האפליקציה שלך
  • סנן לפי מדינה לוודא מיקום מסד הנתונים שלך לא משפיע על אזור מסוים

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

הצעדים הבאים