Oś czasu wydajności: Kompleksowy przewodnik po zbieraniu metryk

W dzisiejszym dynamicznym świecie cyfrowym wydajność strony internetowej jest najważniejsza. Użytkownicy oczekują, że strony będą ładować się szybko i reagować natychmiast. Powolna strona może prowadzić do frustracji, porzuconych sesji i ostatecznie do utraty przychodów. Na szczęście nowoczesne przeglądarki internetowe dostarczają potężnych narzędzi do mierzenia i analizowania wydajności stron. Jednym z najcenniejszych z tych narzędzi jest Performance Timeline API.

Ten kompleksowy przewodnik szczegółowo omówi Performance Timeline API, obejmując wszystko od jego podstawowych koncepcji po zaawansowane techniki zbierania i analizowania metryk wydajności. Zagłębimy się w różne typy wpisów wydajnościowych, pokażemy, jak efektywnie korzystać z API, i przedstawimy praktyczne przykłady, które pomogą Ci zoptymalizować wydajność Twojej strony internetowej.

Czym jest Performance Timeline API?

Performance Timeline API to zbiór interfejsów JavaScript, które zapewniają dostęp do danych związanych z wydajnością, zbieranych przez przeglądarkę. Umożliwia programistom mierzenie różnych aspektów wydajności strony, takich jak:

• Czas ładowania strony
• Czas ładowania zasobów (obrazy, skrypty, arkusze stylów)
• Pomiary czasu użytkownika (User timing)
• Liczba klatek na sekundę i wydajność renderowania
• Zużycie pamięci

Zbierając i analizując te dane, programiści mogą identyfikować wąskie gardła wydajności i wdrażać optymalizacje w celu poprawy doświadczenia użytkownika. API zapewnia ustandaryzowany sposób dostępu do danych o wydajności, ułatwiając tworzenie narzędzi do monitorowania wydajności działających w różnych przeglądarkach.

Kluczowe koncepcje i interfejsy

Performance Timeline API opiera się na kilku kluczowych koncepcjach i interfejsach:

• Oś czasu wydajności (Performance Timeline): Reprezentuje oś czasu zdarzeń wydajnościowych, które wystąpiły w cyklu życia strony internetowej. Jest to centralny punkt dostępu do danych o wydajności.
• Wpis wydajności (Performance Entry): Reprezentuje pojedyncze zdarzenie wydajnościowe, takie jak zdarzenie ładowania zasobu lub pomiar czasu zdefiniowany przez użytkownika.
• Obserwator wydajności (Performance Observer): Umożliwia programistom monitorowanie osi czasu wydajności pod kątem nowych wpisów i reagowanie na nie w czasie rzeczywistym.
• Obiekt `performance`: Globalny obiekt (`window.performance`), który zapewnia dostęp do osi czasu wydajności i powiązanych metod.

Obiekt `performance`

Obiekt `performance` jest punktem wyjścia do interakcji z Performance Timeline API. Dostarcza metod do pobierania wpisów wydajności, czyszczenia osi czasu i tworzenia obserwatorów wydajności. Niektóre z najczęściej używanych metod to:

• `performance.getEntries()`: Zwraca tablicę wszystkich wpisów wydajności na osi czasu.
• `performance.getEntriesByName(name, entryType)`: Zwraca tablicę wpisów wydajności o określonej nazwie i typie.
• `performance.getEntriesByType(entryType)`: Zwraca tablicę wpisów wydajności o określonym typie.
• `performance.clearMarks(markName)`: Czyści znaczniki wydajności (marks) o określonej nazwie.
• `performance.clearMeasures(measureName)`: Czyści pomiary wydajności (measures) o określonej nazwie.
• `performance.now()`: Zwraca znacznik czasu o wysokiej rozdzielczości, zazwyczaj w milisekundach, reprezentujący czas, jaki upłynął od początku nawigacji. Jest to kluczowe do mierzenia czasów trwania.

Typy wpisów wydajności (Performance Entry)

Performance Timeline API definiuje kilka różnych typów wpisów wydajności, z których każdy reprezentuje określony rodzaj zdarzenia wydajnościowego. Niektóre z najważniejszych typów wpisów to:

• `navigation`: Reprezentuje czasy nawigacji dla ładowania strony, w tym wyszukiwanie DNS, połączenie TCP, czas żądania i odpowiedzi.
• `resource`: Reprezentuje ładowanie określonego zasobu, takiego jak obraz, skrypt lub arkusz stylów.
• `mark`: Reprezentuje znacznik czasu zdefiniowany przez użytkownika na osi czasu.
• `measure`: Reprezentuje czas trwania zdefiniowany przez użytkownika na osi czasu, obliczony między dwoma znacznikami.
• `paint`: Reprezentuje czas potrzebny przeglądarce na wyrenderowanie pierwszej treści na ekranie (First Paint) i pierwszej znaczącej treści (First Contentful Paint).
• `longtask`: Reprezentuje zadania, które blokują główny wątek na dłuższy czas (zazwyczaj dłużej niż 50 ms), potencjalnie powodując zacinanie się interfejsu użytkownika.
• `event`: Reprezentuje zdarzenie przeglądarki, takie jak kliknięcie myszą lub naciśnięcie klawisza.
• `layout-shift`: Reprezentuje nieoczekiwane przesunięcia układu strony, które mogą zakłócać doświadczenie użytkownika (Cumulative Layout Shift).
• `largest-contentful-paint`: Reprezentuje czas potrzebny na pojawienie się największego elementu treści w widocznym obszarze (viewport).

Zbieranie metryk wydajności

Istnieje kilka sposobów zbierania metryk wydajności za pomocą Performance Timeline API. Najczęstsze podejścia to:

• Pobieranie wpisów bezpośrednio z osi czasu: Używanie `performance.getEntries()`, `performance.getEntriesByName()` lub `performance.getEntriesByType()` do pobierania określonych wpisów wydajności.
• Używanie Obserwatora Wydajności (Performance Observer): Monitorowanie osi czasu pod kątem nowych wpisów i reagowanie na nie w czasie rzeczywistym.

Bezpośrednie pobieranie wpisów

Najprostszym sposobem zbierania metryk wydajności jest pobieranie wpisów bezpośrednio z osi czasu. Jest to przydatne do zbierania danych po wystąpieniu określonego zdarzenia, na przykład po załadowaniu strony lub po interakcji użytkownika z określonym elementem.

Oto przykład, jak pobrać wszystkie wpisy zasobów z osi czasu:

            
const resourceEntries = performance.getEntriesByType("resource");

resourceEntries.forEach(entry => {
 console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
});

            

              
                Copy
              
            
          

Ten kod pobiera wszystkie wpisy typu "resource" i loguje nazwę oraz czas trwania każdego zasobu w konsoli.

Używanie Obserwatora Wydajności (Performance Observer)

Performance Observer pozwala monitorować oś czasu wydajności pod kątem nowych wpisów i reagować na nie w czasie rzeczywistym. Jest to szczególnie przydatne do zbierania danych, gdy stają się dostępne, bez konieczności wielokrotnego odpytywania osi czasu.

Oto przykład użycia Performance Observer do monitorowania nowych wpisów zasobów:

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

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

            

              
                Copy
              
            
          

Ten kod tworzy Performance Observer, który nasłuchuje na nowe wpisy typu "resource". Gdy nowy wpis zasobu zostanie dodany do osi czasu, funkcja zwrotna obserwatora jest wykonywana, logując nazwę i czas trwania zasobu w konsoli. Metoda `observer.observe()` określa, które typy wpisów obserwator powinien monitorować.

Pomiar czasu użytkownika (User Timing)

Performance Timeline API pozwala również definiować własne, niestandardowe metryki wydajności za pomocą typów wpisów `mark` i `measure`. Jest to przydatne do mierzenia czasu potrzebnego na wykonanie określonych części aplikacji, takich jak renderowanie komponentu czy przetwarzanie danych wejściowych od użytkownika.

Aby zmierzyć czas użytkownika, najpierw tworzysz `mark`, aby oznaczyć początek i koniec sekcji, którą chcesz zmierzyć. Następnie tworzysz `measure`, aby obliczyć czas trwania między dwoma znacznikami.

