Jak porównywać i ulepszać wskaźniki internetowe za pomocą rzeczywistych wskaźników użytkowników?

Ten artykuł został uprzejmie poparty przez naszych drogich przyjaciół z Raygun, którzy pomagają programistom zidentyfikować problemy, zanim będą miały one wpływ na ich klientów, zapewniając standard doświadczenia, którego użytkownicy oczekują i na który zasługują. Dziękuję Ci!

Jak byś zmierzył wydajność? Czasami jest to czas, jaki aplikacja zajmuje od początkowego żądania do pełnego wyrenderowania. Innym razem chodzi o to, jak szybko wykonuje się zadanie. Może to być również czas potrzebny użytkownikowi na otrzymanie informacji zwrotnej na temat działania. Zapewniamy, że wszystkie te definicje (i inne) byłyby poprawne, pod warunkiem odpowiedniego kontekstu.

Niestety nie ma srebrnej kuli do mierzenia wydajności. Różne produkty będą miały różne testy porównawcze, a dwie aplikacje mogą działać inaczej w stosunku do tych samych wskaźników, ale nadal mają podobną pozycję do naszych subiektywnych „dobrych” i „złych” werdyktów.

Dążąc do usprawnienia języka oraz promowania współpracy i standaryzacji, nasza branża opracowała szeroko rozpowszechnione koncepcje. W ten sposób programiści mogą dzielić się rozwiązaniami, określać priorytety i skupiać się na efektywnym wykonywaniu pracy.

Wydajność a wydajność postrzegana

Weźmy ten fragment jako przykład:

 const sum = new Array(1000) .fill(0) .map((el, idx) => el + idx) .reduce((sum, el) => sum + el, 0) console.log(sum)

Cel tego jest nieistotny i tak naprawdę nie robi niczego poza wyprowadzeniem liczby na konsolę przez znaczną ilość czasu. W obliczu tego kodu można (słusznie) powiedzieć, że nie działa on dobrze. Nie jest to szybki kod do uruchomienia i można go zoptymalizować za pomocą różnych rodzajów pętli lub wykonać te zadania w jednej pętli.

Inną ważną rzeczą jest to, że może blokować renderowanie strony internetowej. Zawiesza (a może nawet zawiesza się) kartę przeglądarki. Zatem w tym przypadku wydajność postrzegana przez użytkownika idzie w parze z wykonaniem samego zadania.

Możemy jednak wykonać to zadanie w web workerze. Zapobiegając blokowaniu renderowania, nasze zadanie nie będzie działać szybciej — można więc powiedzieć, że wydajność jest nadal taka sama — ale użytkownik nadal będzie mógł wchodzić w interakcję z naszą aplikacją i otrzymywać odpowiednią informację zwrotną. Ma to wpływ na to, jak szybko nasz użytkownik końcowy będzie postrzegał naszą aplikację. Nie jest szybszy, ale ma lepszą Perceived Performance .

Uwaga : Jeśli chcesz dowiedzieć się więcej o Web-Workers i React, możesz zapoznać się z moim dowodem koncepcji React-web-workers na GitHub.

Wskaźniki internetowe

Wydajność sieci to obszerny temat z tysiącami wskaźników, które można potencjalnie monitorować i ulepszać. Web Vitals to odpowiedź Google na standaryzację wydajności sieci. Ta standaryzacja umożliwia programistom skupienie się na metrykach, które mają największy wpływ na wrażenia użytkownika końcowego.

• Pierwsza zawartość treściowa (FCP)
  Czas od rozpoczęcia ładowania do wyrenderowania treści na ekranie.
• Największa zawartość farby (LCP)
  Czas renderowania największego bloku obrazu lub tekstu jest widoczny w rzutni. Dobry wynik to mniej niż 2,5 s dla 75% wczytywania strony.
• Opóźnienie pierwszego wejścia (FID)
  Czas od interakcji użytkownika ze stroną do momentu, w którym przeglądarka jest w stanie przetworzyć żądanie.
  Dobry wynik to mniej niż 100 ms dla 75% wczytywania strony.
• Zbiorcza zmiana układu (CLS)
  Łączna suma wszystkich pojedynczych przesunięć układu dla każdej nieoczekiwanej zmiany, która wystąpiła w okresie życia strony. Dobry wynik to 0,1 przy 75% wczytywania strony.
• Czas na interakcję (TTI)
  Czas od rozpoczęcia ładowania strony do załadowania jej głównych zasobów podrzędnych.
• Całkowity czas blokowania (TBT)
  Czas między First Contentful Paint i Time to Interactive, w którym główny wątek został zablokowany (brak reakcji na dane wejściowe użytkownika).

Który z nich jest najważniejszy?

Podstawowe wskaźniki internetowe to podzbiór wskaźników internetowych, które według Google mają największy wpływ na wrażenia użytkownika końcowego. Od 2022 r. istnieją trzy kluczowe wskaźniki internetowe — największe malowanie treści (szybkość), skumulowane przesunięcie układu (stabilność) i opóźnienie pierwszego wejścia (interaktywność).

Zalecana literatura : Przewodnik programisty dotyczący podstawowych wskaźników internetowych

