Performance Observer API: Mierniki wydajności w czasie rzeczywistym i analiza wąskich gardeł

W dzisiejszym konkurencyjnym środowisku cyfrowym wydajność stron i aplikacji internetowych ma kluczowe znaczenie dla zaangażowania użytkowników i sukcesu biznesowego. Wolne czasy ładowania i niereagujące interfejsy mogą prowadzić do frustracji użytkowników, porzuconych transakcji i ostatecznie do utraty przychodów. Performance Observer API to potężne narzędzie, które pozwala programistom monitorować i analizować metryki wydajności w czasie rzeczywistym, identyfikować wąskie gardła i optymalizować swoje aplikacje w celu zapewnienia płynniejszego, szybszego i przyjemniejszego doświadczenia użytkownika, niezależnie od jego lokalizacji czy urządzenia.

Czym jest Performance Observer API?

Performance Observer API to interfejs API JavaScript, który dostarcza mechanizm do obserwowania i reagowania na zdarzenia związane z wydajnością w miarę ich występowania w aplikacji internetowej. W przeciwieństwie do tradycyjnych technik monitorowania wydajności, które opierają się na okresowym próbkowaniu lub ręcznej instrumentacji, Performance Observer API oferuje bardziej wydajny i elastyczny sposób przechwytywania danych o wydajności w czasie rzeczywistym. Pozwala programistom subskrybować określone typy wpisów wydajności i otrzymywać powiadomienia za każdym razem, gdy nowe wpisy są rejestrowane.

To podejście "obserwuj i reaguj" umożliwia proaktywne monitorowanie wydajności, pozwalając programistom identyfikować i rozwiązywać problemy z wydajnością, zanim wpłyną one na doświadczenie użytkownika. API jest standaryzowane w nowoczesnych przeglądarkach, co zapewnia spójne zachowanie i kompatybilność międzyplatformową.

Kluczowe pojęcia i funkcje

Aby skutecznie wykorzystać Performance Observer API, niezbędne jest zrozumienie jego podstawowych pojęć i funkcji:

• PerformanceEntry: Reprezentuje pojedynczy pomiar wydajności lub zdarzenie. Wpisy wydajności zawierają informacje o typie zdarzenia, jego czasie rozpoczęcia i zakończenia oraz inne istotne atrybuty. Przykłady to resource, mark, measure, navigation, longtask i event.
• PerformanceObserver: Obiekt, który pozwala subskrybować określone typy wpisów wydajności i otrzymywać powiadomienia, gdy nowe wpisy są dodawane do osi czasu wydajności przeglądarki.
• metoda observe(): Służy do konfigurowania PerformanceObserver do nasłuchiwania określonych typów wpisów wydajności. Można określić typy wpisów, które chcesz obserwować, a także opcję buffered, aby otrzymywać historyczne wpisy.
• metoda disconnect(): Służy do zatrzymania nasłuchiwania przez PerformanceObserver na zdarzenia wydajności.
• metoda takeRecords(): Zwraca tablicę wszystkich wpisów wydajności, które zostały zaobserwowane, ale jeszcze nie przetworzone przez funkcję zwrotną obserwatora.
• Funkcja zwrotna (Callback Function): Funkcja, która jest wykonywana za każdym razem, gdy obserwowane są nowe wpisy wydajności. Funkcja ta otrzymuje obiekt PerformanceObserverEntryList zawierający zaobserwowane wpisy.

Obsługiwane typy wpisów wydajności

Performance Observer API obsługuje różnorodne typy wpisów wydajności, z których każdy dostarcza specyficznych informacji na temat różnych aspektów wydajności aplikacji internetowej. Niektóre z najczęściej używanych typów wpisów to:

