Catch up on everthing we announced at this year's Firebase Summit. Learn more

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

Monitorowanie wydajności wykorzystuje ślady zbierać dane o monitorowanych procesów w swojej aplikacji. Ślad to raport, który zawiera dane przechwycone w aplikacji między dwoma punktami w czasie.

Dla aplikacji internetowych, Performance Monitoring automatycznie zbiera ślad na każdej stronie swojej aplikacji o nazwie śladu ładowania strony. Każdy ślad wczytywania strony zbiera następujące domyślne metryki:

  • Pierwsza farba - parametr, który mierzy czas między gdy do nawigacji użytkownika na stronie, a gdy jakakolwiek zmiana wizualna dzieje

  • Pierwszy contentful farby - parametr, który mierzy czas między Kiedy nawiguje użytkownika na stronie i kiedy znaczących treści, takich jak wyświetlacze obrazu lub tekstu

  • DOMInteractive - parametr, który mierzy czas między gdy do nawigacji użytkownika na stronie, a gdy strona jest uważana interaktywne dla użytkownika

  • domContentLoadedEventEnd - parametr, który mierzy czas między gdy nawiguje użytkownika do strony i kiedy początkowy dokument HTML jest całkowicie załadowany i przetworzony

  • loadEventEnd - parametr, który mierzy czas między gdy nawiguje użytkownika na stronę i po zakończeniu imprezy obciążenia bieżącego dokumentu

  • Opóźnienie pierwsze wejście - parametr, który mierzy czas między gdy użytkownik współdziała z strony i gdy przeglądarka jest w stanie odpowiedzieć na to wejście

Możesz przeglądać dane z tych śladów w obciążeniu podkarty stronie stołu ślady, które jest w dolnej części deski rozdzielczej wydajność (Więcej informacji na temat korzystania z konsoli później na tej stronie).

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 obciążenia strona pomoże Ci śledzić w aplikacji podstawowe narządy internetowych , podobnie jak pierwszy contentful farby.

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

Dane te pozwalają określić czas między gdy użytkownik przechodzi do strony, a kiedy jakakolwiek zmiana wizualna dzieje.

Pomiar ten jest użyteczny od pierwszych sygnałów farby do swoich użytkowników, że strona jest począwszy od obciążenia.

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

  • Zatrzymuje się, gdy jakakolwiek zmiana wizualna dzieje, łącznie ze zmianą koloru tła lub załadunku 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 przydają się, 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 przydaje się do uzyskiwania informacji o tym, 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. Należy pamiętać, że nie oznacza to, że przeglądarka będzie reagować na interakcji (w tym metrycznych, odnoszą się do pierwszego wejścia opóźnienia śladu ).

  • 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 początkowym dokument HTML jest całkowicie załadowany i analizowana ( DOMContentLoaded ), ale to nie znaczy, że arkusze stylów, obrazy i ramy pomocnicze są zakończeniu ładowania.

loadEventEnd

Dane te pozwalają określić czas między gdy użytkownik nawiguje do strony i po zakończeniu imprezy obciążenia bieżącego dokumentu.

Ta metryka przydaje się do wglądu 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.

  • Zaczyna się, gdy użytkownik po raz pierwszy wchodzi w interakcje z elementu na stronie, jak kliknięcie przycisku lub łącza.

  • 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 instalacji znajdują się biblioteki dokumentacji .

Ś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ę, w jaki sposób kluczowe wskaźniki są trendy, dodaj je do swojej metryki pokładzie w górnej części deski rozdzielczej 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 w panelu Monitorowania wydajności Firebase

Aby dodać dane do rady metryki, przejdź do deski rozdzielczej wydajności w konsoli Firebase, a następnie kliknij kartę Dashboard. Kliknij pustą kartę danych, a następnie wybierz istniejące dane, które chcesz dodać do swojej tablicy. Kliknij na zaludnionym karty metrycznych więcej opcji, jak wymienić lub usunąć dane.

Tablica metryk przedstawia zebrane dane metryk w czasie, zarówno w formie graficznej, jak i liczbowej zmiany procentowej.

Więcej informacji na temat korzystania z deski rozdzielczej .

Zobacz ślady i ich dane

Aby wyświetlić swoje ślady, przejdź do deski rozdzielczej wydajności w konsoli Firebase przewiń do stołu ślady, a następnie kliknij odpowiednią kartę podrzędną. W tabeli wyświetlane są niektóre najważniejsze metryki dla każdego śledzenia, a listę można nawet posortować według procentowej zmiany określonej metryki.

Jeśli klikniesz nazwę śladu w tabeli śladów, możesz przechodzić przez różne ekrany, aby eksplorować ślad i przeanalizować interesujące metryki. Na większości stron, można użyć filtra przycisku (lewym górnym rogu ekranu), aby filtrować dane według atrybutu, na przykład:

obraz danych Firebase Performance Monitoring filtrowanych według atrybutów
  • Przez filtr URL strony do przeglądania danych na stronie konkretnej witryny
  • Filtr efektywna typu połączenia, aby dowiedzieć się, jak wpływa połączenie 3G swoją aplikację
  • Filtruj według kraju, aby upewnić się, że lokalizacja bazy danych nie wpływa na specyficzny region

Więcej informacji na temat wyświetlania danych dla swoich śladów .

Następne kroki