Monitorowanie wydajności Firebase w kampaniach internetowych

1. Omówienie

Z tego ćwiczenia w Codelabs dowiesz się, jak używać Monitorowania wydajności Firebase do pomiaru wydajności aplikacji internetowej do obsługi czatu. Wejdź na https://fireperf-friendlychat.web.app/, by zobaczyć prezentację na żywo.

To ćwiczenie w Codelabs jest kontynuacją internetowego ćwiczenia z programowania Firebase, w którym pokazuje, jak stworzyć aplikację do obsługi czatu za pomocą pakietu SDK Firebase. Jeśli chcesz dowiedzieć się, jak korzystać z platformy Firebase w przeglądarce, tworząc aplikację do obsługi czatu, najpierw wykonaj internetowe ćwiczenia z programowania Firebase. Jeśli już wiesz, jak korzystać z platformy Firebase i interfejsu wiersza poleceń, i chcesz dowiedzieć się więcej o Monitorowaniu wydajności Firebase, jesteś we właściwym miejscu.

Czego się nauczysz

• Jak dodać Monitorowanie wydajności Firebase do aplikacji internetowej, aby uzyskiwać gotowe dane (wczytywanie stron i żądania sieciowe).
• Jak mierzyć konkretny fragment kodu za pomocą niestandardowych logów czasu.
• Jak rejestrować dodatkowe, niestandardowe dane powiązane z niestandardowym logem czasu.
• Jak bardziej posegmentować dane o skuteczności za pomocą atrybutów niestandardowych.
• Jak korzystać z panelu monitorowania wydajności, aby poznać wydajność aplikacji internetowej.

Czego potrzebujesz

• wybrane IDE lub edytor tekstu, taki jak WebStorm, Atom, Sublime lub VS Code;
• Terminal/konsola
• wybraną przeglądarkę, np. Chrome;
• Przykładowy kod z tej ćwiczeń (w następnej sekcji dowiesz się, jak pobrać kod).

2. Pobieranie przykładowego kodu

Skopiuj repozytorium GitHub ćwiczenia z programowania za pomocą wiersza poleceń:

git clone https://github.com/firebase/codelab-friendlychat-web

Jeśli nie masz zainstalowanego Gita, możesz pobrać repozytorium jako plik ZIP.

Repozytorium friendlychat-web zawiera przykładowe projekty na wiele platform.

To ćwiczenia w Codelabs korzystają tylko z tych 2 repozytoriów:

• 📁 Performance-monitoring-start: kod początkowy, który opracujesz podczas tego ćwiczenia w Codelabs.
• 📁 Monitorowanie wydajności: pełny kod gotowej przykładowej aplikacji.

Uwaga: jeśli chcesz uruchomić gotową aplikację, musisz utworzyć projekt Firebase w konsoli Firebase.

Importowanie aplikacji startowej

Korzystając ze swojego IDE, otwórz lub zaimportuj katalog 📁 performance-monitoring-start ze sklonowanego repozytorium. W tym katalogu 📁 performance-monitoring-start znajdziesz kod początkowy do ćwiczenia w Codelabs, czyli aplikacji internetowej do obsługi czatu.

3. Tworzenie i konfigurowanie projektu Firebase

Tworzenie projektu Firebase

1. W konsoli Firebase kliknij Dodaj projekt.
2. Nazwij swój projekt Firebase FriendlyChat.

Zapamiętaj identyfikator projektu Firebase.

3. Kliknij Utwórz projekt.

Ważne: Twój projekt Firebase otrzyma nazwę FriendlyChat,, ale Firebase automatycznie przypisze mu unikalny identyfikator projektu w formacie friendlychat-1234. Ten unikalny identyfikator jest faktycznie identyfikowany przez projekt (również w interfejsie wiersza poleceń), a FriendlyChat to tylko wyświetlana nazwa.

Dodaj aplikację internetową Firebase do projektu

