Monitorowanie wydajności wdrożeń funkcji

1. Przegląd

Podczas tych zajęć z 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 w oparciu o flagę zdalnej konfiguracji Firebase. Omówimy ślady instrumentowania w celu monitorowania wydajności aplikacji, wprowadzenia zmian w konfiguracji aplikacji, monitorowania efektu i sprawdzenia, jak możemy poprawić wydajność.

Czego się dowiesz

  • Jak dodać monitorowanie wydajności Firebase do aplikacji mobilnej, aby uzyskać gotowe wskaźniki (takie jak czas uruchomienia aplikacji oraz wolne lub zablokowane klatki)
  • Jak dodać niestandardowe ślady, aby zrozumieć krytyczne ścieżki kodu podróży użytkowników
  • Jak korzystać z pulpitu nawigacyjnego monitorowania wydajności, aby zrozumieć swoje wskaźniki i śledzić ważne zmiany, takie jak wdrożenie funkcji
  • Jak skonfigurować alerty wydajnościowe, aby monitorować kluczowe wskaźniki
  • Jak wprowadzić zmianę w zdalnej konfiguracji Firebase

Warunki wstępne

  • Android Studio 4.0 lub nowszy
  • Emulator Androida z poziomem API 16 lub wyższym.
  • Wersja Java 8 lub wyższa
  • Podstawowa znajomość 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 Gita na swoim komputerze, możesz także pobrać kod bezpośrednio z GitHuba.

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

Podczas tych zajęć z programowania użyjesz wtyczki Firebase Assistant , aby zarejestrować aplikację na Androida w projekcie Firebase i dodać niezbędne pliki konfiguracyjne Firebase, wtyczki i zależności do swojego projektu na Androida — a wszystko to 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 Asystenta .

c0e42ef063d21eab.png

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

Następnie powinieneś zobaczyć 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 Asystenta zobaczysz potwierdzenie, że Twoja aplikacja jest połączona z Firebase.

40c24c4a56a45990.png

Dodaj monitorowanie wydajności do swojej aplikacji

W panelu Asystenta w Android Studio kliknij opcję Dodaj monitorowanie wydajności do swojej aplikacji .

Powinieneś zobaczyć okno dialogowe Akceptuj zmiany, po którym Android Studio powinno zsynchronizować aplikację, aby upewnić się, że dodano wszystkie niezbędne zależności.

3046f3e1f5fea06f.png

Na koniec w panelu Asystenta w Android Studio powinien pojawić się komunikat o powodzeniu, ż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łów (na poziomie aplikacji) swojej aplikacji, a aplikacja powinna się teraz skompilować. W Android Studio kliknij Uruchom > Uruchom „aplikację” , aby zbudować i uruchomić aplikację na emulatorze Androida.

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

ffbd413a6983b205.png

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

d946cab0df319e50.png

Co dzieje się pod maską?

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

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

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

4. Skonfiguruj zdalną konfigurację

Teraz, gdy aplikacja jest uruchomiona, możesz skonfigurować flagę nowej funkcji.

  1. W lewym panelu konsoli Firebase znajdź sekcję Engage , a następnie kliknij 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. W nazwie warunku wpisz Seasonal image rollout .
  6. W sekcji Applies if... wybierz opcję User in random percentile <= 0% . (Chcesz pozostawić tę funkcję wyłączoną do czasu, aż będziesz gotowy do wdrożenia w późniejszym kroku).
  7. Kliknij opcję Utwórz warunek . Skorzystasz z tego warunku później, aby udostępnić użytkownikom nową funkcję.

7a07526eb9e81623.png

  1. Otwórz formularz Utwórz pierwszy parametr i znajdź pole Wartość dla sezonowego wdrażania obrazu . Wpisz adres URL, pod którym zostanie pobrany obraz sezonowy: 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

