Używanie narzędzi do pomiaru skuteczności

Sam Dutton

Istnieje kilka podstawowych celów tworzenia wydajnej i odpornej witryny przy niskich kosztach danych.

W przypadku każdego celu musisz przeprowadzić audyt.

Cel	Why?	Co testować?
Zapewnij prywatność, bezpieczeństwo i integralność danych oraz umożliwij korzystanie z zaawansowanych interfejsów API.	Dlaczego HTTPS jest ważne	HTTPS wdrożony na wszystkich stronach/trasach i zasobach witryny.
Poprawa wydajności wczytywania	53% użytkowników opuszcza strony, które wczytują się dłużej niż 3 sekundy	kod JavaScript i CSS, który można wczytać asynchronicznie lub opóźnić. Ustaw cele dotyczące czasu interakcji i rozmiaru danych: na przykład TTI w sieci 3G. Ustaw budżet wydajności.
Zmniejsz rozmiar strony	• Obniż koszty danych dla użytkowników z ograniczonymi pakietami danych • Zmniejsz wymagania dotyczące miejsca na dane w aplikacji internetowej – szczególnie ważne w przypadku użytkowników urządzeń o niskiej specyfikacji • Zmniejsz koszty hostingu i dostarczania • Popraw wydajność, niezawodność i odporność doręczania	Ustaw budżet dotyczący rozmiaru strony: np. pierwsze wczytanie poniżej 400 kB. Sprawdź, czy nie ma zbyt dużo kodu JavaScript. Sprawdź rozmiary plików, aby znaleźć rozbudowane obrazy, multimedia, kod HTML, CSS i JavaScript. Znajdź obrazy, które można wczytać z opóźnieniem, i sprawdź, czy nie ma nieużywanego kodu za pomocą narzędzi do sprawdzania pokrycia.
Zmniejsz liczbę żądań dotyczących zasobów	• Zmniejszenie problemów z opóźnieniami • Zmniejszenie kosztów wyświetlania • Zwiększenie wydajności, niezawodności i odporności wyświetlania	Sprawdź, czy nie ma nadmiernych lub niepotrzebnych próśb o dowolny typ zasobu. Na przykład: pliki wczytywane wielokrotnie, JavaScript wczytywany w kilku wersjach, nigdy nie używany CSS czy obrazy, które nigdy nie są wyświetlane (lub mogą być wczytywane z opóźnieniem).
Optymalizowanie wykorzystania pamięci	Pamięć może stać się nowym wąskim gardłem, zwłaszcza na urządzeniach mobilnych.	W Menedżerze zadań Chrome możesz porównać zużycie pamięci swojej witryny z innymi witrynami podczas wczytywania strony głównej i korzystania z innych funkcji witryny.
Zmniejsz obciążenie procesora	Urządzenia mobilne mają ograniczone procesory, zwłaszcza te o niskich specyfikacjach.	Sprawdź, czy nie ma zbyt dużo kodu JavaScript. Znajdź nieużywany kod JavaScript i CSS za pomocą narzędzi do sprawdzania zasięgu. Sprawdź, czy rozmiar DOM nie jest zbyt duży, i czy skrypty nie są niepotrzebnie uruchamiane przy pierwszym wczytaniu. Poszukaj kodu JavaScript wczytanego w kilku wersjach lub bibliotek, których można uniknąć dzięki niewielkiemu przeprojektowaniu.

Do audytu witryn można używać wielu narzędzi i technik:

• Narzędzia systemowe
• Wbudowane narzędzia przeglądarki
• Rozszerzenia do przeglądarki
• Aplikacje testowe online
• Narzędzia do emulacji
• Analityka
• Dane dostarczane przez serwery i systemy biznesowe
• Nagrywanie ekranu i filmów
• Testy ręczne

Poniżej dowiesz się, które podejście jest odpowiednie w przypadku każdego typu audytu.

