Mierzenie wydajności aplikacji www - okładka

Mierzenie wydajności aplikacji WWW

Jedną z kluczowych kwestii o jakie należy zadbać podczas tworzenia strony internetowej lub aplikacji WWW jest wydajność. Przede wszystkim, programista zwykle nie tworzy takiej aplikacji tylko i wyłącznie dla siebie, ale dla innych użytkowników. Z tego też powodu uważam, że szczególną uwagę należy poświęcić aspektowi komfortu odbiorcy. Jednym z aspektów, na jakie powinno się zwrócić uwagę jest wydajność, którą zajmiemy się w tym wpisie, ale nie należy zapominać też o takich kwestiach jak chociażby interfejs użytkownika (UI), dostępność, intuicyjność, czy też ogólne wrażenia i odczucia użytkownika podczas korzystania z produktu.

Przy temacie wydajności zwykle przytaczane są badania, które pokazują, że przy każdej kolejnej sekundzie oczekiwania na załadowanie się strony, odsetek użytkowników zainteresowanych treścią spada. Także nawet jeśli jest nam całkowicie obojętny komfort odbiorców, to należy pomyśleć o tym, że im większy odsetek użytkowników opuści stronę tym mniejszy jest nasz zysk.

W tym artykule skupimy się zarówno na mierzeniu wydajności poszczególnych skryptów jak całej aplikacji. Czas start 🙂

Zegarek kieszonkowy

Mierzenie wydajności skryptów w JavaScript

Pierwszym sposobem który mógłby nam przyjść do głowy byłoby użycie obiektu Date(). Oczywiście możemy to zrobić, na przykład w taki sposób:


function heavyLoop() {
  let sum = 0;
  for( let i = 0; i <= 100000; i++ ) {
    sum += 1;
  }
}

const timestamp = new Date().getMilliseconds();

heavyLoop();

console.log( new Date().getMilliseconds() - timestamp );

Wykonując powyższy kod otrzymamy interesujący nas wynik natomiast mam pewne wątpliwości co do powyższego rozwiązania. Przede wszystkim obiekt Date() nie został stworzony do tego celu. To trochę jak z odkręcaniem śrubki za pomocą noża… teoretycznie da się i w 99 na 100 przypadków nam się to uda, ale zawsze pozostaje ten jeden przypadek, dlatego lepiej użyć śrubokrętu 🙂

Kolejną sprawą jest to, że obiekt Date() jest zależny od czasu systemowego, co sprawia, że taki pomiar może być obarczony pewnym błędem. Znalazłem odnośnie tego bardzo ciekawy wątek na Stack Overflow i jeśli zainteresował Cię ten temat to zachęcam do zapoznania się z tym tematem głębiej – link znajdziesz w źródłach i materiałach dodatkowych (pierwszy link).

Drugim ze sposobów na zmierzenie czasu potrzebnego na wykonanie się fragmentu kodu jest skorzystanie z console.time(). Zobaczmy jak będzie wyglądał nasz kod gdy pozbędziemy się obiektu Date():


function heavyLoop() {
  let sum = 0;
  for( let i = 0; i <= 100000; i++ ) {
    sum += 1;
  }
}

console.time( 'loop' )

heavyLoop();

console.timeEnd( 'loop' );

W tym rozwiązaniu do console.time() podajemy nazwę naszego timestampa, zaś po wykonaniu fragmentu kodu za pomocą console.timeEnd() odwołujemy się do wcześniej stworzonego timestampa i odczytujemy czas. W konsoli powinien ukazać nam się ładnie sformatowany wynik. Problemem tego rozwiązania z kolei jest to, że wyświetla ono jedynie rezultat w konsoli.

Trzecim sposobem, na zmierzenie efektywności naszego skryptu jest skorzystanie z Performance API. Spójrzmy po raz trzeci na nasz kod, który tym razem został zmierzony za pomocą performance.now():


function heavyLoop() {
  let sum = 0;
  for( let i = 0; i <= 100000; i++ ) {
    sum += 1;
  }
}

const timestamp = performance.now()

heavyLoop();

console.log( performance.now() - timestamp );