Oto przykład, jak zmierzyć czas potrzebny na wyrenderowanie komponentu:

            
performance.mark("component-render-start");

// Code to render the component

performance.mark("component-render-end");

performance.measure("component-render-time", "component-render-start", "component-render-end");

const measure = performance.getEntriesByName("component-render-time", "measure")[0];

console.log(`Component render time: ${measure.duration}ms`);

            

              
                Copy
              
            
          

Ten kod tworzy dwa znaczniki, `component-render-start` i `component-render-end`, przed i po kodzie renderującym komponent. Następnie tworzy pomiar o nazwie `component-render-time`, aby obliczyć czas trwania między dwoma znacznikami. Na koniec pobiera wpis pomiaru z osi czasu i loguje jego czas trwania w konsoli.

Analiza metryk wydajności

Gdy już zbierzesz metryki wydajności, musisz je przeanalizować, aby zidentyfikować wąskie gardła wydajności i wdrożyć optymalizacje. Możesz w tym celu użyć kilku narzędzi i technik:

• Narzędzia deweloperskie przeglądarki: Większość nowoczesnych przeglądarek internetowych oferuje wbudowane narzędzia deweloperskie, które pozwalają wizualizować i analizować dane o wydajności. Narzędzia te zazwyczaj zawierają panel wydajności (Performance), który pokazuje oś czasu zdarzeń wydajnościowych, a także narzędzia do profilowania kodu JavaScript i analizy zużycia pamięci.
• Narzędzia do monitorowania wydajności: Istnieje wiele narzędzi firm trzecich do monitorowania wydajności, które mogą pomóc w zbieraniu, analizowaniu i wizualizacji danych o wydajności. Narzędzia te często oferują zaawansowane funkcje, takie jak monitorowanie w czasie rzeczywistym, wykrywanie anomalii i automatyczne raportowanie. Przykłady to New Relic, Datadog i Sentry.
• Web Vitals: Inicjatywa Web Vitals firmy Google dostarcza zestaw metryk uważanych za kluczowe do mierzenia doświadczenia użytkownika. Metryki te obejmują Largest Contentful Paint (LCP), First Input Delay (FID) i Cumulative Layout Shift (CLS). Monitorowanie tych metryk może pomóc w identyfikacji i rozwiązaniu powszechnych problemów z wydajnością.

Korzystanie z narzędzi deweloperskich przeglądarki

Narzędzia deweloperskie przeglądarki to potężne i łatwo dostępne zasoby do analizy wydajności. Oto jak możesz użyć panelu Wydajność (Performance) w Chrome Developer Tools (inne przeglądarki mają podobne funkcje):

1. Otwórz narzędzia deweloperskie: Kliknij prawym przyciskiem myszy na stronie i wybierz "Zbadaj" lub naciśnij F12.
2. Przejdź do panelu Wydajność: Kliknij na zakładkę "Performance".
3. Rozpocznij nagrywanie: Kliknij przycisk nagrywania (zazwyczaj kółko), aby rozpocząć przechwytywanie danych o wydajności.
4. Wejdź w interakcję ze stroną: Wykonaj działania, które chcesz przeanalizować, takie jak załadowanie strony, klikanie przycisków czy przewijanie.
5. Zatrzymaj nagrywanie: Kliknij przycisk stop, aby zakończyć nagrywanie.
6. Analizuj oś czasu: Panel Wydajność wyświetli oś czasu zdarzeń wydajnościowych, w tym czasy ładowania, wykonywanie JavaScriptu, renderowanie i malowanie.

Oś czasu dostarcza szczegółowych informacji o każdym zdarzeniu, w tym o jego czasie trwania, czasie rozpoczęcia i związku z innymi zdarzeniami. Możesz przybliżać i oddalać, filtrować zdarzenia według typu i sprawdzać poszczególne zdarzenia, aby uzyskać więcej informacji. Zakładki "Bottom-Up", "Call Tree" i "Event Log" dostarczają różnych perspektyw na dane, pozwalając zidentyfikować wąskie gardła wydajności i zoptymalizować kod.

