Monitorowanie wydajności wdrażania funkcji

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

1. Przegląd

W tym laboratorium programowania dowiesz się, jak monitorować wydajność aplikacji podczas wdrażania funkcji. Nasza przykładowa aplikacja będzie miała podstawową funkcjonalność i jest skonfigurowana do wyświetlania innego obrazu tła na podstawie flagi Firebase Remote Config. Przejdziemy do śledzenia oprzyrządowania, aby monitorować wydajność aplikacji, wdrażając zmianę konfiguracji w aplikacji, monitorując efekt i sprawdzając, jak możemy poprawić wydajność.

Czego się nauczysz

  • Jak dodać Monitorowanie wydajności Firebase do aplikacji mobilnej, aby uzyskać gotowe dane (takie jak czas uruchamiania aplikacji i wolne lub zawieszone klatki)
  • Jak dodawać niestandardowe ślady, aby zrozumieć krytyczne ścieżki kodu podczas podróży użytkownika?
  • Jak korzystać z pulpitu nawigacyjnego monitorowania wydajności, aby zrozumieć swoje dane i śledzić ważne zmiany, takie jak wdrażanie funkcji
  • Jak skonfigurować alerty wydajności, aby monitorować kluczowe wskaźniki
  • Jak wprowadzić zmianę Zdalnej konfiguracji Firebase

Warunki wstępne

  • Android Studio 4.0 lub nowszy
  • Emulator Androida z interfejsem API 16 lub wyższym.
  • Java w wersji 8 lub nowszej
  • Podstawowe informacje na temat zdalnej konfiguracji Firebase

2. Skonfiguruj przykładowy projekt

Pobierz kod

Uruchom następujące polecenie, aby sklonować przykładowy kod dla tego ćwiczenia z programowania. Spowoduje to utworzenie na twoim komputerze folderu o nazwie codelab-perf-rc-android :

$ git clone https://github.com/FirebaseExtended/codelab-feature-rollout-performance.git

Jeśli nie masz Git na swoim komputerze, możesz również pobrać kod bezpośrednio z GitHub.

Zaimportuj projekt z folderu firebase-perf-rc-android-start do Android Studio. Prawdopodobnie zobaczysz wyjątki czasu wykonywania lub może ostrzeżenie o braku pliku google-services.json . Poprawimy to w następnej sekcji.

Podczas tego ćwiczenia z programowania użyjesz wtyczki Asystenta Firebase, aby zarejestrować swoją aplikację na Androida w projekcie Firebase i dodać niezbędne pliki konfiguracyjne, wtyczki i zależności Firebase do swojego projektu na Androida — wszystko z poziomu Android Studio !

Połącz swoją aplikację z Firebase

  1. Przejdź do Android Studio / Pomoc > Sprawdź aktualizacje , aby upewnić się, że korzystasz z najnowszych wersji Android Studio i Asystenta Firebase.
  2. Wybierz Narzędzia > Firebase , aby otworzyć panel Asystent .

c0e42ef063d21eab.png

  1. Wybierz Monitorowanie wydajności , które chcesz dodać do swojej aplikacji, a następnie kliknij Rozpocznij z monitorowaniem wydajności .
  2. Kliknij Połącz z Firebase , aby połączyć projekt Androida z Firebase (spowoduje to otwarcie konsoli Firebase w przeglądarce) .
  3. W konsoli Firebase kliknij Dodaj projekt , a następnie wpisz nazwę projektu Firebase (jeśli masz już projekt Firebase, możesz zamiast tego wybrać istniejący projekt) . Kliknij Dalej i zaakceptuj warunki, aby utworzyć projekt Firebase i nową aplikację Firebase.

Następnie powinno zostać wyświetlone okno dialogowe umożliwiające połączenie nowej aplikacji Firebase z projektem Android Studio.

51a549ebde2fe57a.png

  1. Kliknij Połącz .
  2. Otwórz Studio Androida. W panelu Asystent zobaczysz potwierdzenie, że Twoja aplikacja jest połączona z Firebase.

40c24c4a56a45990.png

Dodaj monitorowanie wydajności do swojej aplikacji

W okienku Asystent w Android Studio kliknij Dodaj monitorowanie wydajności do swojej aplikacji .

