Więcej informacji o danych o wydajności wczytywania stron (aplikacje internetowe)

Monitorowanie wydajności korzysta ze śladów do zbierania danych o monitorowanych procesach w aplikacji. Śledzenie to raport zawierający dane zebrane między 2 punktami w czasie w aplikacji.

W przypadku aplikacji internetowych Monitorowanie wydajności automatycznie zbiera dane śledzenia każdej strony. aplikacji, tak zwany śledzenie wczytywania strony. Każdy ślad wczytywania strony zbiera dane następujące dane domyślne:

  • pierwsze wyrenderowanie – dane, które określają czas między użytkownik przechodzi na stronę i gdy zachodzi jakakolwiek zmiana wizualna

  • pierwsze wyrenderowanie treści – wskaźnik, który mierzy czas między przejściem użytkownika do strony a ważną treścią Może wyświetlać się, np. obraz lub tekst.

  • domInteractive – dane służące do pomiaru czasu między gdy użytkownik przechodzi na stronę i jest uznawana za interaktywną. dla użytkownika

  • domContentLoadedEventEnd – wskaźnik służący do pomiaru czas między przejściem użytkownika do strony a początkowym kodem HTML dokument został w pełni wczytany i przeanalizowany

  • loadEventEnd – dane służące do pomiaru czasu upływającego użytkownik przejdzie na stronę i po wystąpieniu zdarzenia wczytywania bieżącego dokumentu. zakończono

  • opóźnienie przy pierwszym działaniu – dane do pomiaru czasu między gdy użytkownik wchodzi w interakcję ze stroną i gdy przeglądarka jest w stanie zareagować te dane wejściowe

Dane z tych logów czasu możesz wyświetlić na podkarcie Wczytanie strony tabeli logów czasu, która znajduje się u dołu panelu Skuteczność (więcej informacji o używaniu konsoli znajdziesz w dalszej części tej strony).

Definicja zrzutu strony

Ten log czasu mierzy kilka wskaźników dotyczących sposobu wczytywania stron w aplikacji, a konkretnie, ile czasu zajmie dotarcie do typowych punktów wczytywania, takich jak do tworzenia elastycznych reklam w wyszukiwarce.

Śledzenie wczytywania strony pomaga śledzić podstawowe wskaźniki internetowe, wyrenderowanie treści.

Wskaźniki zbierane na potrzeby logów czasu wczytywania strony

To gotowe logi czasu, więc nie możesz dodawać niestandardowych wskaźników ani atrybutów niestandardowych.

Pierwsze wyrenderowanie

Te dane to czas upływający między przejściem użytkownika na stronę a otwarciem strony żadna zmiana wizualna.

Te dane są przydatne, bo pierwsze wyrenderowanie sygnalizuje użytkownikom, że strona rozpoczyna się wczytywanie.

  • Uruchamiany, gdy użytkownik przejdzie na stronę.

  • zatrzymuje się, gdy nastąpi jakakolwiek zmiana wizualna, w tym zmiana koloru tła lub gdy trzeba będzie wczytać nagłówek.

Pierwsze wyrenderowanie treści

Te dane to czas upływający między przejściem użytkownika na stronę a otwarciem strony istotne treści, np. obraz lub tekst.

Te dane pozwalają sprawdzić, jak szybko użytkownicy zobaczą wszystkie Twoje rzeczywistej zawartości aplikacji, a nie tylko nowego koloru tła czy nagłówka.

  • Uruchamiany, gdy użytkownik przejdzie na stronę.

  • zatrzymuje się natychmiast po wyrenderowaniu przez przeglądarkę pierwszej treści z DOM, np. dowolnego tekstu, obrazu (w tym obrazów tła), tekstu na płótnie innej niż biała, SVG.

interaktywna

Te dane to czas upływający między przejściem użytkownika na stronę a otwarciem strony strona jest uznawana za interaktywną dla użytkownika.

Te dane pozwalają sprawdzić, kiedy użytkownicy mogą wchodzić w interakcję z elementami aplikacji, takimi jak przyciski i hiperlinki, zamiast widząc je na ekranie. Pamiętaj, że nie oznacza to, że przeglądarka zareaguje na interakcję (w przypadku tego wskaźnika zapoznaj się z opóźnienie pierwszego wejścia).

  • Uruchamiany, gdy użytkownik przejdzie na stronę.

  • Zatrzymuje się bezpośrednio przed ustawieniem kodu przez klienta użytkownika w bieżącym dokumencie HTML gotowość do przejścia na tryb „interaktywny”.

DomContentLoadedEventEnd

Te dane to czas upływający między przejściem użytkownika na stronę a otwarciem strony początkowy dokument HTML jest w pełni wczytywany i przeanalizowany.

  • Uruchamiany, gdy użytkownik przejdzie na stronę.

  • zatrzymuje się natychmiast po całkowitym wczytaniu początkowego dokumentu HTML, (DOMContentLoaded), ale nie oznacza to, że arkusze stylów, obrazy i ramek podrzędnych.

Zakończenie wczytywania

Te dane to czas, jaki upływa od przejścia użytkownika na stronę przez użytkownika po zakończeniu zdarzenia wczytywania bieżącego dokumentu.