1. Kliknij ikonę witryny , aby utworzyć nową aplikację internetową Firebase.
2. Zarejestruj aplikację pod pseudonimem Friendly Chat, a następnie zaznacz pole Skonfiguruj też dla tej aplikacji Hosting Firebase.
3. Kliknij Zarejestruj aplikację.
4. Kliknij pozostałe kroki. Nie musisz teraz postępować zgodnie z instrukcjami wyświetlanymi na ekranie. Omówimy je w dalszej części tego ćwiczenia z programowania.

Włączanie Logowania przez Google na potrzeby uwierzytelniania Firebase

Aby umożliwić użytkownikom logowanie się w aplikacji do obsługi czatu za pomocą kont Google, użyjemy metody logowania Google.

Musisz włączyć logowanie przez Google:

1. W konsoli Firebase znajdź w panelu po lewej stronie sekcję Programowanie.
2. Kliknij Uwierzytelnianie, a następnie kartę Metoda logowania ( otwórz konsolę).
3. Włącz dostawcę logowania Google i kliknij Zapisz.

Włączanie Cloud Firestore

Aplikacja internetowa używa Cloud Firestore do zapisywania wiadomości czatu i odbierania nowych wiadomości.

Musisz włączyć Cloud Firestore:

1. W sekcji Programowanie w konsoli Firebase kliknij Baza danych.
2. W panelu Cloud Firestore kliknij Utwórz bazę danych.
3. Wybierz opcję Rozpocznij w trybie testowym, a potem po przeczytaniu wyłączenia odpowiedzialności dotyczącego reguł zabezpieczeń kliknij Włącz.

Kod startowy tego ćwiczenia z programowania zawiera bezpieczniejsze reguły. Wdrożymy je później w ramach ćwiczeń z programowania.

Włącz Cloud Storage

Aplikacja internetowa korzysta z Cloud Storage dla Firebase do przechowywania, przesyłania i udostępniania zdjęć.

Musisz włączyć Cloud Storage:

1. W sekcji Programowanie w konsoli Firebase kliknij Miejsce na dane.
2. Kliknij Rozpocznij.
3. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł zabezpieczeń dla projektu Firebase i kliknij OK.

Kod początkowy zawiera podstawową regułę zabezpieczeń, którą wdrożymy później w ramach ćwiczenia.

4. Instalowanie interfejsu wiersza poleceń Firebase

Interfejs wiersza poleceń Firebase (CLI) umożliwia korzystanie z Hostingu Firebase do lokalnego udostępniania aplikacji internetowej oraz wdrażania aplikacji internetowej w projekcie Firebase.

1. Zainstaluj interfejs wiersza poleceń, wykonując te instrukcje z dokumentacji Firebase.
2. Sprawdź, czy interfejs wiersza poleceń został prawidłowo zainstalowany, uruchamiając w terminalu to polecenie:

firebase --version

Upewnij się, że interfejs wiersza poleceń Firebase jest w wersji 8.0.0 lub nowszej.

3. Autoryzuj interfejs wiersza poleceń Firebase, uruchamiając następujące polecenie:

firebase login

Skonfigurowaliśmy szablon aplikacji internetowej tak, aby pobierał jej konfigurację na potrzeby Hostingu Firebase z lokalnego katalogu aplikacji (repozytorium skopiowanego wcześniej w ramach ćwiczenia). Aby jednak pobrać konfigurację, musimy powiązać Twoją aplikację z projektem Firebase.

4. Upewnij się, że wiersz poleceń ma dostęp do lokalnego katalogu performance-monitoring-start aplikacji.
5. Powiąż aplikację z projektem Firebase, uruchamiając to polecenie:

firebase use --add

6. Gdy pojawi się prośba, wybierz identyfikator projektu, a następnie nadaj projektowi Firebase alias.

Alias jest przydatny, jeśli masz wiele środowisk (produkcyjnych, przejściowych itp.). Jednak w tym ćwiczeniu z programowania użyjemy aliasu default.

7. Postępuj zgodnie z pozostałymi instrukcjami podanymi w wierszu poleceń.

5. Integracja z Monitorowaniem wydajności Firebase