Możesz zobaczyć, że nowa konfiguracja została utworzona 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 czekali zbyt długo na tym ekranie, dlatego zazwyczaj warto monitorować czas wyświetlania ekranu powitalnego.

Monitorowanie wydajności Firebase umożliwia właśnie to. Możesz instrumentować niestandardowe ślady kodu, aby monitorować wydajność określonego kodu w aplikacji – np. czas ładowania danych i czas przetwarzania nowej funkcji.

Aby śledzić czas wyświetlania ekranu powitalnego, dodasz niestandardowy kod śledzenia do SplashScreenActivity , czyli Activity implementującego ekran powitalny.

  1. Zainicjuj, utwórz i rozpocznij śledzenie niestandardowego 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 metodą onDestroy() SplashScreenActivity :

SplashScreenActivity.java

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

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

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

  1. Zainicjuj, utwórz i rozpocznij śledzenie niestandardowego 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 metodach onLoadFailed() i onResourceReady() obiektu 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 w celu śledzenia czasu trwania ekranu powitalnego ( splash_screen_trace) i czasu przetwarzania nowej funkcji ( splash_seasonal_image_processing ), uruchom aplikację ponownie 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 dotyczącego splash_seasonal_image_processing , ponieważ nie włączyłeś jeszcze tej nowej funkcji.

6. Dodaj niestandardowy atrybut do śledzenia

W przypadku niestandardowych śladów kodu funkcja monitorowania wydajności automatycznie rejestruje atrybuty domyślne (typowe 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łaśnie dodałeś w swojej aplikacji 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. Kto wie – być może ostatecznie będziesz mieć różne adresy URL, z których będziesz pobierał obraz.

Dodajmy zatem atrybut niestandardowy reprezentujący adres URL obrazu sezonowego do tych śladów kodu niestandardowego. Dzięki temu możesz później filtrować dane dotyczące 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 wywołaniu 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);

    // ...
}

Teraz, gdy dodałeś niestandardowy atrybut ( seasonal_image_url_attribute ) dla obu niestandardowych śladów ( splash_screen_trace i splash_seasonal_image_processing ), uruchom aplikację ponownie w Android Studio. Powinieneś zobaczyć komunikat logowania zawierający Setting attribute 'seasonal_image_url_attribute' to 'unset' on trace 'splash_screen_trace'. Nie włączyłeś jeszcze parametru Remote Config sezonowyImageUrl i dlatego wartość atrybutu jest unset .

Zestaw SDK do monitorowania wydajności zbierze dane śledzenia i wyśle ​​je do Firebase. Możesz wyświetlić dane w panelu wydajności konsoli Firebase, co szczegółowo wyjaśnimy w następnym kroku ćwiczeń z kodowania.

7. Skonfiguruj pulpit monitorowania wydajności

Skonfiguruj pulpit nawigacyjny, aby monitorować swoją funkcję

W konsoli Firebase wybierz projekt zawierający aplikację Friendly Eats.

W lewym panelu znajdź sekcję Wydanie i monitorowanie , a następnie kliknij Wydajność .

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

f57e5450b70034c9.png

Na tej tablicy metryk możesz śledzić kluczowe wskaźniki swojej aplikacji. Widok domyślny obejmuje czas trwania śledzenia czasu uruchomienia 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 tak, 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 Ślady niestandardowe i nazwę śledzenia splash_screen_trace .

1fb81f4dba3220e0.png

  1. Kliknij Wybierz dane i powinieneś zobaczyć czas trwania splash_screen_trace dodanego do Twojego pulpitu nawigacyjnego!

Możesz wykonać te same czynności, aby dodać inne istotne dla Ciebie dane i szybko sprawdzić, jak ich wydajność zmienia się w czasie, a nawet w przypadku różnych wersji.

1d465c021e58da3b.png