Raport doświadczeń użytkowników Chrome a rzeczywiste dane użytkowników

Istnieje wiele sposobów testowania wskaźników internetowych w Twojej aplikacji. Najłatwiej jest otworzyć Chrome Devtools, przejść do zakładki Lighthouse, sprawdzić swoje preferencje i wygenerować raport. Nazywa się to raportem Chrome User Experience Report (CrUX) i opiera się na 28-dniowej średniej próbkach od użytkowników Chrome, którzy spełniają określone wymagania:

• synchronizacja historii przeglądania;
• brak konfiguracji hasła synchronizacji;
• Włączono raportowanie statystyk użytkowania.

Ale dość trudno jest określić, na ile reprezentatywny jest raport Chrome UX dla Twoich użytkowników. Raport służy jako zasięg i może stanowić dobry wskaźnik rzeczy, które należy poprawić doraźnie. Dlatego bardzo dobrym pomysłem jest użycie narzędzia Real User Monitoring (RUM), takiego jak Raygun. Spowoduje to wyświetlenie informacji o osobach faktycznie wchodzących w interakcję z Twoją aplikacją we wszystkich przeglądarkach w wyznaczonym czasie.

Samo monitorowanie rzeczywistych wskaźników użytkownika nie jest jednak prostym zadaniem. Istnieje mnóstwo przeszkód, o których należy pamiętać. Nie musi to być jednak skomplikowane. Konfiguracja uzyskiwania metryk RUM za pomocą narzędzi do monitorowania wydajności jest łatwa. Jedną z opcji wartych rozważenia jest Raygun — można go skonfigurować w kilku szybkich krokach i jest przyjazny dla RODO. Ponadto otrzymujesz również wiele funkcji raportowania błędów.

Monitorowanie aplikacji

Deweloperzy często traktują obserwowalność i monitorowanie wydajności jako refleksję. Jednak monitorowanie jest kluczowym aspektem cyklu rozwoju, który pomaga zespołom programistycznym działać szybciej, ustalać priorytety i unikać poważnych problemów w przyszłości.

Konfigurowanie monitorowania może być proste, a tworzenie funkcji, które uwzględniają obserwowalność, pomoże zespołowi w podstawowej konserwacji i higienie kodu, aby uniknąć tych okropnych sprintów do refaktoryzacji. Monitorowanie aplikacji może pomóc Ci spać spokojnie w nocy i poprowadzić Twój zespół w kierunku tworzenia lepszych doświadczeń użytkowników.

Monitoruj trendy i unikaj regresji

W ten sam sposób mamy uruchomione testy na naszym potoku ciągłej integracji (idealnie), aby uniknąć regresji funkcji i błędów, powinniśmy mieć sposób na zidentyfikowanie regresji wydajności dla naszych użytkowników natychmiast po nowym wdrożeniu. Raygun może pomóc programistom zautomatyzować tę pracę dzięki funkcji śledzenia wdrożeń.

Przestrzeganie budżetu zadaniowego staje się bardziej zrównoważone. Dzięki tym informacjom Twój zespół może szybko wykryć regresję wydajności (lub ulepszenia) we wszystkich kluczowych wskaźnikach sieciowych, zidentyfikować problematyczne wdrożenia i skupić się na użytkownikach, których to dotyczy.

Zagłębiaj się i podejmij działania

Korzystając z RUM, możliwe jest zawężenie wyników w przeliczeniu na użytkownika. Na przykład w Raygun możliwe jest kliknięcie wyniku lub paska na histogramie, aby wyświetlić listę dotkniętych użytkowników. Umożliwia to rozpoczęcie dalszych prac w sesjach na zasadzie indywidualnej, z informacjami na poziomie instancji. Pomaga to w podejmowaniu działań bezpośrednio ukierunkowanych na problem, zamiast po prostu ufać ogólnym najlepszym praktykom. A później, aby zdiagnozować reperkusje zmiany.

Wyróżnij niezwykłe wydarzenia

Oczywiście te funkcje są niesamowite i odpowiedzialny programista powinien mieć oko na pulpity monitorowania aplikacji. Jednak wraz ze skalowaniem aplikacji, rozwojem zespołów i podziałem obowiązków ważniejsze niż kiedykolwiek jest skonfigurowanie zautomatyzowanych procesów, które będą szybko ostrzegać o wszelkich poważnych problemach z wydajnością. Dlatego zalecaną najlepszą praktyką jest skonfigurowanie wyzwalaczy alertów dla aplikacji.

Zawijanie

Podsumowując, Web Vitals to nowy złoty standard wydajności ze względu na ich bezpośrednią korelację z doświadczeniem użytkownika. Zespoły programistyczne, które aktywnie monitorują i optymalizują swoje wskaźniki internetowe w oparciu o rzeczywiste spostrzeżenia użytkowników, zapewnią szybsze i bardziej odporne doświadczenia cyfrowe.

Dopiero co poznaliśmy możliwości monitorowania i rozwiązania umożliwiające utrzymanie wydajności podczas skalowania aplikacji. Daj mi znać w komentarzach, jak stosujesz Budżet Wydajności, lepszą obserwowalność lub inne rozwiązania, aby mieć spokojny sen!