Monitorowanie wydajności wykorzystuje ślady do zbierania danych o monitorowanych procesach w Twojej aplikacji. Ślad to raport zawierający dane przechwycone między dwoma punktami w czasie w Twojej aplikacji.
W przypadku aplikacji internetowych funkcja monitorowania wydajności automatycznie zbiera ślad dla każdej strony Twojej aplikacji, zwany śladem wczytywania strony . Każdy ślad ładowania strony gromadzi następujące domyślne dane:
first paint — Metryka, która mierzy czas między przejściem użytkownika do strony a wystąpieniem jakiejkolwiek zmiany wizualnej
first content paint — wskaźnik mierzący czas między przejściem użytkownika do strony a wyświetleniem znaczącej treści, takiej jak obraz lub tekst
domInteractive — Metryka mierząca czas między przejściem użytkownika do strony a uznaniem jej za interaktywną dla użytkownika
domContentLoadedEventEnd — Metryka mierząca czas między przejściem użytkownika do strony a całkowitym załadowaniem i przeanalizowaniem początkowego dokumentu HTML
loadEventEnd — Metryka, która mierzy czas między przejściem użytkownika do strony a zakończeniem zdarzenia ładowania bieżącego dokumentu
opóźnienie przy pierwszym wejściu — wskaźnik mierzący czas między interakcją użytkownika ze stroną a momentem, w którym przeglądarka jest w stanie zareagować na dane dane wejściowe
Możesz wyświetlić dane z tych śladów na podkarcie Ładowanie strony w tabeli śledzenia, która znajduje się na dole pulpitu nawigacyjnego Wydajność (dowiedz się więcej o korzystaniu z konsoli w dalszej części tej strony).
Definicja śledzenia ładowania strony
Ten ślad mierzy kilka wskaźników dotyczących sposobu wczytywania stron w Twojej aplikacji, w szczególności czasu potrzebnego na dotarcie do typowych punktów wczytywania, takich jak responsywna aplikacja.
Ślady wczytywania strony pomagają śledzić najważniejsze parametry internetowe Twojej aplikacji, takie jak pierwsze malowanie treści.
Metryki zbierane dla śledzenia ładowania strony
Te ślady są gotowymi śladami, więc nie można dodawać do nich niestandardowych metryk ani atrybutów niestandardowych.
Pierwsza farba
Ta metryka mierzy czas między przejściem użytkownika do strony a wystąpieniem jakiejkolwiek zmiany wizualnej.
Ta metryka jest przydatna, ponieważ pierwsze malowanie sygnalizuje użytkownikom, że strona zaczyna się ładować.
Uruchamia się, gdy użytkownik przechodzi do strony.
Zatrzymuje się, gdy nastąpi jakakolwiek zmiana wizualna, w tym zmiana koloru tła lub ładowanie nagłówka.
Pierwsza zadowolona farba
Ta metryka mierzy czas między przejściem użytkownika do strony a wyświetleniem znaczącej treści, takiej jak obraz lub tekst.
Te dane są przydatne do sprawdzania, jak szybko użytkownicy zobaczą rzeczywistą zawartość Twojej aplikacji, a nie tylko nowy kolor tła lub nagłówek.
Uruchamia się, gdy użytkownik przechodzi do strony.
Zatrzymuje się natychmiast po wyrenderowaniu przez przeglądarkę pierwszej zawartości DOM, w tym dowolnego tekstu, obrazu (w tym obrazów tła), płótna innego niż biały lub plików SVG.
DomInteraktywny
Ta metryka mierzy czas między przejściem użytkownika do strony a momentem, w którym strona jest uważana za interaktywną dla użytkownika.
Te dane są przydatne, by dowiedzieć się, jak szybko użytkownicy mogą faktycznie wchodzić w interakcje z elementami aplikacji, takimi jak przyciski i hiperłącza, zamiast tylko widzieć je na ekranie. Pamiętaj, że nie oznacza to, że przeglądarka zareaguje na interakcję (ta metryka jest opisana w pierwszym śledzeniu opóźnienia wejścia ).
Uruchamia się, gdy użytkownik przechodzi do strony.
Zatrzymuje się natychmiast, zanim agent użytkownika ustawi gotowość bieżącego dokumentu HTML na „interaktywną”.
domContentLoadedEventEnd
Ta metryka mierzy czas między przejściem użytkownika do strony a całkowitym załadowaniem i przeanalizowaniem początkowego dokumentu HTML.
Uruchamia się, gdy użytkownik przechodzi do strony.
Zatrzymuje się natychmiast po całkowitym załadowaniu i przeanalizowaniu początkowego dokumentu HTML (
DOMContentLoaded), ale nie oznacza to, że ładowanie arkuszy stylów, obrazów i ramek podrzędnych zostało zakończone.
ZaładujEventEnd
Ta metryka mierzy czas między przejściem użytkownika do strony a zakończeniem zdarzenia ładowania bieżącego dokumentu.
Ta metryka jest przydatna do wglądu w to, ile czasu zajmuje załadowanie całej zawartości, w tym arkuszy stylów i obrazów.
Uruchamia się, gdy użytkownik przechodzi do strony.
Zatrzymuje się natychmiast po zakończeniu zdarzenia ładowania bieżącego dokumentu HTML.
Pierwsze opóźnienie wejściowe
Ta metryka mierzy czas między interakcją użytkownika ze stroną a momentem, w którym przeglądarka jest w stanie zareagować na te dane wejściowe.
Te dane są przydatne, ponieważ przeglądarka reagująca na interakcję użytkownika daje użytkownikom pierwsze wrażenia na temat czasu reakcji Twojej aplikacji.
Uruchamia się, gdy użytkownik po raz pierwszy wchodzi w interakcję z elementem na stronie, na przykład kliknięciem przycisku lub hiperłącza.
Zatrzymuje się natychmiast po tym, jak przeglądarka będzie w stanie zareagować na dane wejściowe, co oznacza, że przeglądarka nie jest zajęta ładowaniem ani analizowaniem treści.
Zauważ, że aby zmierzyć pierwszą metrykę opóźnienia wejściowego, musisz dodać bibliotekę polyfill dla tej metryki. Instrukcje dotyczące instalacji znajdują się w dokumentacji biblioteki.
Śledź, przeglądaj i filtruj dane dotyczące wydajności
Aby wyświetlać dane o wydajności w czasie rzeczywistym, upewnij się, że Twoja aplikacja korzysta z wersji Performance Monitoring SDK, która jest zgodna z przetwarzaniem danych w czasie rzeczywistym. Dowiedz się więcej o danych o wydajności w czasie rzeczywistym .
Śledź kluczowe wskaźniki na swoim pulpicie nawigacyjnym
Aby dowiedzieć się, jak kształtują się Twoje kluczowe dane, dodaj je do swojej tablicy wskaźników u góry panelu wydajności . Możesz szybko zidentyfikować regresje, obserwując zmiany z tygodnia na tydzień lub sprawdzając, czy ostatnie zmiany w kodzie poprawiają wydajność.
Aby dodać dane do tablicy metryk, wykonaj następujące kroki:
- Przejdź do pulpitu wydajności w konsoli Firebase.
- Kliknij pustą kartę metryki, a następnie wybierz istniejącą metrykę, aby dodać ją do swojej tablicy.
- Kliknij na wypełnionej karcie metryki, aby uzyskać więcej opcji, na przykład zastąpienie lub usunięcie metryki.
Tablica metryk pokazuje zebrane dane metryk w czasie, zarówno w formie graficznej, jak i liczbowej zmiany procentowej.
Dowiedz się więcej o korzystaniu z pulpitu nawigacyjnego .
Zobacz ślady i ich dane
Aby wyświetlić ślady, przejdź do pulpitu wydajności w konsoli Firebase, przewiń w dół do tabeli śladów, a następnie kliknij odpowiednią kartę podrzędną. W tabeli przedstawiono niektóre najważniejsze metryki dla każdego śladu, a nawet można posortować listę według zmiany procentowej dla określonej metryki.
Monitorowanie wydajności udostępnia stronę rozwiązywania problemów w konsoli Firebase, która podkreśla zmiany wskaźników, ułatwiając szybkie rozwiązywanie problemów i minimalizowanie wpływu problemów z wydajnością na aplikacje i użytkowników. Możesz użyć strony rozwiązywania problemów, gdy dowiesz się o potencjalnych problemach z wydajnością, na przykład w następujących scenariuszach:
- Wybierasz odpowiednie dane na pulpicie nawigacyjnym i zauważasz dużą deltę.
- W tabeli śladów sortujesz, aby wyświetlić największe delty u góry, i widzisz znaczną zmianę procentową.
- Otrzymasz alert e-mail z powiadomieniem o problemie z wydajnością.
Dostęp do strony rozwiązywania problemów można uzyskać w następujący sposób:
- Na pulpicie nawigacyjnym metryki kliknij przycisk Wyświetl szczegóły metryki .
- Na dowolnej karcie metrycznej wybierz => Wyświetl szczegóły . Strona rozwiązywania problemów wyświetla informacje o wybranych danych.
- W tabeli śledzenia kliknij nazwę śledzenia lub dowolną wartość metryki w wierszu powiązanym z tym śladem.
- W e-mailu z alertem kliknij Zbadaj teraz .
Po kliknięciu nazwy śledzenia w tabeli śledzenia można przejść do interesujących metryk. Kliknij przycisk filtr , aby przefiltrować dane według atrybutu, na przykład:
- Filtruj według adresu URL strony , aby wyświetlić dane dla określonej strony w Twojej witrynie
- Filtruj według efektywnego typu połączenia, aby dowiedzieć się, jak połączenie 3G wpływa na Twoją aplikację
- Filtruj według kraju , aby upewnić się, że lokalizacja Twojej bazy danych nie ma wpływu na określony region
Dowiedz się więcej o przeglądaniu danych dla swoich śladów .
Następne kroki
Dowiedz się więcej o używaniu atrybutów do sprawdzania danych o wydajności.
Dowiedz się więcej o śledzeniu problemów z wydajnością w konsoli Firebase.
Skonfiguruj alerty dotyczące wczytywania stron, które obniżają wydajność Twojej aplikacji. Na przykład możesz skonfigurować alert e-mail dla swojego zespołu, jeśli pierwsze opóźnienie wejścia dla określonej strony przekroczy ustawiony próg.