Powinieneś zobaczyć okno dialogowe Akceptuj zmiany , po którym Android Studio powinien zsynchronizować Twoją aplikację, aby upewnić się, że wszystkie niezbędne zależności zostały dodane.

3046f3e1f5fea06f.png

Na koniec powinieneś zobaczyć komunikat o powodzeniu w okienku Asystenta w Android Studio, że wszystkie zależności są poprawnie skonfigurowane.

62e79fd18780e320.png

Jako dodatkowy krok włącz rejestrowanie debugowania , postępując zgodnie z instrukcjami w kroku „(Opcjonalnie) Włącz rejestrowanie debugowania”. Te same instrukcje są również dostępne w dokumentacji publicznej .

3. Uruchom aplikację

Powinieneś teraz zobaczyć plik google-services.json w katalogu modułu (na poziomie aplikacji) Twojej aplikacji, a Twoja aplikacja powinna się teraz skompilować. W Android Studio kliknij Uruchom > Uruchom „aplikację”, aby skompilować i uruchomić aplikację na emulatorze Androida.

Gdy aplikacja jest uruchomiona, najpierw powinieneś zobaczyć taki ekran powitalny:

ffbd413a6983b205.png

Następnie po kilku sekundach wyświetli się strona główna z domyślnym obrazem:

d946cab0df319e50.png

Co się dzieje pod maską?

Ekran powitalny jest zaimplementowany w SplashScreenActivity i wykonuje następujące czynności:

  1. W onCreate() inicjujemy ustawienia Zdalnej konfiguracji Firebase i pobieramy wartości konfiguracyjne, które ustawisz w panelu Zdalnej konfiguracji w dalszej części tego ćwiczenia z programowania.
  2. W executeTasksBasedOnRC() odczytujemy wartość konfiguracyjną flagi seasonal_image_url . Jeśli adres URL jest podany w wartości konfiguracji, pobieramy obraz synchronicznie.
  3. Po zakończeniu pobierania aplikacja przechodzi do MainActivity i wywołuje finish() , aby zakończyć SplashScreenActivity .

W MainActivity , jeśli seasonal_image_url jest zdefiniowany za pomocą zdalnej konfiguracji, funkcja zostanie włączona, a pobrany obraz będzie wyświetlany jako tło strony głównej. W przeciwnym razie zostanie wyświetlony obraz domyślny (pokazany powyżej).

4. Skonfiguruj zdalną konfigurację

Teraz, gdy Twoja aplikacja jest uruchomiona, możesz skonfigurować nową flagę funkcji.

  1. W lewym panelu konsoli Firebase znajdź sekcję Angażowanie , a następnie kliknij opcję Zdalna konfiguracja .
  2. Kliknij przycisk Utwórz konfigurację , aby otworzyć formularz konfiguracji i dodaj seasonal_image_url jako klucz parametru.
  3. Kliknij Dodaj opis , a następnie wprowadź ten opis: Shows a seasonal image (replaces default) in the main page when the restaurant list is empty.
  4. Kliknij Dodaj nowy -> Wartość warunkowa -> Utwórz nowy warunek .
  5. Jako nazwę warunku wpisz Seasonal image rollout .
  6. W sekcji Applies if... wybierz User in random percentile <= 0% . (Chcesz pozostawić tę funkcję wyłączoną, dopóki nie będziesz gotowy do wdrożenia w późniejszym kroku).
  7. Kliknij Utwórz warunek . Użyjesz tego warunku później, aby udostępnić nową funkcję użytkownikom.

7a07526eb9e81623.png

  1. Otwórz formularz Utwórz pierwszy parametr i znajdź pole Wartość sezonowego wdrożenia obrazu . Wpisz adres URL, z którego będzie pobierany sezonowy obraz: https://images.unsplash.com/photo-1552691021-7043334e0b51
  2. Pozostaw wartość domyślną jako pusty ciąg. Oznacza to, że zostanie wyświetlony domyślny obraz w bazie kodu, a nie obraz pobrany z adresu URL.
  3. Kliknij Zapisz .

99e6cd2ebcdced.png

Widać, że nowa konfiguracja jest tworzona jako wersja robocza.

  1. Kliknij Opublikuj zmiany i potwierdź zmiany u góry, aby zaktualizować aplikację.

39cd3e96d370c7ce.png

5. Dodaj monitorowanie czasu ładowania danych