Te dane pozwalają dowiedzieć się, ile czasu zajmuje wczytanie treści, w tym arkuszy stylów i obrazów.

  • Uruchamiany, gdy użytkownik przejdzie na stronę.

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

Opóźnienie przy pierwszym działaniu

Te dane to czas upływający między interakcją użytkownika ze stroną a gdy przeglądarka jest w stanie zareagować na te dane.

Jest to przydatna opcja, ponieważ przeglądarka odpowiadająca na interakcję użytkownika zapewnia to pierwsze wrażenia użytkowników Twojej aplikacji.

  • Rozpoczyna się, gdy użytkownik pierwszy wejdzie w interakcję z elementem na stronie, np. klikając przycisk lub hiperlink.

  • Zatrzymuje się natychmiast po tym, jak przeglądarka jest w stanie zareagować na dane wejściowe, co oznacza że przeglądarka nie będzie ładować ani analizować treści.

Pamiętaj, że aby zmierzyć pierwsze opóźnienie w danych wejściowych, musisz dodać kod polyfill dla tego wskaźnika. Instrukcje instalacji znajdziesz w dokumentacja.

Śledzenie, wyświetlanie i filtrowanie danych o skuteczności

Aby wyświetlić dane o skuteczności w czasie rzeczywistym, upewnij się, że aplikacja korzysta z raportu Wersja pakietu SDK do monitorowania, która jest zgodna z przetwarzaniem danych w czasie rzeczywistym. Więcej informacji na temat danych o skuteczności w czasie rzeczywistym

Śledź kluczowe dane w panelu

Aby poznać trendy dotyczące kluczowych wskaźników, dodaj je do tabeli danych u góry Panel Skuteczność. Możesz szybko wykryć regresje, przeglądając dane tygodniowe. zmian lub sprawdź, czy ostatnie zmiany w kodzie poprawiają jego skuteczność.

obraz tablicy wskaźników w panelu Monitorowanie wydajności Firebase

Aby dodać wskaźnik do tablicy wskaźników, wykonaj te czynności:

  1. Przejdź do Panel Skuteczność w konsoli Firebase.
  2. Kliknij pustą kartę wskaźnika, a potem wybierz jeden z istniejących rodzajów danych, który chcesz dodać do swojej tablicy.
  3. Kliknij na wypełnionej karcie danych, aby wyświetlić więcej opcji. np. zastąpienie lub usunięcie danych.

Panel wskaźników pokazuje zebrane dane na przestrzeni czasu zarówno w postaci graficznej, jak i liczbową zmianę procentową.

Dowiedz się więcej 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 i kliknij odpowiednią podkartę. Tabela zawiera najważniejsze wskaźniki dla każdego logu czasu. Możesz nawet posortować listę według zmianę procentową określonego wskaźnika.

Monitorowanie wydajności udostępnia stronę rozwiązywania problemów w konsoli Firebase, na której wyróżnione są dane. zmian, dzięki czemu można szybko rozwiązać problemy i zminimalizować wpływ problemów ze skutecznością aplikacji i użytkowników. Możesz skorzystać ze strony rozwiązywania problemów, aby poznać potencjalne problemy z wydajnością, np. w następujących sytuacjach:

  • Gdy wybierzesz odpowiednie dane na pulpicie, zauważysz sporą różnicę.
  • Po posortowaniu w tabeli logów czasu największe delta wyświetlają się u góry. znacznej zmiany procentowej.
  • Otrzymasz e-maila z powiadomieniem o problemie z wydajnością.

Stronę rozwiązywania problemów możesz otworzyć na kilka sposobów:

  • W panelu wskaźników kliknij przycisk Wyświetl szczegóły wskaźnika.
  • Na dowolnej karcie danych wybierz => Wyświetl szczegóły. Na stronie rozwiązywania problemów wyświetlane są informacje o wskaźniku wybrane przez Ciebie.
  • W tabeli logów czasu kliknij nazwę logu czasu lub dowolną wartość danych w wierszu, który jest z nim powiązany. śledzić.
  • W powiadomieniu e-mail kliknij Zbadaj teraz.

Po kliknięciu nazwy logu czasu w tabeli logów czasu możesz przeanalizować dane a interesem publicznym. Kliknij Filtruj – pozwala filtrować dane. według atrybutu, na przykład:

obraz przedstawiający dane Monitorowania wydajności Firebase filtrowane według atrybutu
  • Aby wyświetlić dane na temat określonej strony w witrynie, zastosuj filtrowanie według adresu URL strony.
  • Przefiltruj dane według efektywnego typu połączenia, by zobaczyć, jak połączenie 3G wpływa na aplikacja
  • Filtruj według kraju, aby sprawdzić, czy lokalizacja bazy danych nie ma wpływu na konkretny region

Więcej informacji o wyświetlanie danych dla ślady czasu.

Następne kroki

  • Więcej informacji o za pomocą atrybutów, by analizować dane o skuteczności.

  • Dowiedz się więcej o tym, śledź problemy ze skutecznością w konsoli Firebase.

  • Skonfiguruj alerty o powolnym ładowaniu stron. wydajność aplikacji. Możesz na przykład skonfigurować alert e-mail dla: zespołu, jeśli opóźnienie przy pierwszym działaniu na danej stronie przekracza wyznaczoną przez Ciebie wartość progową.