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

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

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

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

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

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

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

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

  2. מוסיפים את Performance Monitoring JS SDK ומאתחלים את 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();

‫Performance Monitoring SDK מתעד באופן אוטומטי את Core Web Vitals.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

אפשר לעקוב אחרי נתוני הביצועים בלוח הבקרה של Firebase.

השלבים הבאים