Twoja aplikacja wstępnie ładuje niektóre dane przed wyświetleniem MainActivity i wyświetla ekran powitalny, aby ukryć ten proces. Nie chcesz, aby użytkownicy zbyt długo czekali na tym ekranie, więc zwykle dobrze jest monitorować, jak długo wyświetlany jest ekran powitalny.

Monitorowanie wydajności Firebase pozwala to zrobić. Możesz instrumentować niestandardowe ślady kodu, aby monitorować wydajność określonego kodu w aplikacji — na przykład czas ładowania danych i czas przetwarzania nowej funkcji.

Aby śledzić, jak długo wyświetlany jest ekran powitalny, dodasz niestandardowy ślad kodu do SplashScreenActivity , czyli Activity , które implementuje ekran powitalny.

  1. Zainicjuj, utwórz i uruchom niestandardowy ślad kodu o nazwie splash_screen_trace :

SplashScreenActivity.java

// ...
import com.google.firebase.perf.FirebasePerformance;
import com.google.firebase.perf.metrics.Trace;
// ...

public class SplashScreenActivity extends AppCompatActivity {

    private static final String TAG = "SplashScreenActivity";
    private static final String SEASONAL_IMAGE_URL_RC_FLAG = "seasonal_image_url";

    // TODO: Initialize splash_screen_trace
    private final Trace splashScreenTrace = FirebasePerformance.startTrace("splash_screen_trace");
    
    // ...
}
  1. Zakończ śledzenie w onDestroy() SplashScreenActivity :

SplashScreenActivity.java

@Override
protected void onDestroy() {
    super.onDestroy();

    // TODO: Stop the splash_screen_trace here
    splashScreenTrace.stop();
}

Ponieważ nowa funkcja pobiera i przetwarza obraz, dodasz drugi niestandardowy ślad kodu, który będzie śledzić dodatkowy czas dodawania funkcji do SplashScreenActivity .

  1. Zainicjuj, utwórz i uruchom niestandardowy ślad kodu o nazwie splash_seasonal_image_processing :

SplashScreenActivity.java

private void executeTasksBasedOnRC(FirebaseRemoteConfig rcConfig) {
    String seasonalImageUrl = rcConfig.getString(SEASONAL_IMAGE_URL_RC_FLAG);
    Log.d(TAG, SEASONAL_IMAGE_URL_RC_FLAG + ": " + seasonalImageUrl);

    if (!seasonalImageUrl.isEmpty()) {
        // TODO: Start the splash_seasonal_image_processing here
        final Trace seasonalImageProcessingTrace = FirebasePerformance
            .startTrace("splash_seasonal_image_processing");

        // ...
    }
}
  1. Zakończ śledzenie w onLoadFailed() i onResourceReady() modułu RequestListener :

SplashScreenActivity.java

Glide.with(SplashScreenActivity.this.getApplicationContext())
    .asBitmap()
    .load(seasonalImageUrl)
    .signature(new ObjectKey(Utils.getCacheUUID()))
    .listener(new RequestListener<Bitmap>() {
        @Override
        public boolean onLoadFailed(
            @Nullable GlideException e,
            Object model, Target<Bitmap> target,
            boolean isFirstResource) {

            // TODO: Stop the splash_seasonal_image_processing here
            seasonalImageProcessingTrace.stop();

            launchMainActivity();
            return true;
        }

        @Override
        public boolean onResourceReady(Bitmap resource, Object model,
            Target<Bitmap> target, DataSource dataSource,
            boolean isFirstResource) {

            // TODO: Stop the splash_seasonal_image_processing here
            seasonalImageProcessingTrace.stop();

            launchMainActivity();
            return true;
        }
     })
     .preload();

Po dodaniu niestandardowych śladów kodu do śledzenia czasu trwania ekranu powitalnego ( splash_screen_trace) i czasu przetwarzania nowej funkcji ( splash_seasonal_image_processing ), ponownie uruchom aplikację w Android Studio. Powinien zostać wyświetlony komunikat rejestrowania zawierający Logging trace metric: splash_screen_trace , po której następuje czas trwania śledzenia. Nie zobaczysz komunikatu dziennika dla splash_seasonal_image_processing , ponieważ nowa funkcja nie została jeszcze włączona.

6. Dodaj niestandardowy atrybut do śladu

