Używanie narzędzi do pomiaru skuteczności

Sam Dutton

Stworzenie wydajnej, odpornej witryny przy niskich kosztach danych ma kilka głównych celów.

W przypadku każdego celu musisz przeprowadzić audyt.

Cel	Why?	Co należy testować?
Zadbaj o prywatność, bezpieczeństwo i integralność danych oraz wykorzystaj zaawansowane interfejsy API	Dlaczego protokół HTTPS jest ważny	Protokół HTTPS zaimplementowany w przypadku wszystkich stron/tras i zasobów w witrynie.
Popraw wydajność wczytywania	53% użytkowników porzuca strony, których wczytywanie trwa dłużej niż 3 sekundy	Kody JavaScript i CSS, które mogą być ładowane asynchronicznie lub odroczone. Ustaw cele czasu interakcji i rozmiaru ładunku, na przykład TTI w 3G. Ustaw budżet skuteczności.
Zmniejsz wagę strony	• Obniż koszty danych w przypadku użytkowników z ograniczonym abonamentem • Niższe wymagania dotyczące miejsca na dane w aplikacjach internetowych – szczególnie ważne w przypadku urządzeń o niskiej specyfikacji • Niższe koszty hostingu i obsługi • Większa wydajność, niezawodność i odporność	Ustaw budżet wagi strony, np. pierwsze wczytanie poniżej 400 kB. Sprawdź, czy nie ma intensywnych plików JavaScript. Sprawdź rozmiary plików i znajdź duże rozmiary obrazów, multimediów, kodu HTML, CSS i JavaScript. Znajdź obrazy, które można leniwie ładować, i sprawdź, czy kod nie jest używany, za pomocą narzędzi do wykrywania fragmentów.
Zmniejsz liczbę żądań dotyczących zasobów	• Zmniejsz problemy z opóźnieniami • Niższe koszty obsługi • Zwiększ wydajność obsługi, niezawodność i odporność	Szukaj nadmiernej liczby lub niepotrzebnych żądań dotyczących dowolnego typu zasobów. Mogą to być na przykład pliki, które są wczytywane wielokrotnie, kod JavaScript ładowany w wielu wersjach, nigdy nieużywany kod CSS, obrazy, które nie są wyświetlane (lub mogą być leniwie ładowane).
Optymalizacja wykorzystania pamięci	Pamięć może stać się nowym wąskim gardłem, zwłaszcza na urządzeniach mobilnych	Użyj Menedżera zadań Chrome, aby podczas wczytywania strony głównej i korzystania z innych funkcji witryny porównać swoją witrynę z innymi pod względem wykorzystania pamięci.
Zmniejsz obciążenie procesora	Urządzenia mobilne mają ograniczony procesor, zwłaszcza urządzenia o niskiej specyfikacji.	Sprawdź, czy nie ma intensywnych plików JavaScript. Znajdź nieużywany kod JavaScript i CSS za pomocą narzędzi do wykrywania treści. Sprawdź, czy nie ma nadmiernego rozmiaru DOM i skryptów, które uruchamiają się niepotrzebnie przy pierwszym wczytaniu. Szukaj kodu JavaScript wczytanego w wielu wersjach lub bibliotek, których można uniknąć dzięki drobnej refaktoryzacji.

Istnieje wiele narzędzi i technik kontroli witryn:

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

Poniżej znajdziesz informacje o tym, które podejście jest odpowiednie w przypadku poszczególnych rodzajów kontroli.