Uwaga: większość stron internetowych ma najwięcej i najwięcej żądań związanych z obrazami. Opóźnienia są coraz większe, ponieważ połączenia są coraz gorsze, więc nadmierne żądania plików obrazów stają się coraz większym problemem, ponieważ internet staje się coraz bardziej mobilny. Obrazy również zużywają energię: więcej żądań obrazów, więcej wykorzystania radia, szybsze wyczerpywanie się baterii. Nawet renderowanie obrazów wymaga mocy, która jest proporcjonalna do rozmiaru i liczby obrazów. Podobnie jest z pamięcią: niewielkie zwiększenie wymiarów w pikselach powoduje duże zwiększenie wykorzystania pamięci. W przypadku obrazów na urządzeniach mobilnych, zwłaszcza na urządzeniach o niskich specyfikacjach, pamięć może stać się nowym wąskim gardłem. Duże obrazy są też problematyczne dla użytkowników korzystających z planów z ograniczonym limitem danych. Usuń zbędne obrazy. Jeśli nie możesz ich usunąć, zoptymalizuj je: zwiększ kompresję do maksimum, zmniejsz wymiary pikseli i użyj formatu, który zapewnia najmniejsze rozmiary plików. Optymalizacja „kluczowych obrazów”, takich jak banery i tła, to łatwy i jednorazowy sposób na poprawę wyników.

Rejestrowanie żądań zasobów: liczba, rozmiar, typ i czas

Dobrym punktem wyjścia podczas audytu witryny jest sprawdzenie stron za pomocą narzędzi sieciowych w przeglądarce. Jeśli nie wiesz, jak to zrobić, zapoznaj się z przewodnikiem po panelu sieci w Narzędziach deweloperskich w Chrome. Podobne narzędzia są dostępne w Firefox, Safari, Internet Explorerze i Edge.

Zanim wprowadzisz zmiany, zapisz wyniki. W przypadku żądań sieciowych wystarczy zrzut ekranu. Możesz też zapisać dane profilu w pliku JSON. Poniżej znajdziesz więcej informacji o zapisywaniu i udostępnianiu wyników testu.

Zanim zaczniesz sprawdzać wykorzystanie sieci, wyłącz pamięć podręczną przeglądarki, aby mieć dokładne statystyki dotyczące wydajności podczas pierwszego wczytywania. Jeśli masz już włączone buforowanie za pomocą service workera, wyczyść pamięć podręczną interfejsu Cache API. Możesz użyć okna incognito (prywatnego), aby nie musieć wyłączać pamięci podręcznej przeglądarki ani usuwać wcześniej zapisanych wpisów.

Oto kilka podstawowych funkcji i wskaźników, które warto sprawdzić za pomocą narzędzi przeglądarki:

• Wydajność wczytywania: Lighthouse zawiera podsumowanie danych dotyczących wczytywania. Addy Osmani przygotował świetne podsumowanie kluczowych momentów w życiu użytkownika związanych z ładowaniem strony.
• Zdarzenia osi czasu dotyczące wczytywania i analizowania zasobów oraz wykorzystania pamięci. Jeśli chcesz uzyskać bardziej szczegółowe informacje, przeprowadź profilowanie pamięci i JavaScript.
• Łączna waga strony i liczba plików.
• Liczba i waga plików JavaScript.
• pojedyncze bardzo duże pliki JavaScript (np. większe niż 100 KB);
• nieużywany JavaScript; Możesz to sprawdzić za pomocą narzędzia do sprawdzania zasięgu w Chrome.
• Łączna liczba i waga plików z obrazami.
• wszelkie szczególnie duże pojedyncze pliki obrazów.
• Formaty obrazów: czy są jakieś pliki PNG, które mogłyby być plikami JPEG lub SVG? Czy format WebP jest używany z formatami zapasowymi?
• Czy są używane techniki tworzenia elastycznych obrazów (np. srcset).
• Rozmiar pliku HTML.
• Łączna liczba i waga plików CSS.
• nieużywany kod CSS, (w Chrome użyj panelu zasięgu).
• Sprawdź, czy nie ma problemów z użyciem innych komponentów, takich jak czcionki internetowe (w tym czcionki ikon).
• Sprawdź osi czasu w DevTools, czy nie ma na niej niczego, co blokuje wczytywanie strony.

Jeśli korzystasz z szybkiego połączenia Wi-Fi lub szybkiego połączenia komórkowego, przeprowadź test z emulacją niskiej przepustowości i wysokiego opóźnienia. Pamiętaj, aby przeprowadzić testy na urządzeniach mobilnych i na komputerach – niektóre witryny używają wykrywania UA, aby dostarczać różne komponenty i układy na różnych urządzeniach. Może być konieczne przetestowanie na rzeczywistym sprzęcie za pomocą debugowania zdalnego, a nie tylko symulacji urządzenia.

