Wprowadzenie do Monitorowania wydajności w internecie

Zanim zaczniesz

Jeśli jeszcze tego nie zrobiono, zapoznaj się z artykułem Dodawanie Firebase do projektu JavaScript, aby dowiedzieć się, jak:

  • Tworzenie projektu 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 nie masz jeszcze zainstalowanego pakietu Firebase JS SDK i zainicjowanego Firebase, zrób to.

  2. Dodaj Performance Monitoring pakiet SDK w JavaScript 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();

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

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

Dodanie tej biblioteki polyfill nie jest wymagane, aby Performance Monitoring mogło raportować inne rodzaje danych aplikacji internetowych.

Krok 3. Generowanie zdarzeń dotyczących skuteczności na potrzeby wstępnego wyświetlania danych

Firebase rozpoczyna przetwarzanie zdarzeń po dodaniu pakietu SDK do aplikacji. Jeśli nadal pracujesz nad aplikacją lokalnie, wchodź z nią w interakcje, aby generować zdarzenia na potrzeby wstępnego zbierania i przetwarzania danych.

  1. wyświetlanie aplikacji internetowej w środowisku lokalnym;

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

  3. Otwórz panel Skuteczność w konsoli Firebase. Pierwsze dane powinny pojawić się 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 4. (Opcjonalnie) Wyświetl wiadomości dziennika dotyczące zdarzeń związanych z wydajnością

  1. Otwórz narzędzia deweloperskie 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 dziennika nie ma żadnych błędów.

  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 5. (Opcjonalnie) Dodaj niestandardowe monitorowanie konkretnego 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 wskaźniki) za pomocą interfejsu API udostępnianego przez pakiet SDK Performance Monitoring.

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

Krok 6. 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