Wprowadzenie do Monitorowania wydajności w internecie

Zanim zaczniesz

Jeśli jeszcze tego nie zrobisz, odwiedź Dodaj Firebase do swojego projektu JavaScript, aby dowiedzieć się, jak:

Pamiętaj, że gdy dodasz Firebase do swojej aplikacji, możesz wykonać niektóre z opisanych poniżej czynności (np. dodanie pakietu SDK i zainicjowanie Firebase).

Krok 1. Dodaj i zainicjuj Performance Monitoring

  1. Jeśli jeszcze tego nie zrobisz, zainstaluj pakiet SDK Firebase JS i zainicjuj Firebase.

  2. Dodaj pakiet SDK JS do monitorowania wydajności i zainicjuj monitorowanie wydajności:Performance MonitoringPerformance 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();

Krok 2. Dodaj bibliotekę polyfill opóźnienia pierwszego wejścia

Aby mierzyć opóźnienie pierwszego wejścia, musisz dodać bibliotekę polyfill dla tej metryki. Instrukcje instalacji znajdziesz w dokumentacji biblioteki.

Dodanie tej biblioteki polyfill nie jest wymagane, aby Performance Monitoring mogło raportować inne metriki aplikacji internetowej.

Krok 3. Wygeneruj zdarzenia dotyczące wydajności, aby wyświetlić dane początkowe

Firebase zaczyna przetwarzać zdarzenia, gdy dodasz pakiet SDK do swojej aplikacji. Jeśli nadal pracujesz lokalnie, korzystaj z aplikacji, aby generować zdarzenia na potrzeby początkowego zbierania i przetwarzania danych.

  1. Uruchom i wyświetl aplikację internetową w środowisku lokalnym.

  2. Generuj zdarzenia, wczytując podstrony witryny, korzystając z aplikacji lub wywołując żądania sieciowe. Po wczytaniu strony pozostaw kartę przeglądarki otwartą przez co najmniej 10 sekund.

  3. Otwórz panel Wydajność w konsoli Firebase. Po kilku minutach powinny się wyświetlić dane początkowe.

    Jeśli nie widzisz danych początkowych, zapoznaj się ze wskazówkami dotyczącymi rozwiązywania problemów.

Krok 4. (Opcjonalnie) Wyświetl komunikaty z logów dotyczące zdarzeń związanych z wydajnością

  1. Otwórz narzędzia dla deweloperów w przeglądarce (np. kartę Sieć w Narzędziach dla deweloperów Chrome lub w Monitorze sieci w Firefoksie).

  2. Odśwież aplikację internetową w przeglądarce.

  3. Sprawdź, czy w komunikatach z logów nie ma komunikatów o błędach.

  4. Po kilku sekundach poszukaj w narzędziach dla deweloperów w przeglądarce wywołania sieciowego do firebaselogging.googleapis.com. Obecność tego wywołania sieciowego oznacza, że przeglądarka wysyła dane o wydajności do Firebase.

Jeśli Twoja aplikacja nie rejestruje zdarzeń związanych z wydajnością, zapoznaj się ze wskazówkami dotyczącymi rozwiązywania problemów.

Krok 5.: (Opcjonalnie) Dodaj niestandardowe monitorowanie określonego kodu

Aby monitorować dane o skuteczności powiązane z określonym kodem w aplikacji, możesz instrumentować niestandardowe logi czasu kodu.

Dzięki niestandardowemu logowi czasu kodu możesz zmierzyć, ile czasu zajmuje aplikacji wykonanie określonego zadania lub zestawu zadań, np. wczytanie zestawu obrazów lub wysłanie zapytania do bazy danych. Domyślną metryką niestandardowego logu czasu kodu jest jego czas trwania, ale możesz też dodać metryki niestandardowe, takie jak trafienia w pamięci podręcznej i ostrzeżenia o pamięci.

W kodzie definiujesz początek i koniec niestandardowego logu czasu kodu (oraz dodajesz dowolne metryki niestandardowe) za pomocą interfejsu API udostępnianego przez pakiet SDK Performance Monitoring.

Więcej informacji o tych funkcjach i o tym, jak dodać je do aplikacji, znajdziesz w artykule Dodawanie monitorowania określonego kodu.

Krok 6. Wdróż aplikację i sprawdź wyniki

Po zweryfikowaniu Performance Monitoring możesz wdrożyć zaktualizowaną wersję swojej aplikacji dla użytkowników.

Dane o skuteczności możesz monitorować na panelu Wydajność w konsoli Firebase.

Dalsze kroki