Dowiedz się więcej o danych o wydajności ładowania strony (aplikacje internetowe)

Monitorowanie wydajności używa śladów do zbierania danych o monitorowanych procesach w Twojej aplikacji. Ślad to raport zawierający dane przechwycone w aplikacji między dwoma punktami w czasie.

W przypadku aplikacji internetowych Performance Monitoring automatycznie zbiera ślad dla każdej strony Twojej aplikacji, zwany śladem ładowania strony . Każdy ślad wczytywania strony zbiera następujące domyślne metryki:

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

  • pierwsze wyrenderowanie treści — 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 momentem, w którym strona jest uważana 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 pierwszego wejścia — wskaźnik mierzący czas między interakcją użytkownika ze stroną a momentem, w którym przeglądarka jest w stanie odpowiedzieć na te dane wejściowe

Dane z tych śladów można wyświetlić na podkarcie Ładowanie strony w tabeli śladów, która znajduje się u dołu 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 metryk dotyczących ładowania stron w aplikacji, w szczególności czasu potrzebnego na dotarcie do typowych punktów ładowania, takich jak aplikacja responsywna.

Ślady wczytywania strony pomagają śledzić kluczowe wskaźniki działania aplikacji w sieci , takie jak pierwsze wyrenderowanie treści.

Metryki zbierane na potrzeby śledzenia ładowania strony

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

Pierwsza farba

Ta metryka mierzy czas mię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ę wczytywać.

  • Rozpoczyna się, gdy użytkownik przechodzi na stronę.

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

Pierwsza pełna treści 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, by dowiedzieć się, jak szybko użytkownicy zobaczą rzeczywistą zawartość Twojej aplikacji, a nie tylko nowy kolor tła lub nagłówek.

  • Rozpoczyna się, gdy użytkownik przechodzi na stronę.

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

domInteractive

Ta metryka mierzy czas między przejściem użytkownika na stronę a momentem, w którym strona jest uważana za interaktywną dla użytkownika.

Ta metryka jest przydatna, aby dowiedzieć się, jak szybko użytkownicy mogą faktycznie wchodzić w interakcję z elementami aplikacji, takimi jak przyciski i hiperłącza, a nie tylko widzieć je na ekranie. Pamiętaj, że nie oznacza to, że przeglądarka zareaguje na interakcję (w przypadku tej metryki zapoznaj się z pierwszym śledzeniem opóźnienia wejścia ).

  • Rozpoczyna się, gdy użytkownik przechodzi na stronę.

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

domContentLoadedEventEnd

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

  • Rozpoczyna się, gdy użytkownik przechodzi na stronę.

  • 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.

loadEventEnd

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

Ta metryka jest przydatna, aby uzyskać wgląd w to, ile czasu zajmuje wczytanie całej zawartości, w tym arkuszy stylów i obrazów.

  • Rozpoczyna się, gdy użytkownik przechodzi na stronę.

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

Pierwsze opóźnienie wejścia

Ta metryka mierzy czas mię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ż przeglądarka reagująca 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. klika 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.

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świetlić dane o wydajności w czasie rzeczywistym, upewnij się, że Twoja aplikacja korzysta z wersji SDK monitorowania wydajności, która jest zgodna z przetwarzaniem danych w czasie rzeczywistym. Dowiedz się więcej .

Śledź kluczowe wskaźniki na swoim pulpicie nawigacyjnym

Aby dowiedzieć się, jak zyskują popularność kluczowe wskaźniki, dodaj je do tablicy wskaźników u góry pulpitu nawigacyjnego Skuteczność . 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 w panelu Monitorowania wydajności Firebase

Aby dodać metrykę do tablicy metryk, przejdź do pulpitu nawigacyjnego Wydajność w konsoli Firebase, a następnie kliknij kartę Pulpit nawigacyjny . Kliknij pustą kartę danych, a następnie wybierz istniejące dane, które chcesz dodać do swojej tablicy. Kliknij na wypełnionej karcie danych, aby uzyskać więcej opcji, takich jak zastąpienie lub usunięcie danych.

Tablica metryk przedstawia 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 panelu wydajności w konsoli Firebase, przewiń w dół do tabeli śladów, a następnie kliknij odpowiednią podkartę. W tabeli wyświetlane są niektóre najważniejsze metryki dla każdego śledzenia, a listę można nawet sortować według procentowej zmiany określonej metryki.

Jeśli klikniesz nazwę śladu w tabeli śladów, możesz następnie przejrzeć różne ekrany, aby zbadać ślad i przejść do metryk, które Cię interesują. Na większości stron możesz użyć przycisku filtr (w lewym górnym rogu ekranu), aby filtrować dane według atrybutów, na przykład:

obraz danych Firebase Performance Monitoring filtrowanych według atrybutów
  • Filtruj według adresu URL strony , aby wyświetlić dane dla określonej strony w 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 wpływa na określony region

Dowiedz się więcej o wyświetlaniu danych dla swoich śladów .

Następne kroki

  • Dowiedz się więcej o używaniu atrybutów do badania 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.