Uwaga: aby znaleźć problemy, możesz użyć narzędzi przeglądarki, sprawdzając odpowiedzi sieci i sortując je według rozmiaru. Na przykład plik PNG o rozmiary 349 KB wyglądał na problemowy:

 Okazało się, że obraz ma szerokość 1600 pikseli, a maksymalna szerokość wyświetlania elementu to tylko 400 pikseli. Po rozpakowaniu obraz wymagało ponad 4 MB pamięci, co jest dużo na telefonie komórkowym. Ponowne zapisanie obrazu jako JPEG o szerokości 800 pikseli (aby poradzić sobie z wyświetlaczem o szerokości 400 pikseli na ekranach 2x) i zoptymalizowanie go za pomocą ImageOptim spowodowało, że plik ma rozmiar 17 KB: porównaj oryginalny PNG z zoptymalizowanym JPEG-em.

To poprawa o 95%.

Sprawdzanie obciążenia pamięci i procesora

Zanim wprowadzisz zmiany, zapisz wykorzystanie pamięci i procesora.

W Chrome możesz otworzyć Menedżera zadań z menu Okno. To prosty sposób na sprawdzenie wymagań strony internetowej.

Menedżer zadań Chrome – uważaj na aplikacje pochłaniające pamięć i procesor!

Testowanie wydajności wczytywania po raz pierwszy i w kolejnych przypadkach

Lighthouse, WebPagetest i PageSpeed Insights są przydatne do analizowania szybkości, kosztów danych i wykorzystania zasobów. WebPagetest sprawdzi też buforowanie treści statycznych, czas do pierwszego bajta i to, czy Twoja witryna skutecznie korzysta z sieci CDN.

Uwaga: aby umożliwić przeglądarkom buforowanie zasobów statycznych przy pierwszym żądaniu, wystarczy skonfigurować serwer tak, aby zawierał odpowiednie nagłówki. Jeśli przeglądarka może zapisać zasoby w pamięci podręcznej, nie będzie musiała pobierać ich z sieci podczas kolejnych wizyt. Dzięki temu zwiększysz szybkość wczytywania, zmniejszysz koszty danych i obciążenie sieci i serwera – nawet w przypadku przeglądarek, które nie obsługują buforowania za pomocą service workera. Nawet jeśli używasz interfejsu Cache API, ważne jest, aby włączyć pamięć podręczną przeglądarki. Aby dowiedzieć się więcej, zapoznaj się z narzędziami PageSpeed i materiałami w podstawach tworzenia witryn (zwłaszcza z sekcją „Anulowanie i aktualizowanie odpowiedzi z pamięci podręcznej”).

Zapisywanie wyników

• WebPagetest każdy wynik testu ma własny adres URL.
• PageSpeed Insights: online narzędzie PageSpeed Insights zawiera teraz dane z raportu na temat użytkowania Chrome, które wskazują statystyki dotyczące wydajności w rzeczywistych warunkach.
• Lighthouse aby zapisać raporty z panelu audytu w Narzędziach deweloperskich w Chrome, kliknij przycisk pobierania:

  

Testowanie podstawowych wymagań progresywnej aplikacji internetowej

Lighthouse pomaga testować bezpieczeństwo, funkcjonalność, dostępność, wydajność i wydajność w wyszukiwarce. Lighthouse sprawdza m.in., czy Twoja witryna prawidłowo wdraża funkcje PWA, takie jak usługi w tle i plik manifestu aplikacji internetowej.

Lighthouse sprawdza też, czy Twoja witryna może zapewnić akceptowalne działanie w trybie offline.

Raport Lighthouse możesz pobrać jako plik JSON lub, jeśli używasz rozszerzenia Lighthouse do Chrome, udostępnić go jako Gist w GitHub: kliknij przycisk udostępniania, wybierz Otwórz w przeglądarce, a potem w nowym oknie kliknij przycisk Udostępnij jako Gist.

Eksportuj raport do gist z rozszerzenia Lighthouse do Chrome – kliknij przycisk udostępniania

