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.

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
• Analytics
• 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.

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

Dobrym punktem wyjścia podczas audytu witryny jest sprawdzenie stron za pomocą narzędzi sieciowych przeglądarki. 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ć martwić się o wyłączenie pamięci podręcznej przeglądarki ani usuwanie 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 o wczytywaniu. Addy Osmani przygotował świetne podsumowanie kluczowych momentów w życiu użytkownika związanych z ładowaniem strony.
• Zdarzenia osi czasu – służą do wczytywania i analizowania zasobów oraz do 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 pokrycia w Chrome.
• Łączna liczba i waga plików z obrazami.
• pojedyncze pliki graficzne o szczególnie dużych rozmiarach.
• 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 dużego 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 przy użyciu debugowania zdalnego, a nie tylko symulacji urządzenia.

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.

Testowanie szybkości wczytywania strony po raz pierwszy i w kolejnych wczytaniach

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 efektywnie korzysta z CDN.

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.

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 obsługi 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żytkownika, 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 sprawdzać w Google Analytics szybkość witryny, aby zobaczyć, 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 dotyczących wydajnoś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 do uzyskiwania 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. Dostępnych jest 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 do widoku taśmy filmowej w WebPagetest lub zapisywania zrzutów ekranu w Narzędziach dla programistów 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 ciekawy 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 i internetowych narzędzi. Zapoznaj się z perf.rocks/tools.