Web Vitals: Mierzenie doświadczenia użytkownika

Web Vitals to zestaw metryk zdefiniowanych przez Google w celu mierzenia doświadczenia użytkownika na stronie internetowej. Skupienie się na tych metrykach może znacznie poprawić satysfakcję użytkowników i pozycję w rankingu SEO.

• Largest Contentful Paint (LCP): Mierzy czas potrzebny na pojawienie się największego elementu treści w widocznym obszarze. Dobry wynik LCP to 2,5 sekundy lub mniej.
• First Input Delay (FID): Mierzy czas potrzebny przeglądarce na odpowiedź na pierwszą interakcję użytkownika (np. kliknięcie przycisku lub linku). Dobry wynik FID to 100 milisekund lub mniej.
• Cumulative Layout Shift (CLS): Mierzy ilość nieoczekiwanych przesunięć układu, które występują na stronie. Dobry wynik CLS to 0,1 lub mniej.

Możesz mierzyć Web Vitals za pomocą różnych narzędzi, w tym:

• Chrome User Experience Report (CrUX): Dostarcza rzeczywistych danych o wydajności stron internetowych na podstawie zanonimizowanych danych użytkowników Chrome.
• Lighthouse: Zautomatyzowane narzędzie, które audytuje wydajność, dostępność i SEO stron internetowych.
• Web Vitals Extension: Rozszerzenie do Chrome, które wyświetla metryki Web Vitals w czasie rzeczywistym podczas przeglądania internetu.
• PerformanceObserver API: Bezpośrednie przechwytywanie danych Web Vitals z przeglądarki w miarę występowania zdarzeń.

Praktyczne przykłady i przypadki użycia

Oto kilka praktycznych przykładów i przypadków użycia, jak można wykorzystać Performance Timeline API do optymalizacji wydajności strony internetowej:

• Identyfikacja wolno ładujących się zasobów: Użyj typu wpisu `resource`, aby zidentyfikować obrazy, skrypty i arkusze stylów, które ładują się długo. Zoptymalizuj te zasoby, kompresując je, używając sieci dostarczania treści (CDN) lub stosując leniwe ładowanie (lazy-loading). Na przykład wiele platform e-commerce, takich jak Shopify, Magento czy WooCommerce, polega na obrazach do sprzedaży produktów. Optymalizacja ładowania obrazów przy użyciu danych z osi czasu wydajności poprawi doświadczenie klienta, zwłaszcza dla użytkowników mobilnych.
• Mierzenie czasu wykonania JavaScript: Użyj typów wpisów `mark` i `measure`, aby zmierzyć czas potrzebny na wykonanie określonych funkcji JavaScript. Zidentyfikuj wolno działające funkcje i zoptymalizuj je, używając wydajniejszych algorytmów, buforując wyniki lub odraczając wykonanie na później.
• Wykrywanie długich zadań (Long Tasks): Użyj typu wpisu `longtask`, aby zidentyfikować zadania, które blokują główny wątek na dłuższy czas. Podziel te zadania na mniejsze części lub przenieś je do wątku w tle, aby zapobiec zacinaniu się interfejsu użytkownika.
• Monitorowanie First Contentful Paint (FCP) i Largest Contentful Paint (LCP): Użyj typów wpisów `paint` i `largest-contentful-paint`, aby monitorować czas potrzebny na pojawienie się pierwszej treści i największej treści na ekranie. Zoptymalizuj krytyczną ścieżkę renderowania, aby poprawić te metryki.
• Analiza Cumulative Layout Shift (CLS): Użyj typu wpisu `layout-shift`, aby zidentyfikować elementy, które powodują nieoczekiwane przesunięcia układu. Zarezerwuj miejsce dla tych elementów lub użyj właściwości `transform` do ich animacji bez powodowania przesunięć układu.

Zaawansowane techniki

Gdy już dobrze zrozumiesz podstawy Performance Timeline API, możesz zbadać niektóre zaawansowane techniki, aby jeszcze bardziej zoptymalizować wydajność swojej strony internetowej:

• Monitorowanie rzeczywistych użytkowników (RUM): Zbieraj dane o wydajności od prawdziwych użytkowników w terenie, aby uzyskać dokładniejszy obraz wydajności swojej strony. Użyj narzędzia RUM lub zaimplementuj własne niestandardowe rozwiązanie RUM za pomocą Performance Timeline API. Dane te mogą być następnie wykorzystane do określenia regionalnych różnic w wydajności. Na przykład strona hostowana w USA może doświadczać wolniejszych czasów ładowania w Azji z powodu opóźnień sieciowych.
• Monitorowanie syntetyczne: Użyj monitorowania syntetycznego do symulowania interakcji użytkowników i mierzenia wydajności w kontrolowanym środowisku. Może to pomóc w identyfikacji problemów z wydajnością, zanim dotkną one prawdziwych użytkowników.
• Zautomatyzowane testowanie wydajności: Zintegruj testowanie wydajności ze swoim potokiem ciągłej integracji/ciągłego wdrażania (CI/CD), aby automatycznie wykrywać regresje wydajności. Narzędzia takie jak Lighthouse CI mogą być używane do automatyzacji tego procesu.
• Budżety wydajności: Ustaw budżety wydajności dla kluczowych metryk, takich jak czas ładowania strony, rozmiar zasobów i czas wykonania JavaScript. Użyj zautomatyzowanych narzędzi do monitorowania tych budżetów i powiadamiania, gdy zostaną przekroczone.

Zgodność z różnymi przeglądarkami

Performance Timeline API jest szeroko obsługiwane przez nowoczesne przeglądarki internetowe, w tym Chrome, Firefox, Safari i Edge. Jednak mogą istnieć pewne różnice w implementacji i zachowaniu API w różnych przeglądarkach.

Aby zapewnić zgodność z różnymi przeglądarkami, ważne jest testowanie kodu w różnych przeglądarkach i stosowanie wykrywania funkcji (feature detection) w celu łagodnego degradowania funkcjonalności, jeśli API nie jest obsługiwane. Biblioteki takie jak `modernizr` mogą pomóc w wykrywaniu funkcji.

Dobre praktyki

Oto kilka dobrych praktyk dotyczących korzystania z Performance Timeline API:

• Używaj Obserwatorów Wydajności do monitorowania w czasie rzeczywistym: Performance Observers zapewniają bardziej wydajny sposób zbierania danych o wydajności niż wielokrotne odpytywanie osi czasu.
• Bądź świadomy wpływu zbierania danych o wydajności na samą wydajność: Zbieranie zbyt dużej ilości danych może negatywnie wpłynąć na wydajność Twojej strony. Zbieraj tylko te dane, których potrzebujesz, i unikaj wykonywania kosztownych operacji w funkcji zwrotnej Performance Observer.
• Używaj znaczących nazw dla znaczników i pomiarów: Ułatwi to analizę danych i identyfikację wąskich gardeł wydajności.
• Testuj swój kod w różnych przeglądarkach: Zapewnij zgodność z różnymi przeglądarkami, testując kod i stosując wykrywanie funkcji.
• Łącz z innymi technikami optymalizacji: Performance Timeline API pomaga mierzyć i identyfikować problemy. Używaj go w połączeniu z uznanymi dobrymi praktykami optymalizacji sieciowej (optymalizacja obrazów, minifikacja, użycie CDN) w celu uzyskania całościowej poprawy wydajności.

Podsumowanie

Performance Timeline API to potężne narzędzie do mierzenia i analizowania wydajności strony internetowej. Rozumiejąc kluczowe koncepcje i interfejsy API, możesz zbierać cenne metryki wydajności i używać ich do identyfikacji wąskich gardeł oraz wdrażania optymalizacji. Skupiając się na Web Vitals i wdrażając zaawansowane techniki, takie jak RUM i zautomatyzowane testowanie wydajności, możesz zapewnić szybsze, płynniejsze i przyjemniejsze doświadczenie użytkownika. Przyjęcie Performance Timeline API i zintegrowanie analizy wydajności z procesem deweloperskim doprowadzi do znacznej poprawy wydajności Twojej strony i satysfakcji użytkowników w dzisiejszym, zorientowanym na wydajność, środowisku internetowym.