Uwaga: w przypadku większości stron internetowych obrazy stanowią największą wagę i większość żądań. Czas oczekiwania zwiększa się, gdy jakość połączenia się pogarsza, więc nadmiarowe żądania plików graficznych stają się coraz częstszym problemem w miarę rozpowszechniania internetu na urządzeniach mobilnych. Obrazy zużywają też energię: więcej żądań dotyczących obrazów, większe wykorzystanie radia, więcej rozładowanych baterii. Nawet samo renderowanie obrazów wymaga mocy – jest to proporcjonalne do rozmiaru i liczby obrazów. Podobnie jest w przypadku pamięci: niewielki wzrost rozmiaru w pikselach powoduje znaczny wzrost wykorzystania pamięci. W przypadku obrazów na urządzeniach mobilnych – zwłaszcza na urządzeniach o niskiej wydajności – pamięć może stać się nowym wąskim gardłem. Obrazy z dużą ilością danych są problematyczne także w przypadku użytkowników korzystających z limitów pakietów danych. Usuń zbędne zdjęcia Jeśli nie możesz się ich pozbyć, optymalizuj: jak najbardziej zwiększ kompresję, zmniejsz wymiary w pikselach i użyj formatu, który zapewnia najmniejsze rozmiary plików. Optymalizacja obrazów banerowych, takich jak banery i tła, jest łatwa i jednorazowa.

Rejestruj żądania zasobów: liczbę, rozmiar, typ i czas

Kontrolę w witrynie warto zacząć od sprawdzenia jej stron za pomocą narzędzi sieciowych w przeglądarce. Jeśli nie wiesz, jak to zrobić, skorzystaj z panelu sieci w Chrome DevTools Przewodnik dla początkujących. Podobne narzędzia są dostępne w Firefoksie, Safari, Internet Explorerze i Edge.

Pamiętaj o zachowaniu wyników przed wprowadzeniem zmian. W przypadku żądań sieciowych może to być bardzo proste jak zrzut ekranu. Możesz też zapisać dane profilu w pliku JSON. Więcej informacji o zapisywaniu i udostępnianiu wyników testu znajdziesz poniżej.

Zanim zaczniesz kontrolować użycie sieci, wyłącz pamięć podręczną przeglądarki, aby uzyskać dokładne statystyki dotyczące wydajności przy pierwszym uruchomieniu. Jeśli korzystasz już z buforowania za pomocą skryptu service worker, wyczyść dane Cache API. Możesz użyć okna incognito (prywatnego), dzięki któremu nie trzeba będzie martwić się wyłączaniem pamięci podręcznej przeglądarki ani usuwaniem jej wpisów.

Oto kilka podstawowych funkcji i danych, które należy sprawdzić przy użyciu narzędzi przeglądarki:

• Wydajność wczytywania: Lighthouse udostępnia podsumowanie danych dotyczących obciążenia. Addy Osmani napisała świetne podsumowanie kluczowych momentów użytkownika związanych z wczytywaniem strony.
• Zdarzenia na osi czasu służące do wczytywania i analizowania zasobów oraz wykorzystania pamięci. Jeśli chcesz zrobić więcej, uruchom pamięć i profilowanie JavaScript.
• Łączna waga strony i liczba plików.
• Liczba i waga plików JavaScript.
• Wszystkie szczególnie duże pliki JavaScript (ponad, np. 100 KB).
• Nieużywany JavaScript. Możesz to sprawdzić, korzystając z narzędzia do sprawdzania pokrycia w Chrome.
• Łączna liczba i waga plików graficznych.
• Wszelkie wyjątkowo duże pojedyncze pliki graficzne.
• Formaty obrazów: czy istnieją pliki PNG, które mogą być plikami JPEG lub SVG? Czy WebP jest używany z kreacjami zastępczymi?
• Określa, czy używane są techniki elastycznych obrazów (np. srcset).
• Rozmiar pliku HTML.
• Łączna liczba i waga plików CSS.
• Nieużywany kod CSS. (W Chrome użyj panelu pokrycia).
• Sprawdź, czy nie użyto innych zasobów, np. czcionek internetowych (w tym czcionek ikon).
• Na osi czasu Narzędzi deweloperskich znajdziesz elementy, które blokują wczytywanie strony.