• resource: Dostarcza informacji o ładowaniu poszczególnych zasobów, takich jak obrazy, skrypty, arkusze stylów i czcionki. Ten typ wpisu zawiera szczegóły takie jak adres URL zasobu, czasy rozpoczęcia i zakończenia, czas trwania pobierania i rozmiar transferu.
• mark: Pozwala tworzyć niestandardowe znaczniki czasu w kodzie, aby mierzyć czas trwania określonych sekcji kodu. Można używać znaczników do śledzenia początku i końca krytycznych operacji, takich jak przetwarzanie danych czy renderowanie interfejsu użytkownika.
• measure: Służy do obliczania czasu trwania między dwoma znacznikami. Ten typ wpisu zapewnia wygodny sposób mierzenia wydajności niestandardowych sekcji kodu.
• navigation: Dostarcza informacji o czasach nawigacji strony, w tym czasie wyszukiwania DNS, czasie połączenia TCP, czasach żądania i odpowiedzi oraz czasie przetwarzania DOM.
• longtask: Identyfikuje zadania, które blokują główny wątek na dłuższy czas (zazwyczaj dłużej niż 50 milisekund). Długie zadania mogą powodować brak responsywności interfejsu użytkownika i zacinanie się (jank).
• event: Rejestruje informacje o czasie dla określonych zdarzeń przeglądarki, takich jak click, keydown i scroll.
• layout-shift: Śledzi nieoczekiwane przesunięcia układu na stronie. Te przesunięcia mogą być irytujące dla użytkowników i negatywnie wpływać na ich doświadczenie.
• largest-contentful-paint: Mierzy czas potrzebny, aby największy element treści stał się widoczny na stronie.
• first-input-delay: Mierzy czas potrzebny przeglądarce na odpowiedź na pierwszą interakcję użytkownika (np. kliknięcie lub dotknięcie).
• element: Raportuje informacje o czasie renderowania określonych elementów na stronie.

Praktyczne przykłady i zastosowania

Performance Observer API może być używane w szerokim zakresie scenariuszy w celu poprawy wydajności aplikacji internetowych. Oto kilka praktycznych przykładów:

1. Monitorowanie czasów ładowania zasobów

Typ wpisu resource pozwala śledzić czasy ładowania poszczególnych zasobów, takich jak obrazy, skrypty i arkusze stylów. Informacje te można wykorzystać do identyfikacji wolno ładujących się zasobów, które wpływają na czas ładowania strony. Na przykład, można użyć następującego kodu do monitorowania czasów ładowania zasobów:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

Ten kod tworzy PerformanceObserver, który nasłuchuje na wpisy resource i loguje adres URL zasobu oraz czas trwania do konsoli. Analizując te dane, można zidentyfikować wolno ładujące się zasoby i zoptymalizować je poprzez kompresję obrazów, użycie sieci dostarczania treści (CDN) lub optymalizację konfiguracji serwera.

Perspektywa globalna: Monitorując czasy ładowania zasobów, weź pod uwagę geograficzną lokalizację swoich użytkowników. Użytkownicy w regionach z wolniejszymi połączeniami internetowymi mogą doświadczać znacznie dłuższych czasów ładowania. Użycie CDN z geograficznie rozproszonymi serwerami może pomóc w złagodzeniu tego problemu.

2. Mierzenie czasu wykonania niestandardowego kodu

Typy wpisów mark i measure pozwalają mierzyć czas wykonania niestandardowych sekcji kodu. Jest to przydatne do identyfikowania wąskich gardeł wydajności w logice aplikacji. Na przykład, można użyć następującego kodu do pomiaru czasu trwania określonej funkcji:

            performance.mark("start");

// Code to be measured
for (let i = 0; i < 1000000; i++) {
 // Some computationally intensive operation
}

performance.mark("end");
performance.measure("My Function", "start", "end");

const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Measurement: ${entry.name}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["measure"] });

            

              
                Copy
              
            
          

Ten kod tworzy dwa znaczniki, start i end, przed i po sekcji kodu, którą chcesz zmierzyć. Następnie używa metody performance.measure() do obliczenia czasu trwania między dwoma znacznikami. PerformanceObserver nasłuchuje na wpisy measure i loguje nazwę pomiaru oraz czas trwania do konsoli. Analizując te dane, można zidentyfikować wolno działające sekcje kodu i zoptymalizować je za pomocą technik takich jak buforowanie, memoizacja lub optymalizacja algorytmiczna.

Praktyczna wskazówka: Zidentyfikuj krytyczne ścieżki swojej aplikacji – sekwencje kodu, które są najczęściej wykonywane i mają największy wpływ na wydajność. Skoncentruj swoje wysiłki optymalizacyjne na tych krytycznych ścieżkach, aby osiągnąć największe korzyści wydajnościowe.

3. Identyfikacja długich zadań

