Dowiedz się więcej o danych dotyczących wydajności ładowania stron (aplikacje internetowe)

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 każdej strony aplikacji, zwany śladem ładowania strony . Każdy ślad ładowania strony zbiera następujące domyślne metryki:

  • pierwsze malowanie — metryka mierząca czas między przejściem użytkownika na stronę a wystąpieniem jakiejkolwiek zmiany wizualnej

  • pierwsza treściwa farba — wskaźnik mierzący czas między przejściem użytkownika na stronę a wyświetleniem znaczącej treści, takiej jak obraz lub tekst

  • domInteractive — metryka mierząca czas między przejściem użytkownika na stronę a uznaniem strony za interaktywną dla użytkownika

  • domContentLoadedEventEnd — Metryka mierząca czas między przejściem użytkownika na stronę a całkowitym załadowaniem i przeanalizowaniem początkowego dokumentu HTML

  • loadingEventEnd — Metryka mierząca czas między przejściem użytkownika na stronę a zakończeniem zdarzenia ładowania bieżącego dokumentu

  • opóźnienie pierwszego wejścia — metryka mierząca czas między interakcją użytkownika ze stroną a momentem, w którym przeglądarka jest w stanie odpowiedzieć na to wejście

Możesz wyświetlić dane z tych śladów na podkarcie Ładowanie strony tabeli śladów, która znajduje się na dole panelu kontrolnego Wydajność (więcej informacji o korzystaniu z konsoli znajdziesz w dalszej części tej strony).

Definicja śledzenia ładowania strony

Ten ślad mierzy kilka wskaźników dotyczących sposobu wczytywania stron aplikacji, w szczególności czas potrzebny na dotarcie do typowych punktów ładowania, np. w przypadku aplikacji responsywnej.

Ślady wczytywania strony pomagają śledzić najważniejsze parametry sieciowe aplikacji, takie jak pierwsza, treściwa farba.

Metryki zebrane dla śladów ładowania strony

Te ślady są gotowymi śladami, więc nie można do nich dodawać niestandardowych metryk ani atrybutów niestandardowych.

Pierwsza farba

Ta metryka mierzy czas pomiędzy przejściem użytkownika na stronę 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 przejdzie do strony.

  • Zatrzymuje się, gdy nastąpi jakakolwiek zmiana wizualna, w tym zmiana koloru tła lub ładowanie nagłówka.

Pierwsza treściwa farba

Ta metryka mierzy 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, jeśli chcesz dowiedzieć się, jak szybko użytkownicy zobaczą rzeczywistą zawartość Twojej aplikacji, a nie tylko nowy kolor tła lub nagłówek.

  • Uruchamia się, gdy użytkownik przejdzie do strony.

  • Zatrzymuje się natychmiast po wyrenderowaniu przez przeglądarkę pierwszej zawartości z modelu DOM, w tym dowolnego tekstu, obrazu (w tym obrazów tła), obszaru innego niż biały lub SVG.

domInteraktywny

Ta metryka mierzy czas między przejściem użytkownika na stronę a momentem, gdy strona zostaje uznana przez użytkownika za interaktywną.

Te dane są przydatne, jeśli chcesz dowiedzieć się, jak szybko użytkownicy mogą faktycznie wchodzić w interakcję z elementami aplikacji, takimi jak przyciski i hiperłącza, zamiast tylko widzieć je na ekranie. Należy pamiętać, że nie oznacza to, że przeglądarka zareaguje na interakcję (w przypadku tej metryki zobacz pierwszy ślad opóźnienia wejściowego ).

  • Uruchamia się, gdy użytkownik przejdzie do strony.

  • Zatrzymuje się natychmiast, zanim klient użytkownika ustawi gotowość bieżącego dokumentu HTML na „interaktywną”.

domContentLoadedEventEnd

Ta metryka mierzy czas pomiędzy przejściem użytkownika na stronę a całkowitym załadowaniem i przeanalizowaniem początkowego dokumentu HTML.

  • Uruchamia się, gdy użytkownik przejdzie 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 pomocniczych zostało zakończone.

załaduj wydarzenieKoniec

Ta metryka mierzy czas między przejściem użytkownika na stronę a zakończeniem zdarzenia ładowania bieżącego dokumentu.

Te dane są przydatne, jeśli chcesz dowiedzieć się, ile czasu zajmuje załadowanie całej zawartości, w tym arkuszy stylów i obrazów.

  • Uruchamia się, gdy użytkownik przejdzie do strony.

  • Zatrzymuje się natychmiast po zakończeniu zdarzenia ładowania bieżącego dokumentu HTML.