Tablica metryk to potężne narzędzie do śledzenia wydajności kluczowych wskaźników doświadczanych przez użytkowników. W przypadku tego ćwiczenia z programowania masz mały zestaw danych w wąskim przedziale czasu, dlatego będziesz korzystać z innych widoków pulpitu nawigacyjnego, które pomogą Ci zrozumieć wydajność wdrożenia funkcji.

8. Wdróż swoją funkcję

Teraz, gdy masz już skonfigurowane monitorowanie, możesz wdrożyć skonfigurowaną wcześniej zmianę w 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 wdrażasz nowe funkcje niewielkiej części użytkowników i zwiększasz je tylko wtedy, gdy masz pewność, że nie ma z nimi żadnych problemów. Jednak w tych ćwiczeniach z programowania jesteście jedynymi użytkownikami aplikacji, więc możecie zmienić percentyl na 100%.

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

70f993502b27e7a0.png

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

b0cc91b6e48fb842.png

9. Sprawdź zmiany wydajności

Sprawdźmy teraz wydajność ładowania ekranu powitalnego za pomocą panelu Performance w konsoli Firebase. Na tym etapie ćwiczeń z programowania będziesz używać różnych części pulpitu nawigacyjnego do przeglądania danych dotyczących wydajności.

  1. Na głównej karcie Pulpit nawigacyjny przewiń w dół do tabeli śladów, a następnie kliknij kartę Niestandardowe ślady . W tej tabeli zobaczysz dodane wcześniej niestandardowe ślady kodu oraz niektóre gotowe ślady .
  2. Teraz, gdy włączyłeś nową funkcję, poszukaj niestandardowego kodu śledzenia splash_seasonal_image_processing , który mierzył czas potrzebny na pobranie i przetworzenie obrazu. Na podstawie wartości Duration śledzenia widać, że pobieranie i przetwarzanie zajmuje znaczną ilość czasu.

439adc3ec71805b7.png

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

Podobnie jak poprzednio, 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 metrykę , aby dodać tę metrykę do tablicy metryk.

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 metryk, a następnie kliknij opcję Wyświetl szczegóły metryk .

b1c275c30679062a.png

  1. Na stronie szczegółów w lewym dolnym rogu zobaczysz listę atrybutów, w tym utworzony wcześniej atrybut niestandardowy. Kliknij niestandardowy 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 czas trwania obrazu powinien być dłuższy , gdy obraz jest pobierany z adresu URL w porównaniu z obrazem domyślnym (reprezentowanym przez „nieustawiony”).

