Wprowadzenie do Monitorowania wydajności w internecie

Zanim zaczniesz

Jeśli jeszcze tego nie zrobiono, otwórz stronę Dodawanie Firebase do projektu JavaScript, aby dowiedzieć się, jak:

  • Tworzenie projektu w Firebase

  • Rejestrowanie aplikacji internetowej w Firebase

Pamiętaj, że gdy dodasz Firebase do aplikacji, możesz wykonać niektóre czynności opisane w dalszej części tej strony (np. dodanie pakietu SDK i inicjowanie Firebase).

Krok 1. Dodaj i zainicjuj Performance Monitoring

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

  2. Dodaj Performance Monitoring pakiet JS SDK i zainicjuj 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();

Pakiet SDK Performance Monitoring automatycznie rejestruje Core Web Vitals.

Krok 2. Generowanie zdarzeń związanych z wydajnością na potrzeby wstępnego wyświetlania danych

Firebase zacznie przetwarzać zdarzenia po dodaniu pakietu SDK do aplikacji. Jeśli nadal pracujesz nad aplikacją lokalnie, korzystaj z niej, aby generować zdarzenia na potrzeby wstępnego zbierania i przetwarzania danych.

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

  2. Generuj zdarzenia, wczytując podstrony witryny, wchodząc w interakcje z aplikacją lub wywołując żądania sieciowe. Po załadowaniu strony pozostaw kartę przeglądarki otwartą przez co najmniej 10 sekund.

  3. Otwórz panel Skuteczność w konsoli Firebase. Pierwsze dane powinny się wyświetlić w ciągu kilku minut.

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

Krok 3. (Opcjonalnie) Wyświetl wiadomości dziennika dotyczące zdarzeń związanych z wydajnością

  1. Otwórz narzędzia deweloperskie przeglądarki (np. kartę Sieć w Narzędziach deweloperskich w wersji deweloperskiej Chrome lub Monitor sieci w Firefoksie).

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

  3. Sprawdź, czy w komunikatach dziennika nie ma żadnych komunikatów o błędach.

  4. Po kilku sekundach poszukaj w narzędziach deweloperskich przeglądarki 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ę z wskazówkami dotyczącymi rozwiązywania problemów.

Krok 4. (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.

Dzięki śledzeniu kodu niestandardowego możesz mierzyć, ile czasu zajmuje aplikacji wykonanie określonego zadania lub zestawu zadań, np. wczytanie zestawu obrazów lub wysłanie zapytania do bazy danych. Domyślne dane śledzenia kodu niestandardowego to jego czas trwania, ale możesz też dodać dane 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 (i dodajesz dowolne niestandardowe dane) za pomocą interfejsu API udostępnianego przez pakiet Performance Monitoring SDK.

Więcej informacji o tych funkcjach i sposobie dodawania ich do aplikacji znajdziesz w artykule Dodawanie monitorowania konkretnego kodu.

Krok 5. Wdróż aplikację, a potem sprawdź wyniki

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

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

Dalsze kroki