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

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

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

השלבים הבאים