Istnieje kilka sposobów integracji z pakietem SDK Firebase Performance Monitoring w przypadku aplikacji internetowych (więcej informacji znajdziesz w dokumentacji). W ramach tego ćwiczenia w Codelabs włączymy monitorowanie wydajności za pomocą adresów URL hostów.

Dodawanie monitorowania wydajności i inicjowanie Firebase

1. Otwórz plik src/index.js, a potem dodaj poniższy wiersz poniżej wiersza TODO, aby dołączyć pakiet SDK Firebase Performance Monitoring.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';

2. Pakiet SDK Firebase trzeba też zainicjować obiektem konfiguracji zawierającym informacje o projekcie Firebase i aplikacji internetowej, której chcemy użyć. Ponieważ korzystamy z Hostingu Firebase, możesz zaimportować specjalny skrypt, który zajmie się tą konfiguracją. Do tych ćwiczeń w programie dodaliśmy ten wiersz na dole pliku public/index.html, ale sprawdź jeszcze raz, czy go tam znajdziesz.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>

3. W pliku src/index.js dodaj poniższy wiersz pod wierszem TODO, aby zainicjować monitorowanie wydajności.

index.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

Monitorowanie wydajności będzie teraz automatycznie zbierać dane dotyczące wczytywania strony i żądań sieciowych, gdy użytkownicy korzystają z Twojej witryny. Więcej informacji o automatycznych logach czasu wczytywania stron znajdziesz w dokumentacji.

Dodaj bibliotekę polyfill na potrzeby pierwszego opóźnienia wejściowego

Opóźnienie przy pierwszym działaniu jest przydatne, ponieważ przeglądarka reagująca na interakcję użytkownika daje mu pierwsze wrażenia dotyczące responsywności aplikacji.

Opóźnienie przy pierwszym działaniu zaczyna się, gdy użytkownik po raz pierwszy wejdzie w interakcję z elementem na stronie, np. kliknięciem przycisku lub hiperlinku. Zatrzymuje się natychmiast po tym, jak przeglądarka jest w stanie zareagować na dane wejściowe, co oznacza, że przeglądarka nie zajmuje się ładowaniem ani analizowaniem treści.

Ta biblioteka polyfill jest opcjonalna do integracji monitorowania wydajności.

Otwórz plik public/index.html i usuń znacznik komentarza do kolejnego wiersza.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

Na tym etapie integracja z Monitorowaniem wydajności Firebase w kodzie jest zakończona.

Istnieją też inne sposoby integracji z pakietem SDK Firebase Performance Monitoring w przypadku witryn internetowych. Więcej informacji znajdziesz w artykule Pierwsze kroki z Monitorowaniem wydajności witryn.

W kolejnych krokach dowiesz się, jak dodawać niestandardowe logi czasu za pomocą Monitorowania wydajności Firebase. Jeśli chcesz zbierać tylko automatyczne logi czasu, przejdź do sekcji „Wdrażanie i wysyłanie obrazów” .

6. Dodaj niestandardowy log czasu do swojej aplikacji

Monitorowanie wydajności umożliwia tworzenie niestandardowych logów czasu. Niestandardowy log czasu to raport dotyczący czasu trwania bloku wykonania w aplikacji. Początek i koniec niestandardowego logu czasu definiujesz za pomocą interfejsów API dostępnych w pakiecie SDK.

1. W pliku src/index.js pobierz obiekt wydajności, a następnie utwórz niestandardowy log czasu do przesłania wiadomości z obrazem.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");

2. Aby zarejestrować niestandardowy log czasu, musisz określić jego punkt początkowy i końcowy. Możesz wyobrazić sobie ślad jak stoper.

index.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

Udało Ci się zdefiniować niestandardowy log czasu. Po wdrożeniu kodu czas trwania niestandardowego logu czasu zostanie zarejestrowany, jeśli użytkownik wyśle wiadomość z obrazem. Dzięki temu dowiesz się, ile czasu zajmuje wysyłanie obrazów w aplikacji do obsługi czatu.

7. Dodaj do swojej aplikacji dane niestandardowe.