Typ wpisu longtask identyfikuje zadania, które blokują główny wątek na dłuższy czas. Długie zadania mogą powodować brak responsywności interfejsu użytkownika i zacinanie się, prowadząc do złego doświadczenia użytkownika. Można użyć następującego kodu do monitorowania długich zadań:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Long Task: ${entry.name}, Duration: ${entry.duration}ms`);
 console.warn(`Long Task Attribution: ${JSON.stringify(entry.attribution)}`);
 });
});

observer.observe({ entryTypes: ["longtask"] });

            

              
                Copy
              
            
          

Ten kod tworzy PerformanceObserver, który nasłuchuje na wpisy longtask i loguje nazwę zadania oraz czas trwania do konsoli. Analizując te dane, można zidentyfikować długo działające zadania i zoptymalizować je poprzez dzielenie ich na mniejsze części, używanie operacji asynchronicznych lub przenoszenie ich do web workera.

Globalna wytyczna dotycząca pisania: Wyjaśniając pojęcia techniczne, używaj jasnego i zwięzłego języka, który jest dostępny dla czytelników o różnym poziomie wiedzy technicznej. Unikaj żargonu i zapewniaj kontekst dla nieznanych terminów.

4. Analiza czasów nawigacji

Typ wpisu navigation dostarcza szczegółowych informacji o czasach nawigacji strony, w tym czasie wyszukiwania DNS, czasie połączenia TCP, czasach żądania i odpowiedzi oraz czasie przetwarzania DOM. Dane te można wykorzystać do identyfikacji wąskich gardeł w procesie ładowania strony. Na przykład, można użyć następującego kodu do analizy czasów nawigacji:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Navigation: ${entry.name}`);
 console.log(`DNS Lookup Time: ${entry.domainLookupEnd - entry.domainLookupStart}ms`);
 console.log(`TCP Connection Time: ${entry.connectEnd - entry.connectStart}ms`);
 console.log(`Request Time: ${entry.responseStart - entry.requestStart}ms`);
 console.log(`Response Time: ${entry.responseEnd - entry.responseStart}ms`);
 console.log(`DOM Processing Time: ${entry.domComplete - entry.domInteractive}ms`);
 });
});

observer.observe({ entryTypes: ["navigation"] });

            

              
                Copy
              
            
          

Ten kod tworzy PerformanceObserver, który nasłuchuje na wpisy navigation i loguje różne metryki czasowe do konsoli. Analizując te dane, można zidentyfikować wąskie gardła, takie jak wolne wyszukiwanie DNS, wolne połączenie TCP, wolne przetwarzanie żądań, wolne przetwarzanie odpowiedzi lub wolne przetwarzanie DOM. Następnie można podjąć odpowiednie działania w celu rozwiązania tych problemów, takie jak optymalizacja konfiguracji DNS, poprawa wydajności serwera lub optymalizacja kodu HTML i JavaScript.

Optymalizacja SEO: Używaj odpowiednich słów kluczowych w sposób naturalny w całej treści. W tej sekcji słowa kluczowe takie jak "czasy nawigacji", "czas wyszukiwania DNS", "czas połączenia TCP" i "proces ładowania strony" są wkomponowane w sposób płynny.

5. Monitorowanie przesunięć układu

Typ wpisu layout-shift śledzi nieoczekiwane przesunięcia układu na stronie. Te przesunięcia mogą być irytujące dla użytkowników i negatywnie wpływać na ich doświadczenie. Często występują z powodu obrazów bez wymiarów, reklam, które ładują się z opóźnieniem, lub dynamicznie wstrzykiwanej treści. Można użyć następującego kodu do monitorowania przesunięć układu:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Layout Shift: ${entry.name}, Value: ${entry.value}`);
 console.warn(`Layout Shift Had Recent Input: ${entry.hadRecentInput}`);
 console.warn(`Layout Shift Sources: ${JSON.stringify(entry.sources)}`);
 });
});

observer.observe({ entryTypes: ["layout-shift"] });

            

              
                Copy
              
            
          

Ten kod tworzy PerformanceObserver, który nasłuchuje na wpisy layout-shift i loguje wartość przesunięcia (wynik reprezentujący wielkość przesunięcia) do konsoli. Wyższa wartość wskazuje na bardziej znaczące przesunięcie. Właściwość hadRecentInput wskazuje, czy przesunięcie wystąpiło w ciągu 500 ms od interakcji użytkownika. Przesunięcia wywołane przez interakcję użytkownika są generalnie uważane za mniej problematyczne. Właściwość sources dostarcza szczegółów na temat elementów, które spowodowały przesunięcie. Analizując te dane, można zidentyfikować i naprawić problemy z przesunięciem układu, określając wymiary dla obrazów, rezerwując miejsce na reklamy i unikając dynamicznego wstrzykiwania treści, które mogą powodować ponowne przeliczenie układu.

Praktyczna wskazówka: Używaj narzędzi takich jak Google Lighthouse do identyfikacji problemów z przesunięciem układu i uzyskiwania zaleceń dotyczących ich naprawy. Priorytetowo traktuj naprawę przesunięć, które występują bez interakcji użytkownika.

6. Mierzenie Largest Contentful Paint (LCP)

Typ wpisu largest-contentful-paint mierzy czas potrzebny, aby największy element treści stał się widoczny na stronie. LCP to jeden z podstawowych wskaźników internetowych (Core Web Vitals), który odzwierciedla postrzeganą szybkość ładowania strony. Dobry wynik LCP to 2,5 sekundy lub mniej. Można użyć następującego kodu do pomiaru LCP:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Largest Contentful Paint: ${entry.startTime}ms`);
 console.log(`LCP Element: ${entry.element}`);
 console.log(`LCP URL: ${entry.url}`);
 });
});

