Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Monitorowanie wydajności używa śladów do zbierania danych o monitorowanych procesach w Twojej aplikacji. Ślad to raport, który zawiera 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 na stronę 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, który 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

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 ułatwiają śledzenie najważniejszych wskaźników internetowych aplikacji, takich 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.

Te dane są przydatne, 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 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. 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 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.

  • 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 można znaleźć 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 o danych o skuteczności w czasie rzeczywistym .

Śledź kluczowe wskaźniki na swoim pulpicie nawigacyjnym

Aby dowiedzieć się, jakie trendy zyskują Twoje 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ć dane do tablicy danych, wykonaj następujące czynności:

  1. Przejdź do panelu wydajności w konsoli Firebase.
  2. Kliknij pustą kartę danych, a następnie wybierz istniejące dane, które chcesz dodać do swojej tablicy.
  3. Kliknij na wypełnionej karcie danych, aby uzyskać więcej opcji, na przykład zastąpić lub usunąć dane.

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 posortować według procentowej zmiany określonej metryki.

Monitorowanie wydajności udostępnia stronę rozwiązywania problemów w konsoli Firebase, która przedstawia zmiany wskaźników, ułatwiając szybkie rozwiązywanie problemów z wydajnością i minimalizowanie ich wpływu na aplikacje i użytkowników. Możesz użyć strony rozwiązywania problemów, 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ę.
  • W tabeli śladów sortujesz, aby wyświetlić największe delty u góry, 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:

  • W panelu danych kliknij przycisk Wyświetl szczegóły danych .
  • Na dowolnej karcie danych wybierz => Wyświetl szczegóły . Strona rozwiązywania problemów wyświetla informacje o wybranym wskaźniku.
  • W tabeli śladów kliknij nazwę śladu lub dowolną wartość metryki w wierszu skojarzonym z tym śladem.
  • W powiadomieniu e-mail kliknij Zbadaj teraz .

Po kliknięciu nazwy śladu w tabeli śladów można przejść do bardziej interesujących metryk. Kliknij przycisk filtr , aby przefiltrować 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 dla określonej strony witryny
  • 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 przez Ciebie próg.