W tych ćwiczeniach z programowania przyczyna dłuższego czasu trwania może być prosta, ale w prawdziwej aplikacji może nie być tak oczywista. Zebrane dane dotyczące czasu trwania będą pochodzić z różnych urządzeń, na których uruchomiona jest aplikacja w różnych warunkach połączenia sieciowego, a warunki te mogą być gorsze, niż się spodziewasz. Przyjrzyjmy się, jak zbadałbyś tę kwestię, gdyby zaistniała sytuacja w świecie rzeczywistym.

  1. Kliknij opcję 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 zagregowane we wzorce adresów URL , w tym wzorce adresów URL images.unsplash.com/** . Jeśli porównasz wartość tego czasu odpowiedzi z całkowitym czasem potrzebnym na pobranie i przetworzenie obrazu (tj. czasem trwania śledzenia splash_seasonal_image_processing ), zobaczysz, że duża część czasu jest poświęcona na pobieranie obrazu.

6f92ce0f23494507.png

Ustalenia dotyczące wydajności

Korzystając z Monitorowania wydajności Firebase, zauważyłeś następujący wpływ na użytkowników końcowych po 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 reakcji na pobranie obrazu i związanego z nim czasu przetwarzania potrzebnego dla obrazu.

W następnym kroku złagodzisz wpływ na wydajność, wycofując funkcję i identyfikując, w jaki sposób możesz ulepszyć implementację tej funkcji.

10. Wycofaj tę funkcję

Wydłużanie czasu oczekiwania użytkowników na ekranie powitalnym nie jest pożądane. Jedną z kluczowych zalet Remote Config jest możliwość wstrzymywania i cofania wdrażania bez konieczności udostępniania użytkownikom kolejnej wersji. Dzięki temu możesz szybko reagować na problemy (takie jak problemy z wydajnością, które odkryłeś w ostatnim kroku) i minimalizować liczbę niezadowolonych użytkowników.

Jako szybkie rozwiązanie zaradcze zresetujesz percentyl wdrożenia 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, pusty ekran główny:

d946cab0df319e50.png

11. Napraw problemy z wydajnością

Wcześniej podczas zajęć z programowania odkryłeś, że pobranie obrazu ekranu powitalnego powodowało spowolnienie 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 zmniejszenie jakości do bardziej odpowiedniej rozdzielczości, dzięki czemu pobieranie obrazu zajmie mniej czasu.

Wdróż ponownie wartość Remote Config

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

828dd1951a2ec4a4.png

  1. Kliknij kartę Warunki u góry strony.
  2. Kliknij opcję 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

Po ustawieniu nowej wartości konfiguracyjnej na inny adres URL obrazu do pobrania uruchom aplikację ponownie. Tym razem warto zauważyć, że czas spędzony na ekranie powitalnym jest krótszy niż dotychczas.

b0cc91b6e48fb842.png

Zobacz skuteczność zmian

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

  1. Tym razem do przejścia na stronę szczegółów użyjesz tabeli śladów. W tabeli śladów, na karcie Niestandardowe ślady , kliknij niestandardowy przebieg splash_seasonal_image_processing , aby ponownie wyświetlić bardziej szczegółowy widok metryki czasu trwania.

2d7aaca03112c062.png

  1. Kliknij atrybut seasonal_image_url_attribute , aby ponownie wyświetlić 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 powiązana z tym obrazem jest znacznie krótsza niż wartość poprzedniego obrazu i jest bardziej akceptowalna dla użytkowników!

10e30c037a4237a2.png

  1. Teraz, gdy wydajność ekranu powitalnego została poprawiona, możesz skonfigurować alerty powiadamiające Cię, gdy ślad przekroczy ustawiony próg. Otwórz panel wydajności i kliknij ikonę rozszerzonego menu (trzy kropki) dla powitalnego ekranu_trace i kliknij Ustawienia alertów .

4bd0a2a1faa14479.png

  1. Kliknij przełącznik, aby włączyć alert dotyczący czasu trwania . Ustaw wartość progową nieco powyżej wartości, którą widzisz, aby w przypadku przekroczenia progu przez ekran powitalny otrzymasz wiadomość e-mail.
  1. Kliknij Zapisz , aby utworzyć alert. Przewiń w dół do tabeli śladów , a następnie kliknij kartę Niestandardowe ślady , aby sprawdzić, czy 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! Monitorowałeś kluczowe wskaźniki wydajności związane z wdrażaniem nowej funkcji i szybko reagowałeś, gdy wykryto problem z wydajnością. Wszystko to było możliwe dzięki możliwości wprowadzania zmian w konfiguracji za pomocą funkcji Remote Config i monitorowaniu problemów z wydajnością w czasie rzeczywistym.

Co omówiliśmy

  • Dodanie zestawu SDK do monitorowania wydajności Firebase do Twojej aplikacji
  • Dodanie niestandardowego śledzenia kodu do kodu w celu zmierzenia określonej funkcji
  • Konfigurowanie parametru i wartości warunkowej zdalnej konfiguracji w celu kontrolowania/wdrażania nowej funkcji
  • Zrozumienie, jak używać panelu monitorowania wydajności do identyfikowania problemów podczas wdrażania
  • Konfigurowanie alertów wydajnościowych, które będą powiadamiać Cię, gdy wydajność Twojej aplikacji przekroczy ustawiony próg

Ucz się więcej