Pierwsze opóźnienie wejścia

Ta metryka mierzy czas pomiędzy interakcją użytkownika ze stroną a momentem, w którym przeglądarka jest w stanie odpowiedzieć na te dane wejściowe.

Ta metryka jest przydatna, ponieważ reakcja przeglądarki na interakcję użytkownika daje użytkownikom pierwsze wrażenia na temat responsywności aplikacji.

  • Uruchamia się, gdy użytkownik po raz pierwszy wejdzie w interakcję z elementem na stronie, np. kliknie przycisk lub hiperłącze.

  • 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 ładowaniem ani analizowaniem zawartości.

Należy pamiętać, że aby zmierzyć pierwszą metrykę opóźnienia wejściowego, należy dodać bibliotekę Polyfill dla tej metryki. Instrukcje instalacji można znaleźć w dokumentacji biblioteki.

Śledź, przeglądaj i filtruj dane dotyczące wydajności

Aby wyświetlać dane dotyczące wydajności w czasie rzeczywistym, upewnij się, że aplikacja korzysta z wersji zestawu SDK do monitorowania wydajności, która jest zgodna z przetwarzaniem danych w czasie rzeczywistym. Dowiedz się więcej o danych dotyczących wydajności w czasie rzeczywistym .

Śledź kluczowe wskaźniki na swoim pulpicie nawigacyjnym

Aby dowiedzieć się, jakie są trendy w zakresie kluczowych wskaźników, dodaj je do tablicy wskaźników u góry pulpitu nawigacyjnego Wydajność . Możesz szybko zidentyfikować regresje, obserwując zmiany z tygodnia na tydzień lub sprawdzając, czy ostatnie zmiany w kodzie poprawiają wydajność.

obraz tablicy wskaźników na pulpicie nawigacyjnym monitorowania wydajności Firebase

Aby dodać metrykę do tablicy metryk, wykonaj następujące kroki:

  1. Przejdź do panelu Wydajność w konsoli Firebase.
  2. Kliknij pustą kartę metryki, a następnie wybierz istniejącą metrykę, aby dodać ją do swojej tablicy.
  3. Kliknij na wypełnionej karcie metryki, aby uzyskać więcej opcji, na przykład zastąpić lub usunąć metrykę.

Tablica metryk przedstawia zebrane dane metryk w czasie, zarówno w formie graficznej, jak i jako liczbowa zmiana procentowa.

Dowiedz się więcej o korzystaniu z panelu kontrolnego .

Wyświetl ślady i ich dane

Aby wyświetlić swoje ślady, przejdź do panelu Wydajność w konsoli Firebase, przewiń w dół do tabeli śladów, a następnie kliknij odpowiednią podkartę. W tabeli wyświetlane są najważniejsze metryki dla każdego śladu. Można nawet posortować listę według procentowej zmiany określonej metryki.

Monitorowanie wydajności udostępnia stronę rozwiązywania problemów w konsoli Firebase, która podkreśla zmiany wskaźników, co ułatwia szybkie rozwiązywanie problemów z wydajnością i minimalizowanie ich wpływu na aplikacje i użytkowników. Ze strony rozwiązywania problemów możesz skorzystać, 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ę.
  • Sortujesz tabelę śladów, aby wyświetlić największe delty na górze i widzisz znaczną zmianę procentową.
  • Otrzymasz powiadomienie 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 panelu metryki kliknij przycisk Wyświetl szczegóły metryki .
  • Na dowolnej karcie metrycznej wybierz => Zobacz szczegóły . Strona rozwiązywania problemów wyświetla informacje o wybranej metryce.
  • W tabeli śladów kliknij nazwę śledzenia lub dowolną wartość metryki w wierszu powiązanym z tym śladem.
  • W alercie e-mailowym kliknij Zbadaj teraz .

Klikając nazwę śledzenia w tabeli śladów, możesz przejść do interesujących Cię metryk. Kliknij Przycisk filtr , aby filtrować dane według atrybutu, na przykład:

obraz danych Firebase Performance Monitoring filtrowanych według atrybutów
  • Filtruj według adresu URL strony, aby wyświetlić dane dotyczące konkretnej 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 bazy danych nie ma wpływu na konkretny region

Dowiedz się więcej o przeglądaniu danych dotyczących śladów .

Następne kroki

  • Dowiedz się więcej o używaniu atrybutów do sprawdzania danych dotyczących 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.