observer.observe({ entryTypes: ["largest-contentful-paint"] });

            

              
                Copy
              
            
          

Ten kod tworzy PerformanceObserver, który nasłuchuje na wpisy largest-contentful-paint i loguje czas rozpoczęcia, element i adres URL do konsoli. Analizując te dane, można zidentyfikować największy element treści i zoptymalizować jego czas ładowania poprzez optymalizację rozmiaru obrazu, użycie CDN lub wstępne załadowanie zasobu.

Perspektywa globalna: Weź pod uwagę, że różni użytkownicy będą mieli różne elementy LCP w zależności od rozmiaru i rozdzielczości ekranu. Projektuj swoją aplikację tak, aby zapewnić dobry wynik LCP na różnych urządzeniach i rozmiarach ekranu.

7. Mierzenie First Input Delay (FID)

Typ wpisu first-input-delay mierzy czas potrzebny przeglądarce na odpowiedź na pierwszą interakcję użytkownika (np. kliknięcie lub dotknięcie). FID to kolejny podstawowy wskaźnik internetowy, który odzwierciedla interaktywność strony. Dobry wynik FID to 100 milisekund lub mniej. Można użyć następującego kodu do pomiaru FID:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`First Input Delay: ${entry.processingStart - entry.startTime}ms`);
 console.log(`Event Type: ${entry.name}`);
 console.log(`Target Element: ${entry.target}`);
 });
});

observer.observe({ type: "first-input", buffered: true });

            

              
                Copy
              
            
          

Ten kod tworzy PerformanceObserver, który nasłuchuje na wpisy first-input i loguje opóźnienie, typ zdarzenia i element docelowy do konsoli. Analizując te dane, można zidentyfikować przyczyny długich opóźnień wejściowych i zoptymalizować swój kod JavaScript, aby skrócić czas spędzany w głównym wątku.

Praktyczna wskazówka: Dziel długo działające zadania na mniejsze części, używaj web workerów do przenoszenia zadań do wątku w tle i optymalizuj swoje nasłuchiwacze zdarzeń, aby skrócić czas przetwarzania interakcji użytkownika.

Zaawansowane techniki i uwagi

Oprócz podstawowych zastosowań opisanych powyżej, Performance Observer API może być używane w bardziej zaawansowanych scenariuszach w celu uzyskania głębszych wglądów w wydajność aplikacji internetowej. Oto kilka zaawansowanych technik i uwag:

1. Używanie buforowania

Opcja buffered w metodzie observe() pozwala na pobieranie historycznych wpisów wydajności, które zostały zarejestrowane przed utworzeniem PerformanceObserver. Jest to przydatne do przechwytywania danych o wydajności, które występują podczas początkowego ładowania strony lub przed załadowaniem kodu monitorującego. Na przykład:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Entry: ${entry.name}, Type: ${entry.entryType}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["navigation", "resource"], buffered: true });

            

              
                Copy
              
            
          

Ten kod tworzy PerformanceObserver, który nasłuchuje na wpisy navigation i resource i pobiera wszystkie historyczne wpisy, które zostały zarejestrowane przed utworzeniem obserwatora.

2. Filtrowanie wpisów wydajności

Można filtrować wpisy wydajności na podstawie określonych kryteriów, aby skupić się na danych, które są najbardziej istotne dla analizy. Na przykład, można filtrować wpisy zasobów na podstawie ich adresu URL lub typu zawartości:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 if (entry.entryType === "resource" && entry.name.endsWith(".jpg")) {
 console.log(`Image Resource: ${entry.name}, Duration: ${entry.duration}ms`);
 }
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

Ten kod tworzy PerformanceObserver, który nasłuchuje na wpisy resource i filtruje je, aby uwzględnić tylko wpisy dla zasobów graficznych z rozszerzeniem .jpg.

3. Używanie Web Workerów