Po uruchomieniu powyższego kodu zobaczysz w konsoli wyniki w stylu 44.735000003129244. Co ważne, liczba przed kropką to liczba milisekund, co oznacza że wynik otrzymany w ten sposób będzie niesamowicie dokładny. Wszystko to za sprawą High Resolution Time, z którego korzysta Performance API. performance.now() zamiast zwykłego timestampa zwraca DOMHighResTimeStamp.

Zegar pośród liści

Mierzenie wydajności aplikacji

Przebrnęliśmy już przez mierzenie wydajności pojedynczych skryptów. Takie mierzenie wydajności jakie przedstawiłem wcześniej może się przydać w przypadku gdy zastanawiamy się nad implementacją dwóch rozwiązań, przy prototypowaniu czy też przy szukaniu nadmiernie obciążających fragmentów kodu.

Znacznie bardziej istotna dla użytkownika aplikacji jest jej ogólna wydajność. Odbiorcy nie obchodzi czy twoja aplikacja ma optymalizację rzędu 50 czy 100 milisekund. Dla niego istotne jest, czy aplikacja ładuje się szybko  i czy może z niej korzystać komfortowo. Dlatego też należy sprawdzić wydajność całej aplikacji. Do tego celu mamy do dyspozycji kilka ciekawych rozwiązań.

Przede wszystkim zachęcam do wykorzystania narzędzi jakie oferuje nam przeglądarka Google Chrome. Mając uruchomioną przeglądarkę należy uruchomić konsolę developerską (Ctrl/Cmd + Shift + I), a następnie przejść do zakładki Performance. Aby uzyskać szczegółowe informacje należy kliknąć ikonkę powracającej strzałki w konsoli. Powinno nam się pokazać bardzo szczegółowe zestawienie pokazujące nam ile czasu zajmuje każdy etap ładowania aplikacji. Mamy tam dostęp do takich informacji jak czas potrzebny na wykonanie praktycznie każdej akcji na ładowanej stronie:

Mierzenie wydajności -DevTools - performance

Kolejna z zakładek jakimi warto się zainteresować w narzędziach developerskich jest zakładka Audits. Tak przeprowadzony audyt nie tylko zmierzy wydajność naszej strony, ale zbada ją również pod kątem dostępności, dobrych praktyk, SEO oraz przystosowania pod Progressive Web Apps. Za pomocą tego narzędzia możemy wybrać dla jakiego typu urządzeń ma zostać przeprowadzony audyt, jakie aspekty mają zostać mu poddane oraz jaka jest jakość naszego łącza (możemy zasymulować słabe łącze). Zaznaczając throttling otrzymany wynik będzie znacznie się różnił, natomiast warto wykonać taki test, aby wiedzieć jak będzie zachowywać się testowana aplikacja, gdy jakość naszego łącza jest kiepska. Tych możliwości nie oferuje PageSpeed Insights, które mam wrażenie, że z roku na rok jest coraz bardziej restrykcyjne. Polecam wykonać testy zarówno audytem (z throttlingiem i bez) jak i za pomocą PageSpeed Insights – rezultaty mogą być bardzo ciekawe 🙂

Mierzenie wydajności - audyt
Audyt wykonany za pomocą DevTools

Oczywiście narzędzi do mierzenia wydajności stron znajdziesz w sieci mnóstwo. Natomiast w mojej codziennej pracy w zupełności wystarczają mi te, które zaproponowałem w tym wpisie.

Ostatnia kwestia, którą koniecznie należy poruszyć przy okazji takiego wpisu jest liczba wykonanych testów. Aby pomiary były wiarygodne należy wykonać dużą ilość pomiarów – im więcej tym lepiej. Po wykonaniu serii należy otrzymane wyniki jakoś uśrednić stosując chociażby najprostszą średnią arytmetyczną. Aby wynik był bardziej wiarygodny odrzuciłbym z materiału wyniki skrajne. Oczywiście nic nie stoi na przeszkodzie aby wykonać bardziej dokładną analizę statystyczną otrzymanego materiału, pytanie tylko brzmi czy jest to nam potrzebne a jeśli tak to do czego?

Mam nadzieję że wyciągniesz coś dla siebie z tego wpisu. Zachęcam również do pozostawienia oceny i komentarza oraz zapoznania się ze źródłami i materiałami dodatkowymi.

Źródła i materiały dodatkowe: