Performance Monitoring używa wyznaczeń do zbierania danych o monitorowanych procesach w aplikacji. Wyznanie to raport zawierający dane zebrane między 2 momentami w aplikacji.
W przypadku aplikacji internetowych Performance Monitoring automatycznie zbiera ślad każdej strony śled wczytywania strony. Każdy log czasu wczytania strony zbiera te domyślne dane:
pierwsze wyrenderowanie – wskaźnik, który mierzy czas od momentu, gdy użytkownik przechodzi na stronę, do momentu, gdy nastąpi jakiejkolwiek zmiana wizualna.
Pierwsze wyrenderowanie treści – dane określające czas od momentu, gdy użytkownik przechodzi na stronę, do momentu wyświetlenia treści znaczących, takich jak obraz lub tekst.
domInteractive – dane określające czas od momentu, gdy użytkownik przechodzi na stronę, do momentu, gdy strona staje się interaktywna dla użytkownika.
domContentLoadedEventEnd – wskaźnik, który mierzy czas od momentu, gdy użytkownik przechodzi na stronę, do momentu, gdy początkowy dokument HTML został całkowicie załadowany i przeanalizowany.
loadEventEnd – wskaźnik, który mierzy czas między momentem, gdy użytkownik przechodzi na stronę, a momentem zakończenia zdarzenia wczytywania bieżącego dokumentu.
opóźnienie przy pierwszym działaniu – wskaźnik, który mierzy czas od interakcji użytkownika ze stroną do momentu, w którym przeglądarka może na nią zareagować
Dane z tych ścieżek możesz wyświetlić na podkarcie Wczytywanie strony w tabeli ścieżek, która znajduje się na dole panelu Skuteczność (więcej informacji o używaniu konsoli znajdziesz dalej na tej stronie).
Definicja śledzenia wczytywania strony
Ten ślad mierzy kilka wskaźników dotyczących wczytywania stron w aplikacji, w szczególności czasu potrzebnego na dotarcie do typowych punktów wczytywania, np. aplikacji responsywnej.
Ścieżki wczytywania stron pomagają śledzić podstawowe wskaźniki internetowe aplikacji, np. pierwsze wyrenderowanie treści.
Dane zbierane na potrzeby dzienników wczytywania strony
Są to domyślne ścieżki, więc nie możesz dodawać do nich niestandardowych danych ani atrybutów.
Pierwsze wyrenderowanie
Te dane mierzą czas od momentu, gdy użytkownik przechodzi na stronę, do momentu, gdy nastąpi jakikolwiek element wizualny.
Ta wartość jest przydatna, ponieważ pierwsze wyrenderowanie sygnalizuje użytkownikom, że strona zaczyna się wczytywać.
Uruchamia się, gdy użytkownik przechodzi na stronę.
Zatrzymuje się, gdy nastąpi jakakolwiek zmiana wizualna, w tym zmiana koloru tła lub wczytywanie nagłówka.
Pierwsze wyrenderowanie treści
Te dane mierzą czas od momentu, gdy użytkownik przechodzi na stronę, do momentu wyświetlenia na niej treści, np. obrazu lub tekstu.
Te dane są przydatne, ponieważ pozwalają poznać, jak szybko użytkownicy zobaczą rzeczywiste treści aplikacji, a nie tylko nowy kolor tła lub nagłówek.
Uruchamia się, gdy użytkownik przechodzi na stronę.
Zatrzymuje się natychmiast po wyrenderowaniu przez przeglądarkę pierwszej treści z DOM, w tym tekstu, obrazu (także tła), obiektu canvas, który nie jest biały, lub SVG.
domInteractive
Te dane określają czas od momentu, gdy użytkownik przechodzi na stronę, do momentu, gdy strona staje się interaktywna dla użytkownika.
Ten wskaźnik dostarcza informacji o tym, jak szybko użytkownicy mogą wchodzić w interakcję z elementami w aplikacji, np. przyciskami i hiperlinkami, a nie tylko widzieć je na ekranie. Pamiętaj, że nie oznacza to, że przeglądarka zareaguje na interakcję (informacje o tym wskaźniku znajdziesz w śladzie czasu oczekiwania na pierwsze dane wejściowe).
Uruchamia się, gdy użytkownik przechodzi na stronę.
Przestaje działać bezpośrednio przed tym, gdy klient użytkownika ustawi stan gotowości bieżącego dokumentu HTML na „interaktywny”.
domContentLoadedEventEnd
Te dane to czas od momentu, gdy użytkownik przechodzi na stronę, do momentu, gdy początkowy dokument HTML jest w pełni wczytany i przeanalizowany.
Uruchamia się, gdy użytkownik przechodzi na stronę.
Przestaje działać natychmiast po całkowitym załadowaniu i przeanalizowaniu początkowego dokumentu HTML (
DOMContentLoaded), ale arkusze stylów, obrazy i ramki mogły się jeszcze wczytywać.
loadEventEnd
Te dane określają czas od momentu, gdy użytkownik przechodzi na stronę, do momentu zakończenia zdarzenia wczytania bieżącego dokumentu.
Te dane są przydatne, ponieważ dostarczają informacji o czasie wczytywania wszystkich treści, w tym arkuszy stylów i obrazów.
Uruchamia się, gdy użytkownik przechodzi na stronę.
Zatrzymuje się natychmiast po zakończeniu zdarzenia wczytywania bieżącego dokumentu HTML.
Opóźnienie przy pierwszym działaniu
Te dane określają czas od interakcji użytkownika ze stroną do momentu, w którym przeglądarka jest w stanie na to działanie zareagować.
Te dane są przydatne, ponieważ reakcja przeglądarki na działanie użytkownika pozwala użytkownikom poznać pierwsze wrażenia dotyczące responsywności aplikacji.
Rozpoczyna się, gdy użytkownik po raz pierwszy wejdzie w interakcję z elementem na stronie, np. kliknie przycisk lub hiperlink.
Zatrzymuje się natychmiast po tym, jak przeglądarka jest w stanie odpowiedzieć na dane wejściowe, co oznacza, że przeglądarka nie jest zajęta wczytywaniem ani analizowaniem treści.
Pamiętaj, że aby mierzyć dane o opóźnieniu pierwszego wejścia, musisz dodać bibliotekę polyfill dla tych danych. Instrukcje instalacji znajdziesz w dokumentacji biblioteki.
Śledzenie, wyświetlanie i filtrowanie danych o skuteczności
Aby wyświetlać dane o wydajności w czasie rzeczywistym, sprawdź, czy Twoja aplikacja używa wersji Performance Monitoring SDK, która jest zgodna z przetwarzaniem danych w czasie rzeczywistym. Więcej informacji o danych o skuteczności w czasie rzeczywistym
Śledzenie najważniejszych danych w panelu
Aby dowiedzieć się, jak zmieniają się Twoje kluczowe dane, dodaj je do panelu danych u góry panelu Skuteczność. Możesz szybko wykrywać regresje, obserwując zmiany z tygodnia na tydzień, lub sprawdzać, czy ostatnie zmiany w kodzie poprawiają skuteczność.
Panel monitorowania wydajności Firebase" />
Aby dodać dane do panelu danych:
- Otwórz panel Wydajność w konsoli Firebase.
- Kliknij pustą kartę danych, a potem wybierz istniejące dane, które chcesz dodać do tablicy.
- Aby uzyskać więcej opcji, na wypełnionej karcie danych kliknij . Możesz na przykład zastąpić lub usunąć dane.
Tablica danych pokazuje zebrane dane w ciągu czasu, zarówno w formie graficznej, jak i w postaci liczbowej zmiany procentowej.
Dowiedz się więcej o korzystaniu z panelu.
Wyświetlanie ścieżek i ich danych
Aby wyświetlić ścieżki, otwórz panel Skuteczność w konsoli Firebase, przewiń w dół do tabeli ścieżek i kliknij odpowiednią kartę. Tabela zawiera wybrane dane dotyczące każdego śladu. Możesz nawet posortować listę według zmiany procentowej konkretnego rodzaju danych.
Performance Monitoring udostępnia w konsoli Firebase stronę rozwiązywania problemów, na której wyróżnione są zmiany danych, co ułatwia szybkie rozwiązywanie problemów z wydajnością i minimalizowanie ich wpływu na aplikacje i użytkowników. Strony rozwiązywania problemów możesz używać, gdy dowiesz się o potencjalnych problemach z wydajnością, na przykład w takich sytuacjach:
- Wybierasz odpowiednie dane na panelu i zauważysz dużą różnicę.
- W tabeli śladów sortowanie odbywa się w taki sposób, aby największe wartości różnicy były wyświetlane u góry, a Ty widzisz znaczną zmianę procentową.
- Otrzymasz e-maila z powiadomieniem o problemie ze skutecznością.
Dostęp do strony rozwiązywania problemów możesz uzyskać na kilka sposobów:
- Na panelu danych kliknij przycisk Wyświetl szczegóły danych.
- Na dowolnej karcie danych kliknij
=> Wyświetl szczegóły . Na stronie rozwiązywania problemów wyświetlają się informacje o wybranych danych. - W tabeli ścieżek kliknij nazwę ścieżki lub dowolną wartość danych w wierszu powiązanym z tą ścieżką.
- W e-mailu z powiadomieniem kliknij Zbadaj.
Po kliknięciu nazwy śledzenia w tabeli śledzenia możesz rozwinąć interesujące Cię dane. Aby filtrować dane według atrybutu, kliknij przycisk
Dane Monitorowania wydajności Firebase są filtrowane według atrybutu" />
- Filtrowanie według adresu URL strony, aby wyświetlić dane dotyczące konkretnej strony w witrynie
- Filtruj według użytego rodzaju połączenia, aby dowiedzieć się, jak połączenie 3G wpływa na Twoją aplikację.
- Filtruj według Kraju, aby mieć pewność, że lokalizacja bazy danych nie wpływa na konkretny region.
Dowiedz się więcej o wyświetlaniu danych dotyczących prześwietleń.
Następne kroki
Dowiedz się więcej o używaniu atrybutów do sprawdzania danych o skuteczności.
Dowiedz się więcej o śledzeniu problemów ze skutecznością w konsoli Firebase.
Skonfiguruj alerty dotyczące wczytywania stron, które pogarszają działanie aplikacji. Możesz na przykład skonfigurować alert e-mail dla zespołu, jeśli opóźnienie pierwszego wejścia na danej stronie przekroczy ustawiony przez Ciebie próg.