Aby uniknąć wpływu na wydajność głównego wątku, można przenieść monitorowanie i analizę wydajności do web workera. Pozwala to na zbieranie i przetwarzanie danych o wydajności w tle bez blokowania interfejsu użytkownika. Na przykład, można utworzyć web workera, który nasłuchuje na zdarzenia wydajności i wysyła dane do głównego wątku w celu analizy.

Globalna wytyczna dotycząca pisania: Używaj przykładów, które są istotne dla globalnej publiczności. Unikaj przykładów, które są specyficzne dla danego kraju lub kultury.

4. Integracja z platformami analitycznymi

Performance Observer API można zintegrować z platformami analitycznymi w celu zbierania i analizowania danych o wydajności w scentralizowanej lokalizacji. Pozwala to na śledzenie trendów wydajności w czasie, identyfikowanie regresji wydajności i korelowanie metryk wydajności z innymi danymi o zachowaniu użytkowników. Można wysyłać wpisy wydajności do swojej platformy analitycznej za pomocą jej API lub logując je do punktu końcowego po stronie serwera.

5. Używanie polyfilli dla starszych przeglądarek

Chociaż Performance Observer API jest obsługiwane przez większość nowoczesnych przeglądarek, może nie być dostępne w starszych wersjach. Aby wspierać starsze przeglądarki, można użyć polyfilla, który zapewnia zastępczą implementację API. W internecie dostępnych jest kilka polyfilli, których można użyć w swojej aplikacji.

Najlepsze praktyki korzystania z Performance Observer API

Aby skutecznie wykorzystać Performance Observer API i uniknąć typowych pułapek, postępuj zgodnie z tymi najlepszymi praktykami:

• Monitoruj tylko te metryki, które są istotne dla Twoich celów. Unikaj zbierania nadmiernych danych, które mogą wpłynąć na wydajność.
• Używaj filtrowania, aby skupić się na najważniejszych danych. Filtruj wpisy wydajności na podstawie określonych kryteriów, aby zmniejszyć ilość danych do przetworzenia.
• Przenieś monitorowanie wydajności do web workera. Zapobiegnie to wpływowi monitorowania wydajności na wydajność głównego wątku.
• Integruj z platformami analitycznymi, aby śledzić trendy wydajności w czasie. Pozwoli to na identyfikację regresji wydajności i korelowanie metryk wydajności z innymi danymi o zachowaniu użytkowników.
• Używaj polyfilli do obsługi starszych przeglądarek. Zapewni to, że Twój kod monitorujący wydajność będzie działał w szerokim zakresie przeglądarek.
• Dokładnie testuj swój kod monitorujący wydajność. Upewnij się, że Twój kod nie wprowadza żadnych własnych problemów z wydajnością.
• Bądź świadomy przepisów dotyczących prywatności danych. Upewnij się, że nie zbierasz żadnych danych osobowych (PII) bez zgody użytkownika.

Optymalizacja SEO: Stwórz angażujący meta opis. Zwięzły opis podsumowujący treść wpisu na blogu znajduje się w metadanych JSON.

Podsumowanie

Performance Observer API to potężne narzędzie, które umożliwia deweloperom monitorowanie i analizowanie metryk wydajności w czasie rzeczywistym, identyfikowanie wąskich gardeł i optymalizowanie ich aplikacji internetowych w celu zapewnienia płynniejszego, szybszego i przyjemniejszego doświadczenia użytkownika. Rozumiejąc kluczowe pojęcia i funkcje API oraz stosując najlepsze praktyki jego użycia, można uzyskać cenne informacje na temat wydajności swoich aplikacji i zapewnić lepsze doświadczenie użytkownikom, niezależnie od ich lokalizacji czy urządzenia. W miarę jak aplikacje internetowe stają się coraz bardziej złożone, Performance Observer API będzie nadal niezbędnym narzędziem do zapewnienia optymalnej wydajności i satysfakcji użytkowników.

Pamiętaj, aby priorytetowo traktować doświadczenie użytkownika ponad wszystko. Optymalizacja wydajności powinna być zawsze napędzana celem zapewnienia płynnego i przyjemnego doświadczenia dla użytkowników. Efektywnie wykorzystując Performance Observer API, możesz uzyskać głębsze zrozumienie wydajności swojej aplikacji i podejmować świadome decyzje w celu poprawy doświadczenia użytkownika.

Poprzez staranne rozważenie globalnych implikacji wydajności, programiści mogą tworzyć aplikacje internetowe, które są szybkie, responsywne i dostępne dla użytkowników na całym świecie. Wymaga to holistycznego podejścia, które uwzględnia czynniki takie jak opóźnienia sieciowe, możliwości urządzeń i preferencje kulturowe.