Performance Monitoring używa logów czasu do zbierania danych o monitorowanych procesach w aplikacji. Log czasu to raport zawierający dane zarejestrowane między 2 punktami w czasie w aplikacji.
W przypadku aplikacji internetowych monitorowanie wydajności Performance Monitoring automatycznie zbiera log czasu dla każdej strony aplikacji. Jest to log czasu wczytania strony. Każdy log czasu wczytania strony zbiera te domyślne dane:
największe wyrenderowanie treści – dane, które mierzą czas między przejściem użytkownika na stronę a największą zmianą wizualną
interakcja do kolejnego wyrenderowania – dane, które mierzą najdłuższy czas między interakcją użytkownika ze stroną a kolejnym wyrenderowaniem
skumulowane przesunięcie układu – dane, które mierzą i oceniają nieoczekiwane przesunięcia układu na stronie
pierwsze wyrenderowanie – dane, które mierzą czas między przejściem użytkownika na stronę a dowolną zmianą wizualną
pierwsze wyrenderowanie treści – dane, które mierzą czas między przejściem użytkownika na stronę a wyświetleniem znaczącej treści, takiej jak obraz lub tekst
domInteractive – dane, które mierzą czas między przejściem użytkownika na stronę a momentem, w którym strona jest uznawana za interaktywną dla użytkownika
domContentLoadedEventEnd – dane, które mierzą czas między przejściem użytkownika na stronę a momentem, w którym początkowy dokument HTML jest całkowicie wczytany i przeanalizowany
loadEventEnd – dane, które mierzą czas między przejściem użytkownika na stronę a momentem, w którym zakończy się zdarzenie wczytania bieżącego dokumentu
opóźnienie przy pierwszym działaniu – dane, które mierzą czas między interakcją użytkownika ze stroną a momentem, w którym przeglądarka jest w stanie na to działanie zareagować
Dane z tych logów czasu możesz wyświetlić na podkarcie Wczytanie strony w tabelach logów czasu, która znajduje się u dołu panelu Skuteczność (więcej informacji o korzystaniu z konsoli znajdziesz poniżej).
Definicja logu czasu wczytania strony
Ten log czasu mierzy kilka danych dotyczących wczytywania stron w aplikacji, w szczególności czas potrzebny na osiągnięcie typowych punktów wczytywania, takich jak aplikacja responsywna.
Dane zbierane w logach czasu wczytania strony
Te logi czasu są gotowe, więc nie możesz do nich dodawać dodatkowych danych niestandardowych ani atrybutów niestandardowych.
Największe wyrenderowanie treści
Te dane mierzą czas między przejściem użytkownika na stronę a momentem, w którym wyświetli się największy obraz, tekst lub film.
Te dane są przydatne, ponieważ pozwalają określić, jak szybko główna treść strony internetowej staje się widoczna dla użytkownika.
Rozpoczyna się, gdy użytkownik przechodzi na stronę.
Kończy się, gdy nastąpi największa zmiana wizualna, w tym obrazy, tekst lub elementy wideo. Więcej informacji znajdziesz w artykule o podstawowych wskaźnikach internetowych.
„Element największego wyrenderowania treści” to atrybut niestandardowy, który identyfikuje element odpowiadający największemu wyrenderowaniu treści. Jest on rejestrowany oprócz czasu największego wyrenderowania treści.
Interakcja do kolejnego wyrenderowania
Te dane mierzą czas między interakcją użytkownika ze stroną a kolejnym wyrenderowaniem.
Ten wskaźnik jest przydatny, ponieważ mierzy responsywność strony na dane wejściowe użytkownika.
Rozpoczyna się, gdy użytkownik wchodzi w interakcję ze stroną (kliknięcie myszą, dotknięcie urządzenia lub wprowadzenie danych z klawiatury).
Kończy się, gdy nastąpi kolejne wyrenderowanie. Więcej informacji znajdziesz w artykule o podstawowych wskaźnikach internetowych.
„Najdłuższa interakcja do kolejnego wyrenderowania” to atrybut niestandardowy, który identyfikuje element, z którym użytkownik wszedł w interakcję, gdy wystąpiło zdarzenie interakcji do kolejnego wyrenderowania. Jest on rejestrowany oprócz czasu interakcji do kolejnego wyrenderowania.
Skumulowane przesunięcie układu
Te dane mierzą największy wzrost wartości przesunięć układu dla każdego nieoczekiwanego przesunięcia układu, które występuje w całym cyklu życia strony.
Te dane są przydatne, ponieważ nieoczekiwane przesunięcia układu mogą zakłócać wygodę użytkownika. Dane te podają wartość na podstawie interfejsu Layout Instability API. Więcej informacji o sposobie obliczania wartości znajdziesz w artykule o podstawowych wskaźnikach internetowych.
„Największy cel przesunięcia układu” to atrybut niestandardowy, który identyfikuje element, który został przesunięty, gdy wystąpiło największe przesunięcie układu. Jest on rejestrowany oprócz wartości skumulowanego przesunięcia układu.
Pierwsze wyrenderowanie
Te dane mierzą czas między przejściem użytkownika na stronę a dowolną zmianą wizualną.
Te dane są przydatne, ponieważ pierwsze wyrenderowanie sygnalizuje użytkownikom, że strona zaczyna się wczytywać.
Rozpoczyna się, gdy użytkownik przechodzi na stronę.
Kończy się, gdy nastąpi dowolna zmiana wizualna, w tym zmiana koloru tła lub wczytanie nagłówka.
Pierwsze wyrenderowanie treści
Te dane mierzą czas między przejściem użytkownika na stronę a wyświetleniem znaczącej treści, takiej jak obraz lub tekst.
Te dane są przydatne, ponieważ pozwalają dowiedzieć się, jak szybko użytkownicy widzą rzeczywistą treść aplikacji, a nie tylko nowy kolor tła lub nagłówek.
Rozpoczyna się, gdy użytkownik przechodzi na stronę.
Kończy się natychmiast po wyrenderowaniu przez przeglądarkę pierwszej treści z DOM, w tym tekstu, obrazu (w tym obrazów tła), niebiałego obszaru roboczego lub SVG.
domInteractive
Te dane mierzą czas między przejściem użytkownika na stronę a momentem, w którym strona jest uznawana za interaktywną dla użytkownika.
Te dane są przydatne, ponieważ pozwalają dowiedzieć się, jak szybko użytkownicy mogą wchodzić w interakcję z elementami w aplikacji, takimi jak przyciski i hiperłącza, a nie tylko je widzieć na ekranie. Pamiętaj, że nie oznacza to, że przeglądarka zareaguje na interakcję (w przypadku tych danych zapoznaj się z opóźnienia przy pierwszym działaniu logiem czasu).
Rozpoczyna się, gdy użytkownik przechodzi na stronę.
Kończy się bezpośrednio przed tym, gdy klient użytkownika ustawi stan gotowości bieżącego dokumentu HTML na „interaktywny”.
domContentLoadedEventEnd
Te dane mierzą czas między przejściem użytkownika na stronę a momentem, w którym początkowy dokument HTML jest całkowicie wczytany i przeanalizowany.
Rozpoczyna się, gdy użytkownik przechodzi na stronę.
Kończy się natychmiast po całkowitym wczytaniu i przeanalizowaniu początkowego dokumentu HTML (
DOMContentLoaded), ale nie oznacza to, że arkusze stylów, obrazy i ramki podrzędne zostały wczytane.
loadEventEnd
Te dane mierzą czas między przejściem użytkownika na stronę a momentem, w którym zakończy się zdarzenie wczytania bieżącego dokumentu.
Te dane są przydatne, ponieważ pozwalają dowiedzieć się, jak długo trwa wczytywanie całej treści, w tym arkuszy stylów i obrazów.
Rozpoczyna się, gdy użytkownik przechodzi na stronę.
Kończy się natychmiast po zakończeniu zdarzenia wczytania bieżącego dokumentu HTML.
Opóźnienie przy pierwszym działaniu
Te dane mierzą czas między interakcją użytkownika ze stroną a momentem, w którym przeglądarka jest w stanie na to działanie zareagować.
Te dane są przydatne, ponieważ reakcja przeglądarki na interakcję użytkownika daje użytkownikom pierwsze wrażenie na temat responsywności aplikacji.
Rozpoczyna się, gdy użytkownik po raz pierwszy wchodzi w interakcję z elementem na stronie, np. klikając przycisk lub hiperłącze.
Kończy się natychmiast po tym, jak przeglądarka jest w stanie zareagować na dane wejściowe, co oznacza, że przeglądarka nie jest zajęta wczytywaniem ani analizowaniem treści.
Aby zmierzyć opóźnienie przy pierwszym działaniu, 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 skuteczności w czasie rzeczywistym, upewnij się, że Twoja aplikacja używa pakietu SDK do monitorowania wydajności, który jest zgodny 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ę najważniejsze dane, dodaj je do tablicy danych u góry panelu Skuteczność. Możesz szybko identyfikować regresje, obserwując zmiany tydzień do tygodnia lub sprawdzać, czy ostatnie zmiany w kodzie poprawiają skuteczność.
Panel monitorowania wydajności Firebase" />
Aby dodać dane do tablicy danych:
- Otwórz panel Skuteczność w konsoli Firebase.
- Kliknij pustą kartę danych, a następnie wybierz istniejące dane, które chcesz dodać do tablicy.
- Aby zobaczyć więcej opcji, np. zastąpić lub usunąć dane, kliknij na wypełnionej karcie danych.
Tablica danych pokazuje zebrane dane na przestrzeni czasu w postaci graficznej i jako procentową zmianę liczbową.
Więcej informacji o korzystaniu z panelu.
Wyświetlanie logów czasu i ich danych
Aby wyświetlić logi czasu, otwórz panel Skuteczność w Konsoli Firebase przewiń w dół do tabeli logów czasu, a następnie kliknij odpowiednią podkartę. Tabela wyświetla najważniejsze dane dla każdego logu czasu. Możesz nawet posortować listę według procentowej zmiany konkretnych danych.
Performance Monitoring udostępnia w konsoli Firebase stronę rozwiązywania problemów, która wyróżnia 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ą, np. w tych sytuacjach:
- Wybierasz odpowiednie dane w panelu i zauważasz dużą różnicę.
- W tabeli logów czasu sortujesz dane tak, aby największe różnice były wyświetlane u góry, i widzisz znaczną zmianę procentową.
- Otrzymujesz alert e-mail z powiadomieniem o problemie z wydajnością.
Stronę rozwiązywania problemów możesz otworzyć na te sposoby:
- W 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 logów czasu kliknij nazwę logu czasu lub dowolną wartość danych w wierszu powiązanym z tym logiem czasu.
- W alercie e-mail kliknij Sprawdź teraz.
Gdy klikniesz nazwę logu czasu w tabeli logów czasu, możesz przejść do interesujących Cię danych.
Dane monitorowania wydajności Firebase filtrowane według atrybutu" />
- Filtruj 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 aplikację.
- Filtruj według kraju, aby sprawdzić, czy lokalizacja bazy danych nie wpływa na określony region.
Więcej informacji o wyświetlaniu danych logów czasu.
Następne kroki
Więcej informacji o używaniu atrybutów do analizowania danych o skuteczności.
Więcej informacji o śledzeniu problemów z wydajnością w Firebase konsoli.
Skonfiguruj alerty dotyczące wczytywania stron, które pogarszają wydajność aplikacji. Możesz na przykład skonfigurować alert e-mail dla zespołu, jeśli opóźnienie przy pierwszym działaniu na określonej stronie przekroczy ustawiony przez Ciebie próg.