W przypadku niestandardowych śladów kodu monitorowanie wydajności automatycznie rejestruje atrybuty domyślne (wspólne metadane, takie jak wersja aplikacji, kraj, urządzenie itp.), dzięki czemu można filtrować dane śledzenia w konsoli Firebase . Możesz także dodawać i monitorować atrybuty niestandardowe .

W swojej aplikacji właśnie dodałeś dwa niestandardowe ślady kodu, aby monitorować czas trwania ekranu powitalnego i czas przetwarzania nowej funkcji. Czynnikiem, który może mieć wpływ na te czasy trwania, jest to, czy wyświetlany obraz jest obrazem domyślnym, czy też obraz musi zostać pobrany z adresu URL. I kto wie – w końcu możesz mieć różne adresy URL, z których pobierasz obraz.

Dodajmy więc niestandardowy atrybut reprezentujący sezonowy adres URL obrazu do tych niestandardowych śladów kodu. W ten sposób możesz później filtrować dane czasu trwania według tych wartości.

  1. Dodaj niestandardowy atrybut ( seasonal_image_url_attribute ) dla splash_screen_trace na początku metody executeTasksBasedOnRC :

SplashScreenActivity.java

private void executeTasksBasedOnRC(FirebaseRemoteConfig rcConfig) {
    String seasonalImageUrl = rcConfig.getString(SEASONAL_IMAGE_URL_RC_FLAG);
    Log.d(TAG, SEASONAL_IMAGE_URL_RC_FLAG + ": " + seasonalImageUrl);

    // TODO: Add a custom attribute "seasonal_image_url_attribute" to splash_screen_trace
    if (seasonalImageUrl.isEmpty()) {
        splashScreenTrace.putAttribute("seasonal_image_url_attribute", "unset");
    } else {
        splashScreenTrace.putAttribute("seasonal_image_url_attribute", seasonalImageUrl);
    }

    // ...
}
  1. Dodaj ten sam atrybut niestandardowy dla splash_seasonal_image_processing zaraz po startTrace("splash_seasonal_image_processing") :

SplashScreenActivity.java

if (!seasonalImageUrl.isEmpty()) {
    // TODO: Start the splash_seasonal_image_processing here
    final Trace seasonalImageProcessingTrace = FirebasePerformance
        .startTrace("splash_seasonal_image_processing");

    // TODO: Add a custom attribute "seasonal_image_url_attribute" to splash_seasonal_image_processing
    seasonalImageProcessingTrace
        .putAttribute("seasonal_image_url_attribute", seasonalImageUrl);

    // ...
}

Po dodaniu atrybutu niestandardowego ( seasonal_image_url_attribute ) dla obu niestandardowych śladów ( splash_screen_trace i splash_seasonal_image_processing ), ponownie uruchom aplikację w Android Studio. Powinieneś zobaczyć komunikat rejestrowania, który zawiera Setting attribute 'seasonal_image_url_attribute' to 'unset' on trace 'splash_screen_trace'. Nie włączono jeszcze parametru Zdalnej konfiguracji seasonImageUrl , dlatego wartość atrybutu nie jest unset .

Pakiet SDK monitorowania wydajności zbierze dane śledzenia i wyśle ​​je do Firebase. Możesz wyświetlić dane w panelu wydajności konsoli Firebase, który szczegółowo wyjaśnimy w następnym kroku ćwiczenia z programowania.

7. Skonfiguruj pulpit monitorowania wydajności

Skonfiguruj swój panel, aby monitorować swoją funkcję

W konsoli Firebase wybierz projekt, który zawiera Twoją aplikację Friendly Eats.

W lewym panelu znajdź sekcję Release & Monitor , a następnie kliknij Performance .

Powinieneś zobaczyć pulpit nawigacyjny wydajności z pierwszymi punktami danych na tablicy wskaźników! Zestaw SDK monitorowania wydajności zbiera dane o wydajności z Twojej aplikacji i wyświetla je w ciągu kilku minut od zebrania.

f57e5450b70034c9.png

Ta tablica wskaźników umożliwia śledzenie kluczowych wskaźników dotyczących Twojej aplikacji. Widok domyślny obejmuje czas trwania śledzenia czasu rozpoczęcia aplikacji, ale możesz dodać metryki, na których najbardziej Ci zależy. Ponieważ śledzisz nową dodaną funkcję, możesz dostosować swój pulpit nawigacyjny, aby wyświetlał czas trwania niestandardowego śledzenia kodu splash_screen_trace .

  1. Kliknij jedno z pustych pól Wybierz metrykę .
  2. W oknie dialogowym wybierz typ śledzenia Śledzenia niestandardowe i nazwę śledzenia splash_screen_trace .

