Wyścig z czasem: Jak przetestować wydajność frontendu aplikacji

Mówiąc o wydajności aplikacji webowej zawsze skupiamy się na backendzie i żądaniach HTTP. Czas który mierzą nam standardowe narzędzia do testów wydajności np. JMeter jest wynikiem czasów odpowiedzi serwera, pobrania danych z bazy itp. Nie jest to jednak jedyny element mający wpływa na wydajność, czyli czas oczekiwania użytkownika na prezentację wyników. Na rzeczywisty czas odpowiedzi składa się nie tylko czas potrzebny na odebranie odpowiedzi ale też czas jej prezentacji, czyli parsowania i renderowania html oraz wykonania kodu JavaScript po stronie przeglądarki. Przy rozbudowanych (ciężkich) stronach warstwa prezentacji również może mieć znaczący wpływ na odczucie wydajności. Moim zdaniem warto poruszyć ten temat i przybliżyć uczestnikom w jaki sposób można połączyć testy wydajności aplikacji np. żądania GET/POST w JMeter z testami wydajności frontendu. Poniżej proponowany abstract: Najbardziej popularnymi testami wydajności aplikacji webowych są testy weryfikujące czasy odpowiedzi na żądania HTTP, czyli testy po stronie backendu (tak działa np. JMeter operujący na żądaniach HTTP get/post i innych) , natomiast rzadko kto zwraca uwagę na to, co dzieje się na warstwie wizualnej, czyli po stronie frontendu i przeglądarki. Na rzeczywisty czas odpowiedzi składa się nie tylko czas potrzebny na odebranie odpowiedzi ale też czas jej prezentacji, czyli parsowania i renderowania html oraz wykonania kodu JavaScript po stronie przeglądarki. Podczas wystąpienia opowiem jak zweryfikować, czy poprzez proste zmiany konfiguracyjne oraz w strukturze HTML można znacząco poprawić szybkość prezentowania danych użytkownikowi, bez konieczności wzmacniania środowiska o dodatkowe zasoby sprzętowe, czy zmiany w kodzie. Przedstawię narzędzia do testowania wydajności frontendu, takie jak WebPageTest, DevTools i Lighthouse, które pomogą zidentyfikować problemy z wydajnością aplikacji. Omówię, jakie parametry te narzędzia sprawdzają, aby pomóc zrozumieć, co powoduje spowolnienie aplikacji. Przedstawię również najlepsze praktyki testowania wydajności frontendu, takie jak testowanie czasu ładowania strony, interaktywności, wydajności animacji i reakcji na działania użytkownika. Podzielę się przykładami, pokazując, jak można poprawić wydajność aplikacji poprzez optymalizację frontendu. Jeśli chcesz przyspieszyć aplikację internetową i zapewnić lepsze doświadczenia (UX) użytkownikom, ta prezentacja jest dla Ciebie. Dołącz do mnie i dowiedz się, jak przetestować wydajność frontendu i osiągnąć lepsze wyniki w wyścigu z czasem.