Korzystanie z analizy, śledzenia zdarzeń i danych biznesowych do śledzenia skuteczności w rzeczywistych warunkach

Jeśli to możliwe, przed wprowadzeniem zmian zapisz dane analityczne: współczynniki odrzuceń, czas spędzony na stronie, strony wyjścia – wszystko, co jest istotne dla Twoich potrzeb biznesowych.

Jeśli to możliwe, odnotuj dane biznesowe i techniczne, które mogą ulec zmianie, aby móc porównać wyniki po wprowadzeniu zmian. Na przykład witryna e-commerce może śledzić liczbę zamówień na minutę lub rejestrować statystyki na potrzeby testów wytrzymałościowych i testów obciążeniowych. Jeśli zmniejszysz wagę strony i żądania zasobów, prawdopodobnie zmniejszysz koszty magazynowania na zapleczu, wymagania dotyczące procesora, koszty wyświetlania i odporność.

Jeśli nie masz jeszcze wdrożonej analityki, najwyższy czas to zrobić. Dane i statystyki biznesowe są ostatecznym wyznacznikiem tego, czy Twoja witryna działa. W razie potrzeby uwzględnij śledzenie zdarzeń w przypadku działań użytkowników, takich jak kliknięcia przycisków i odtwarzanie filmów. Możesz też wdrożyć analizę ścieżki do celu, czyli ścieżki, po której użytkownicy przechodzą, aby dokonać konwersji.

Możesz śledzić w Google Analytics szybkość witryny, aby sprawdzić, jak dane dotyczące wydajności korelują z danymi biznesowymi. Na przykład: „Jak szybko wczytuje się strona główna?” w porównaniu z „Czy wejście przez stronę główną doprowadziło do sprzedaży?”

Google Analytics korzysta z danych z interfejsu API Czas trwania nawigacji.

Możesz rejestrować dane za pomocą jednego z interfejsów API skuteczności JavaScriptu lub własnych danych, np.:

    const subscribeBtn = document.querySelector('#subscribe');

    subscribeBtn.addEventListener('click', (event) => {
     // Event listener logic goes here...

     const lag = performance.now() - event.timeStamp;
     if (lag > 100) {
      ga('send', 'event', {
       eventCategory: 'Performance Metric'
       eventAction: 'input-latency',
       eventLabel: '#subscribe:click',
       eventValue: Math.round(lag),
       nonInteraction: true,
      });
     }
    });

Możesz też użyć ReportingObserver, aby sprawdzić, czy nie ma ostrzeżeń o wycofnięciu przeglądarki i interwencji. Jest to jeden z wielu interfejsów API umożliwiających uzyskiwanie rzeczywistych, bieżących pomiarów dotyczących rzeczywistych użytkowników.

Rzeczywiste doświadczenie: nagrywanie ekranu i wideo

Nagraj film z wczytywaniem strony na komórce i komputerze. Ta funkcja działa jeszcze lepiej przy wysokich szybkościach klatek i jeśli dodasz wyświetlacz zegara.

Możesz też zapisywać nagrania ekranu. Istnieje wiele aplikacji do nagrywania ekranu na urządzeniach z Androidem, iOS i komputerach (oraz skrypty do tego samego celu).

Nagrywanie filmów z ładowaniem strony działa podobnie jak widok taśmy filmowej w WebPagetest lub zapisywanie zrzutów ekranu w Narzędziach deweloperskich w Chrome. Otrzymujesz rzeczywiste dane o szybkości wczytywania komponentów strony: co jest szybkie, a co wolne. Zapisz nagrania wideo i filmy z ekranu, aby porównać je z późniejszymi wersjami.

Porównanie „przed i po” może być świetnym sposobem na pokazanie ulepszeń.

Co jeszcze?

W stosownych przypadkach sprawdź wynik testu na obszerność kodu HTML. To zabawny test, ale może też być skutecznym sposobem na pokazanie, że kod jest za duży lub że wprowadziliśmy ulepszenia.

Ile kosztuje moja witryna?, przedstawiony poniżej, zawiera przybliżone informacje o kosztach finansowych wczytywania witryny w różnych regionach.

Dostępnych jest wiele innych samodzielnych narzędzi i narzędzi online. Zapoznaj się z perf.rocks/tools.