1fb81f4dba3220e0.png

  1. Kliknij Wybierz metrykę i powinieneś zobaczyć czas trwania splash_screen_trace dodany do pulpitu nawigacyjnego!

Możesz wykonać te same czynności, aby dodać inne metryki, na których Ci zależy, aby szybko zobaczyć, jak ich wydajność zmienia się w czasie, a nawet w różnych wersjach.

1d465c021e58da3b.png

Tablica metryk to potężne narzędzie do śledzenia wydajności kluczowych metryk, których doświadczają Twoi użytkownicy. W przypadku tego ćwiczenia z programowania masz niewielki zestaw danych w wąskim zakresie czasowym, więc będziesz korzystać z innych widoków pulpitu nawigacyjnego, które pomogą Ci zrozumieć wydajność wdrażania funkcji.

8. Rozwiń swoją funkcję

Po skonfigurowaniu monitorowania możesz przystąpić do wdrożenia wcześniej skonfigurowanej zmiany Zdalnej konfiguracji Firebase ( seasonal_image_url) .

Aby wprowadzić zmianę, wróć do strony Zdalna konfiguracja w konsoli Firebase, aby zwiększyć percentyl użytkownika warunku kierowania. Zwykle wprowadzasz nowe funkcje dla niewielkiej części użytkowników i zwiększasz je tylko wtedy, gdy masz pewność, że nie ma z tym problemów. Jednak w tym laboratorium jesteś jedynymi użytkownikami aplikacji, więc możesz zmienić percentyl na 100%.

  1. Kliknij kartę Warunki u góry strony.
  2. Kliknij warunek Seasonal image rollout , który został dodany wcześniej.
  3. Zmień percentyl na 100%.
  4. Kliknij Zapisz warunek .
  5. Kliknij Opublikuj zmiany i potwierdź zmiany.

70f993502b27e7a0.png

Wróć do Android Studio, uruchom ponownie aplikację w emulatorze, aby zobaczyć nową funkcję. Po ekranie powitalnym powinieneś zobaczyć nowy ekran główny stanu pustego!

b0cc91b6e48fb842.png

9. Sprawdź zmiany wydajności

Sprawdźmy teraz wydajność ładowania ekranu powitalnego za pomocą pulpitu nawigacyjnego Wydajność w konsoli Firebase. W tym kroku ćwiczenia z programowania będziesz używać różnych części pulpitu nawigacyjnego do wyświetlania danych dotyczących wydajności.

  1. Na głównej karcie Pulpit nawigacyjny przewiń w dół do tabeli śladów, a następnie kliknij kartę Ślady niestandardowe . W tej tabeli zobaczysz dodane wcześniej niestandardowe ślady kodu oraz kilka gotowych śladów .
  2. Po włączeniu nowej funkcji poszukaj niestandardowego śladu kodu splash_seasonal_image_processing , który mierzył czas potrzebny na pobranie i przetworzenie obrazu. Z wartości czasu trwania śladu widać, że to pobieranie i przetwarzanie zajmuje dużo czasu.

439adc3ec71805b7.png

  1. Ponieważ masz dane dotyczące splash_seasonal_image_processing , możesz dodać czas trwania tego śledzenia do swojej tablicy wskaźników u góry karty Pulpit .

Podobnie jak wcześniej, kliknij jedno z pustych pól Wybierz metrykę . W oknie dialogowym wybierz typ śledzenia Ślady niestandardowe i nazwę śledzenia splash_seasonal_image_processing . Na koniec kliknij Wybierz dane , aby dodać te dane do tablicy danych.

7fb64d2340410576.png

  1. Aby jeszcze bardziej potwierdzić różnice, możesz przyjrzeć się bliżej danym dla splash_screen_trace . Kliknij kartę splash_screen_trace na tablicy danych, a następnie kliknij Wyświetl szczegóły danych .