Jeśli korzystasz z szybkiej sieci Wi-Fi lub szybkiego połączenia komórkowego, przeprowadź test, korzystając z emulacji niskiej przepustowości i dużego opóźnienia. Pamiętaj, aby przeprowadzać testy zarówno na urządzeniach mobilnych, jak i na komputerach – niektóre witryny korzystają z funkcji wykrywania UA, by dostarczać różne zasoby i układy na różne urządzenia. Może być konieczne przeprowadzenie testu na rzeczywistym sprzęcie za pomocą zdalnego debugowania, a nie tylko symulacji urządzenia.

Uwaga: często możesz wykryć problemy przy użyciu narzędzi przeglądarki, sprawdzając odpowiedzi sieci i sortując je według rozmiaru. Na przykład: plik PNG o wielkości 349 KB może mieć problem:

Dobrze. Okazało się, że obraz miał szerokość 1600 pikseli, a maksymalna szerokość wyświetlania elementu wynosiła tylko 400 pikseli. Po dekompresowaniu zdjęcie zajmowało ponad 4 MB pamięci, co w przypadku telefonu komórkowego jest bardzo dużo. Ponowne zapisanie obrazu jako pliku JPEG o szerokości 800 pikseli (aby poradzić sobie z rozdzielczością do 400 pikseli na urządzeniach 2 x ekranach) i optymalizowanie go przy użyciu ImageOptim pozwoliło uzyskać plik o rozmiarze 17 KB. Porównaj oryginalny plik PNG ze zoptymalizowanym plikiem JPEG.

To o 95% więcej!

Sprawdź pamięć i obciążenie procesora

Zanim wprowadzisz zmiany, obserwuj informacje o wykorzystaniu 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 problemy z pamięcią i procesorami.

Testowanie szybkości wczytywania przy pierwszym i kolejnym wczytywaniu

Narzędzia Lighthouse, WebPagetest i Pagespeed Insights przydają się do analizy szybkości, kosztu danych i wykorzystania zasobów. WebPagetest sprawdza też zapisywanie treści statycznych w pamięci podręcznej, czas do pierwszego bajtu oraz to, czy witryna skutecznie korzysta z sieci CDN.

Uwaga: można w prosty sposób włączyć buforowanie treści statycznych, aby przeglądarki mogły buforować zasoby przy pierwszym uruchomieniu ich żądania. W tym celu skonfiguruj serwer tak, aby uwzględniał odpowiednie nagłówki. Jeśli przeglądarka może buforować zasoby, przy kolejnych wizytach w przeglądarce nie musi ich pobierać z sieci. Przyspiesza to wczytywanie, zmniejsza koszty przesyłu danych oraz zmniejsza obciążenie sieci i serwera – nawet w przypadku przeglądarek, które nie obsługują buforowania za pomocą skryptu service worker. 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 na stronie Podstawy tworzenia witryn (w szczególności w sekcji „Unieważnianie i aktualizowanie odpowiedzi w pamięci podręcznej”).

Zapisz wyniki

• WebPagetest: wyniki testu mają własny adres URL.
• Pagespeed Insights: online narzędzie Pagespeed Insights zawiera teraz dane z Raportu na temat użytkowania Chrome, które podkreśla rzeczywiste statystyki wydajności.
• Lighthouse: zapisz raporty w panelu kontrolnym Narzędzi deweloperskich w Chrome, klikając przycisk pobierania:

  

Testowanie pod kątem podstawowych wymagań dotyczących progresywnych aplikacji internetowych

Lighthouse pomaga testować zabezpieczenia, funkcje, ułatwienia dostępu, wydajność i wydajność wyszukiwarki. W szczególności Lighthouse sprawdza, czy Twoja witryna prawidłowo implementuje funkcje PWA, takie jak mechanizmy Service Worker i plik manifestu aplikacji internetowej.

Lighthouse sprawdza też, czy Twoja strona może działać w trybie offline.