Możesz dodatkowo skonfigurować śledzenie niestandardowe, aby rejestrować dane niestandardowe o zdarzeniach związanych z wydajnością, które występują w jego zakresie. Możesz na przykład użyć danych, aby sprawdzić, czy na czas przesyłania ma wpływ rozmiar obrazu niestandardowego logu czasu, który zdefiniowaliśmy w ostatnim kroku.

1. Znajdź niestandardowy log czasu z poprzedniego kroku (zdefiniowany w pliku src/index.js).
2. Dodaj poniższy wiersz pod polem TODO, aby zarejestrować rozmiar przesłanego obrazu.

index.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

Ten wskaźnik umożliwia monitorowanie wydajności do rejestrowania niestandardowego czasu trwania logu czasu, a także rozmiaru przesłanego obrazu.

8. Dodaj atrybut niestandardowy do aplikacji

Opierając się na wcześniejszych krokach, możesz też zbierać atrybuty niestandardowe w niestandardowych logach czasu. Atrybuty niestandardowe mogą pomóc w segmentowaniu danych według kategorii charakterystycznych dla Twojej aplikacji. Na przykład możesz pobrać typ MIME pliku obrazu, aby sprawdzić, jak ten typ MIME może wpływać na wydajność.

1. Użyj niestandardowego logu czasu zdefiniowanego w pliku src/index.js.
2. Dodaj poniższy wiersz pod polem TODO, aby zapisać typ MIME przesłanego obrazu.

index.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

Ten atrybut umożliwia monitorowaniu wydajności kategoryzowanie niestandardowego czasu trwania logu czasu na podstawie typu przesłanego obrazu.

9. [Przedłużyć] Dodawanie niestandardowego logu czasu za pomocą interfejsu User Timing API

Pakiet SDK Firebase Performance Monitoring został zaprojektowany w taki sposób, aby mógł być ładowany asynchronicznie, dzięki czemu nie wpływa negatywnie na wydajność aplikacji internetowych podczas wczytywania strony. Przed załadowaniem pakietu SDK interfejs Firebase Performance Monitoring API jest niedostępny. W takim przypadku nadal możesz dodawać niestandardowe logi czasu za pomocą interfejsu User Timing API. Pakiet SDK wydajności Firebase pobierze czasy trwania z metody measure() i zapisze je jako niestandardowe logi czasu.

Będziemy mierzyć czas wczytywania skryptów stylu aplikacji za pomocą interfejsu User Timing API.

1. W pliku public/index.html dodaj ten wiersz, aby oznaczyć początek wczytywania skryptów stylu aplikacji.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>

2. Dodaj te wiersze, aby oznaczyć koniec wczytywania skryptów stylu aplikacji i zmierzyć czas trwania między rozpoczęciem a zakończeniem.

index.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

Utworzony przez Ciebie wpis zostanie automatycznie zebrany przez Monitorowanie wydajności Firebase. Później znajdziesz niestandardowy log czasu o nazwie loadStyling w konsoli Skuteczność Firebase.

10. Wdróż i zacznij wysyłać obrazy

Wdrażanie w Hostingu Firebase

Po dodaniu do kodu Monitorowania wydajności Firebase wykonaj te czynności, aby wdrożyć kod w Hostingu Firebase:

1. Upewnij się, że wiersz poleceń ma dostęp do lokalnego katalogu performance-monitoring-start aplikacji.
2. Wdróż pliki w projekcie Firebase, uruchamiając następujące polecenie:

firebase deploy

3. Konsola powinna wyświetlić te informacje:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

4. Otwórz aplikację internetową, która jest już w pełni hostowana w Hostingu Firebase w 2 Twoich subdomenach Firebase: https://<projectId>.firebaseapp.com i https://<projectId>.web.app.

Sprawdzanie, czy monitorowanie wydajności jest włączone

Otwórz konsolę Firebase i przejdź do karty Skuteczność. Jeśli pojawi się komunikat powitalny z informacją „Wykryto pakiet SDK”, oznacza to, że udało Ci się przeprowadzić integrację z Monitorowaniem wydajności Firebase.

Wyślij wiadomość o obrazie

Wygeneruj dane dotyczące skuteczności, wysyłając obrazy w aplikacji do obsługi czatu.