b1c275c30679062a.png

  1. Na stronie szczegółów zobaczysz listę atrybutów w lewym dolnym rogu, w tym atrybut niestandardowy, który utworzyłeś wcześniej. Kliknij niestandardowy atrybut seasonal_image_url_attribute , aby wyświetlić czas trwania ekranu powitalnego dla każdego adresu URL obrazu sezonowego po prawej stronie:

8fa1a69019bb045e.png

  1. Wartości czasu trwania ekranu powitalnego będą prawdopodobnie nieco inne niż te na powyższym zrzucie ekranu, ale powinieneś mieć dłuższy czas , gdy obraz jest pobierany z adresu URL, w porównaniu z domyślnym obrazem (reprezentowanym przez „nieustawiony”).

W tym ćwiczeniu z programowania przyczyna tego dłuższego czasu trwania może być prosta, ale w prawdziwej aplikacji może nie być tak oczywista. Zebrane dane o czasie trwania będą pochodzić z różnych urządzeń, uruchamiających aplikację w różnych warunkach połączenia sieciowego, a warunki te mogą być gorsze niż oczekiwałeś. Przyjrzyjmy się, jak zbadałbyś ten problem, gdyby była to sytuacja w świecie rzeczywistym.

  1. Kliknij Wydajność u góry strony, aby wrócić do głównej karty Pulpit nawigacyjny : 640b696b79d90103.png
  2. W tabeli śladów na dole strony kliknij kartę Żądania sieciowe . W tej tabeli zobaczysz wszystkie żądania sieciowe z Twojej aplikacji zebrane we wzorce adresów URL , w tym wzorzec adresu URL images.unsplash.com/** . Jeśli porównasz wartość tego czasu odpowiedzi z całkowitym czasem potrzebnym na pobranie i przetworzenie obrazu (tj. czas trwania śladu splash_seasonal_image_processing ), zobaczysz, że pobranie obrazu zajmuje dużo czasu.

6f92ce0f23494507.png

Wyniki badań

Korzystając z Monitorowania wydajności Firebase, zauważyłeś następujący wpływ na użytkowników końcowych dzięki włączeniu nowej funkcji:

  1. Wydłużył się czas spędzony na SplashScreenActivity .
  2. Czas trwania splash_seasonal_image_processing był bardzo długi.
  3. Opóźnienie wynikało z czasu odpowiedzi na pobranie obrazu i odpowiedniego czasu przetwarzania potrzebnego dla obrazu.

W następnym kroku złagodzisz wpływ na wydajność, wycofując funkcję i określając, jak możesz poprawić implementację funkcji.

10. Wycofaj funkcję

Wydłużanie czasu oczekiwania użytkowników podczas wyświetlania ekranu powitalnego nie jest pożądane. Jedną z kluczowych zalet Zdalnej konfiguracji jest możliwość wstrzymywania i cofania wdrażania bez konieczności udostępniania użytkownikom kolejnej wersji. Pozwala to szybko reagować na problemy (takie jak problemy z wydajnością, które wykryłeś w ostatnim kroku) i zminimalizować liczbę niezadowolonych użytkowników.

W ramach szybkiego rozwiązania problemu zresetujesz percentyl wdrażania z powrotem do 0 , aby wszyscy użytkownicy ponownie zobaczyli obraz domyślny:

  1. Wróć do strony Zdalna konfiguracja w konsoli Firebase.
  2. Kliknij Warunki u góry strony.
  3. Kliknij dodany wcześniej warunek Seasonal image rollout .
  4. Zmień percentyl na 0%.
  5. Kliknij Zapisz warunek .
  6. Kliknij Opublikuj zmiany i potwierdź zmiany.

18c4f1cbac955a04.png

Uruchom ponownie aplikację w Android Studio i powinieneś zobaczyć oryginalny ekran główny stanu pustego:

d946cab0df319e50.png

11. Napraw problemy z wydajnością

Wcześniej podczas ćwiczeń z programowania odkryłeś, że pobieranie obrazu na ekran powitalny powodowało spowolnienie działania Twojej aplikacji. Przyglądając się bliżej pobranemu obrazowi, widzisz, że używasz oryginalnej rozdzielczości obrazu, która wynosiła ponad 2 MB! Jednym z szybkich rozwiązań problemu z wydajnością jest obniżenie jakości do bardziej odpowiedniej rozdzielczości, dzięki czemu pobieranie obrazu zajmuje mniej czasu.

Wdróż ponownie wartość Zdalnej konfiguracji

  1. Wróć do strony Zdalna konfiguracja w konsoli Firebase.
  2. Kliknij ikonę Edytuj dla parametru seasonal_image_url .
  3. Zaktualizuj wartość sezonowego wdrażania obrazów na https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 , a następnie kliknij przycisk Zapisz .

828dd1951a2ec4a4.png

  1. Kliknij kartę Warunki u góry strony.
  2. Kliknij Sezonowe wdrażanie obrazu , a następnie ustaw percentyl z powrotem na 100%.
  3. Kliknij Zapisz warunek .

1974fa3bb789f36c.png

  1. Kliknij przycisk Opublikuj zmiany .

12. Przetestuj poprawkę i skonfiguruj alerty

Uruchom aplikację lokalnie

Z nową wartością konfiguracji ustawioną na używanie innego adresu URL obrazu do pobrania, uruchom aplikację ponownie. Tym razem powinieneś zauważyć, że czas spędzony na ekranie powitalnym jest krótszy niż wcześniej.

b0cc91b6e48fb842.png

Zobacz wydajność zmian

Wróć do panelu wydajności w konsoli Firebase, aby zobaczyć, jak wyglądają dane.

  1. Tym razem użyjesz tabeli śladów, aby przejść do strony szczegółów. W tabeli śladów, na karcie Ślady niestandardowe kliknij niestandardowy ślad splash_seasonal_image_processing , aby ponownie wyświetlić bardziej szczegółowy widok jego metryki czasu trwania.

2d7aaca03112c062.png

  1. Kliknij atrybut niestandardowy seasonal_image_url_attribute , aby ponownie zobaczyć zestawienie atrybutów niestandardowych. Jeśli najedziesz kursorem na adresy URL, zobaczysz wartość odpowiadającą nowemu adresowi URL obrazu o zmniejszonym rozmiarze: https://images.unsplash.com/photo-1552691021-7043334e0b51?w=640 (z ?w=640 na końcu). Wartość czasu trwania skojarzona z tym obrazem jest znacznie krótsza niż wartość poprzedniego obrazu i bardziej akceptowalna dla użytkowników!

10e30c037a4237a2.png

  1. Teraz, gdy poprawiłeś wydajność ekranu powitalnego, możesz skonfigurować alerty powiadamiające, gdy ślad przekroczy ustawiony próg. Otwórz pulpit nawigacyjny Wydajność i kliknij ikonę menu rozszerzonego (trzy kropki) dla splash_screen_trace i kliknij Ustawienia alertów .

4bd0a2a1faa14479.png

  1. Kliknij przełącznik, aby włączyć alert Czas trwania . Ustaw wartość progową, aby była nieco wyższa od wartości, którą widziałeś, aby jeśli Twój ślad_ekranu powitalnego przekroczy próg, otrzymasz wiadomość e-mail.
  1. Kliknij Zapisz , aby utworzyć alert. Przewiń w dół do tabeli śladów , a następnie kliknij kartę Ślady niestandardowe , aby zobaczyć, że alert jest włączony!

2bb93639e2218d1.png

13. Gratulacje!

Gratulacje! Włączyłeś pakiet SDK do monitorowania wydajności Firebase i zebrałeś ślady, aby zmierzyć wydajność nowej funkcji. Monitorowano kluczowe metryki wydajności pod kątem wdrażania nowej funkcji i szybko reagowałeś na wykrycie problemu z wydajnością. Wszystko to było możliwe dzięki możliwości wprowadzania zmian w konfiguracji za pomocą zdalnej konfiguracji i monitorowania problemów z wydajnością w czasie rzeczywistym.

Co omówiliśmy

  • Dodawanie pakietu SDK do monitorowania wydajności Firebase do aplikacji
  • Dodanie niestandardowego śladu kodu do kodu w celu pomiaru określonej funkcji
  • Konfigurowanie parametru Zdalnej konfiguracji i wartości warunkowej w celu kontrolowania/wdrażania nowej funkcji
  • Zrozumienie, jak używać pulpitu nawigacyjnego monitorowania wydajności do identyfikowania problemów podczas wdrażania
  • Konfigurowanie alertów wydajności, które powiadamiają Cię, gdy wydajność Twojej aplikacji przekroczy ustawiony próg

Ucz się więcej