Raport Lighthouse można pobrać w formacie JSON lub, jeśli używasz rozszerzenia Lighthouse do Chrome, udostępnić go jako GitHub Gist: kliknij przycisk udostępniania, wybierz Otwórz w przeglądarce, a następnie ponownie kliknij przycisk udostępniania w nowym oknie i wybierz Zapisz jako Gist.

Eksportowanie raportu do pliku SDF z rozszerzenia Lighthouse do Chrome – kliknij przycisk udostępniania

Korzystaj z analityki, śledzenia zdarzeń i danych biznesowych, aby śledzić rzeczywistą skuteczność

Jeśli to możliwe, przed wprowadzeniem zmian zapisz dane analityczne: współczynnik odrzuceń, czas spędzony na stronie, strony wyjścia – wszystko, co jest zgodne z wymaganiami Twojej firmy.

Jeśli to możliwe, zapisz dane biznesowe i techniczne, na które może mieć wpływ zmiana, aby móc porównać wyniki po wprowadzeniu zmian. Na przykład: witryna e-commerce może śledzić zamówienia na minutę lub rejestrować statystyki dotyczące testów stresu i wytrzymałości. Jeśli ograniczysz wagę strony i żądania zasobów, koszty miejsca na dane zaplecza, wymagania dotyczące procesora, koszty obsługi i odporność mogą wzrosnąć.

Jeśli jeszcze nie masz wdrożonych funkcji analitycznych, jest już czas, aby! Wskaźniki biznesowe i analityka to ostateczny decyzj o tym, czy Twoja strona działa. W razie potrzeby stosuj śledzenie zdarzeń związanych z działaniami użytkowników, takimi jak kliknięcia przycisków i odtworzenia filmów. Możesz też zastosować analizę przepływu celów, czyli ścieżki, którymi użytkownicy zmierzają do „konwersji”.

Możesz śledzić w Google Analytics szybkość witryny, aby sprawdzać, jak dane o skuteczności są powiązane z danymi biznesowymi. Na przykład: „jak szybko załadowała się strona główna?” w porównaniu do „Czy wejście na stronie głównej doprowadziło do sprzedaży?”.

Google Analytics korzysta z danych z interfejsu Navigation Timing API.

Możesz rejestrować dane za pomocą jednego z interfejsów JavaScript API wydajności lub własnych wskaźników, na przykład:

    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ć ostrzeżenia o wycofaniu i interwencji przeglądarki. Jest to jeden z wielu interfejsów API do uzyskiwania rzeczywistych pomiarów na żywo wykonywanych przez rzeczywistych użytkowników.

Prawdziwe wrażenia: nagrywanie ekranu i filmów

Nagraj film z wczytywania strony na urządzeniu mobilnym lub komputerze. Działa to jeszcze lepiej przy dużej liczbie klatek i po dodaniu wyświetlacza z minutnikiem.

Warto też zapisywać screencasty. Istnieje wiele aplikacji do nagrywania screencastów na Androida, iOS i platformy komputerowe (oraz do skryptów, które robią to samo).

Wczytanie strony z nagrywaniem filmów działa podobnie jak widok paska zdjęć w WebPagetest lub Zrób zrzuty ekranu w Narzędziach deweloperskich w Chrome. Masz rzeczywisty rekord szybkości wczytywania komponentów strony: który jest szybki, a co wolny. Zapisuj nagrania wideo i screencasty, aby porównać je z późniejszymi poprawkami.

Porównanie ich skuteczności „przed i po” może być świetnym sposobem na zademonstrowanie postępów.

Co jeszcze?

W razie potrzeby uzyskaj wynik w internecie. To zabawny test, ale może też być skutecznym sposobem na zademonstrowanie rozrostu kodu lub wprowadzenie ulepszeń.

Tabela Jaki jest koszt witryny? Przedstawiona poniżej znajdziesz ogólne zestawienie kosztów finansowych związanych z załadowaniem witryny w różnych regionach.

Dostępnych jest wiele innych, samodzielnych i internetowych narzędzi: perf.rocks/tools.