תחילת העבודה עם מעקב ביצועים באינטרנט

לפני שמתחילים

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

  • יצירת פרויקט ב-Firebase

  • רישום של אפליקציית האינטרנט ב-Firebase

שימו לב: כשמוסיפים את Firebase לאפליקציה, יכול להיות שתשלימו חלק מהשלבים שמתוארים בהמשך הדף (לדוגמה, הוספת ה-SDK והפעלת Firebase).

שלב 1: מוסיפים ומפעילים את Performance Monitoring

  1. אם עדיין לא עשיתם זאת, התקינו את Firebase JS SDK והפעילו את Firebase.

  2. מוסיפים את ה-JS SDK של Performance Monitoring ומפעילים את Performance Monitoring:

Web 

import { initializeApp } from "firebase/app";
import { getPerformance } from "firebase/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = getPerformance(app);

Web 

import firebase from "firebase/compat/app";
import "firebase/compat/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = firebase.performance();

ערכת ה-SDK של Performance Monitoring מתעדת באופן אוטומטי את מדדי הליבה לבדיקת חוויית המשתמש באתר (Core Web Vitals).

שלב 2: יוצרים אירועי ביצועים כדי להציג נתונים ראשוניים

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

  1. מציגים את אפליקציית האינטרנט בסביבה מקומית.

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

  3. נכנסים למרכז הבקרה Performance במסוף Firebase. הנתונים הראשוניים אמורים להופיע תוך כמה דקות.

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

שלב 3: (אופציונלי) הצגת הודעות ביומן של אירועי ביצועים

  1. פותחים את הכלים למפתחים בדפדפן (לדוגמה, הכרטיסייה Network בכלי הפיתוח ל-Chrome או Network Monitor ב-Firefox).

  2. מרעננים את אפליקציית האינטרנט בדפדפן.

  3. בודקים אם יש הודעות שגיאה בהודעות היומן.

  4. אחרי כמה שניות, מחפשים קריאה לרשת אל firebaselogging.googleapis.com בכלים למפתחים בדפדפן. אם הקריאה הזו קיימת, סימן שהדפדפן שולח נתוני ביצועים ל-Firebase.

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

שלב 4: (אופציונלי) הוספת מעקב מותאם אישית לקוד ספציפי

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

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

בקוד, אתם מגדירים את ההתחלה והסוף של מעקב אחר קוד בהתאמה אישית (ומוסיפים את המדדים המותאמים אישית הרצויים) באמצעות ה-API שסופק על ידי ה-SDK של Performance Monitoring.

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

שלב 5: פורסים את האפליקציה ובודקים את התוצאות

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

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

השלבים הבאים