1. Po zalogowaniu się do aplikacji do obsługi czatu kliknij przycisk przesyłania obrazu .
2. Wybierz plik obrazu, korzystając z okna wyboru plików.
3. Spróbuj wysłać kilka obrazów (w usłudze public/images/ przechowujemy kilka próbek), by przetestować rozpowszechnianie danych niestandardowych i atrybutów niestandardowych.

Nowe wiadomości powinny wyświetlać się w interfejsie aplikacji wraz z wybranymi obrazami.

11. Monitorowanie panelu

Gdy wdrożysz aplikację internetową i wyślesz wiadomości graficzne jako użytkownik, możesz przeglądać dane o wydajności w panelu monitorowania wydajności (w konsoli Firebase).

Uwaga: dane o skuteczności zwykle pojawiają się w ciągu 12 godzin. Jeśli nie widzisz żadnych wyników w konsoli Firebase, zajrzyj tu później.

Otwieranie panelu

1. W konsoli Firebase wybierz projekt zawierający aplikację Friendly Chat.
2. W panelu po lewej stronie znajdź sekcję Jakość i kliknij Skuteczność.

Sprawdź dane na urządzeniu

Gdy funkcja monitorowania wydajności przetworzy dane aplikacji, u góry panelu pojawią się karty. Jeśli nie widzisz jeszcze żadnych danych ani kart, sprawdź za jakiś czas.

1. Kliknij kartę Na urządzeniu.

• Tabela Wczytania strony zawiera różne dane o skuteczności zbierane automatycznie podczas wczytywania strony przez funkcję monitorowania skuteczności.
• Tabela Czasy trwania zawiera wszystkie niestandardowe logi czasu zdefiniowane w kodzie aplikacji.

2. Kliknij saveImageMessage w tabeli Czasy trwania, aby przejrzeć konkretne dane logu czasu.

3. Kliknij Agreguj, aby sprawdzić rozkład rozmiarów obrazów. Możesz wyświetlić dane dodane do pomiaru rozmiaru obrazu w tym niestandardowym logu czasu.

4. Kliknij W czasie obok opcji Agreguj w poprzednim kroku. Możesz też wyświetlić Czas trwania niestandardowego logu czasu. Aby bardziej szczegółowo zapoznać się z zebranymi danymi, kliknij Wyświetl więcej.

5. Na stronie, która się otworzy, możesz posegmentować dane dotyczące czasu trwania według typu MIME obrazu, klikając imageType. Te konkretne dane zostały zarejestrowane ze względu na atrybut imageType dodany przez Ciebie do niestandardowego logu czasu.

Przeglądanie danych sieci

Żądanie sieciowe HTTP/S to raport, który rejestruje czas odpowiedzi i rozmiar ładunku wywołań sieciowych.

1. Wróć do ekranu głównego panelu monitorowania wydajności.
2. Kliknij kartę Sieć, aby wyświetlić listę wpisów żądań sieciowych Twojej aplikacji internetowej.
3. Przejrzyj je, aby zidentyfikować zbyt długie żądania i zacząć pracę nad rozwiązaniem, które poprawi wydajność aplikacji.

12. Gratulacje!

Pakiet SDK Firebase umożliwia monitorowanie wydajności. Gromadzisz też automatyczne ślady oraz niestandardowe logi czasu, aby mierzyć rzeczywistą wydajność swojej aplikacji do obsługi czatu.

Omówione zagadnienia:

• Dodajesz pakiet SDK Firebase Performance Monitoring do swojej aplikacji internetowej.
• Dodawanie niestandardowych logów czasu do kodu.
• Rejestrowanie niestandardowych wskaźników powiązanych z niestandardowym logem czasu.
• Segmentowanie danych skuteczności za pomocą atrybutów niestandardowych
• Wiesz, jak korzystać z panelu monitorowania wydajności, aby uzyskać statystyki dotyczące wydajności aplikacji.

Więcej informacji:

• firebase.google.com
• firebase.google.com/docs/perf-mon/get-started-web
• web.dev/fast/