Używanie narzędzi do pomiaru skuteczności

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.
Zwiększ wydajność 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 skuteczności.
Zmniejsz wagę 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 serwowania • Popraw wydajność, niezawodność i odporność serwowania 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źć wzniesione obrazy, multimedia, 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 • Zmniejsz problemy z opóźnieniami; • Zmniejsz koszty wyświetlania; • Popraw wydajność, niezawodność i odporność 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ć wykorzystanie pamięci przez Twoją witrynę 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 pomiaru 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.

Istnieje wiele narzędzi i technik do kontroli witryn:

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

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 Firefoksie, Safari, Internet ExplorerzeEdge.

Pamiętaj, aby przed wprowadzeniem zmian zapisać wyniki. W przypadku żądań sieciowych wystarczy zrzut ekranu. Możesz też zapisać dane profilu w pliku JSON. Poniżej znajdziesz więcej informacji o sadzaniu 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 skorzystać z okna incognito (prywatnego), by nie wyłączać pamięci podręcznej przeglądarki ani usuwać wpisów zapisanych w pamięci podręcznej.

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

  • Wydajność wczytywania: Lighthouse zawiera podsumowanie danych dotyczących obciążenia. 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.
  • 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 w przypadku kreacji zastępczych używany jest protokół WebP?
  • 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ź na osi czasu w Narzędziach deweloperskich, czy 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. Konieczne może być wykonanie zdalnego debugowania na sprzęcie, a nie tylko w symulacji urządzenia.

Sprawdź pamięć i obciążenie 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 pokazujący wykorzystanie pamięci i procesora przez 4 otwarte karty przeglądarki
Menedżer zadań Chrome – uważaj na za mało pamięci i CPU

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. Sprawdzi on również przechowywanie treści statycznych w pamięci podręcznej, czas do pierwszego bajtu oraz to, czy Twoja witryna skutecznie korzysta z sieci CDN.

Zapisywanie wyników

Testowanie podstawowych wymagań dotyczących progresywnych aplikacji internetowych

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 witryna może działać w trybie offline.

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

Zrzut ekranu pokazujący, jak eksportować raport Lighthouse w Chrome 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 analityka biznesowe to ostatni wskaźnik o tym, czy witryna działa. W razie potrzeby stosuj śledzenie zdarzeń dotyczące działań użytkowników, takich jak kliknięcia przycisków i odtworzenia 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?”

Zrzut ekranu pokazujący szybkość witryny w Google Analytics

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 sprawdzać ostrzeżenia o wycofaniu 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.

Doświadczenie: nagrywanie ekranu i filmy

Nagraj film z wczytywaniem strony na urządzeniu mobilnym 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 (a także skrypty do tego samego celu).

Wczytywanie strony z nagrywaniem filmów działa podobnie jak widok paska zdjęć w WebPagetest lub w narzędziu Zarejestruj zrzuty ekranu w Narzędziach deweloperskich w Chrome. Dzięki niemu mamy do dyspozycji rzeczywiste dane o szybkości wczytywania komponentów strony: co jest szybko, a co wolno. Zapisz nagrania wideo i filmy z ekranu, aby porównać je z późniejszymi wersjami.

Umieszczanie obok siebie zdjęć „przed” i „po” może być świetnym sposobem na pokazanie ulepszeń.

Co jeszcze?

W razie potrzeby uzyskaj Wynik Web Bloat. To zabawny test, ale może też być skutecznym sposobem na pokazanie, że kod jest za duży lub że wprowadziliśmy ulepszenia.

Ilustracja Ile kosztuje moja witryna? poniżej zawiera przybliżone koszty finansowe związane z wczytywaniem witryny w różnych regionach.

Zrzut ekranu ze strony Whatwhatwhatwherewebsitecost.com

Dostępnych jest wiele innych samodzielnych i internetowych narzędzi: spójrz na perf.rocks/tools.