Wprowadzenie do Monitorowania wydajności w internecie

Zanim zaczniesz

Jeśli nie korzystasz jeszcze z Firebase, przeczytaj artykuł Dodawanie Firebase do projektu JavaScript, aby dowiedzieć się, jak:

  • Tworzenie projektu w Firebase

  • Rejestrowanie aplikacji internetowej w Firebase

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

Krok 1. Dodaj i zainicjuj Performance Monitoring

  1. Zainstaluj pakiet Firebase JS SDK i zainicjuj Firebase, jeśli nie korzystasz jeszcze z tej usługi.

  2. Dodaj pakiet SDK Performance Monitoring JS 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. Wygeneruj zdarzenia wydajności, aby wyświetlić dane początkowe

Firebase zacznie przetwarzać zdarzenia, gdy dodasz pakiet SDK do aplikacji. Jeśli nadal pracujesz nad aplikacją lokalnie, wejdź z nią w interakcję, aby wygenerować zdarzenia na potrzeby początkowego zbierania i przetwarzania danych.

  1. wyświetlić aplikację internetową w środowisku lokalnym,

  2. Wygeneruj zdarzenia, wczytując podstrony witryny, wchodząc w interakcje z aplikacją lub wywołując żądania sieciowe. Pamiętaj, aby po wczytaniu strony karta przeglądarki była otwarta przez co najmniej 10 sekund.

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

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

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

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

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

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

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

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

Krok 4. (Opcjonalnie) Dodaj niestandardowe monitorowanie konkretnego kodu

Aby monitorować dane o skuteczności powiązane z konkretnym kodem w aplikacji, możesz instrumentować ślady niestandardowego kodu.

Dzięki niestandardowemu śledzeniu kodu 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ślnym wskaźnikiem niestandardowego śladu kodu jest czas jego trwania, ale możesz też dodać wskaźniki niestandardowe, takie jak trafienia w pamięci podręcznej i ostrzeżenia o pamięci.

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

Aby dowiedzieć się więcej o tych funkcjach i sposobie ich dodawania do aplikacji, przeczytaj artykuł Dodawanie monitorowania konkretnego kodu.

Krok 5. Wdróż aplikację i 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 wydajności konsoli Firebase.

Dalsze kroki