Istnieje kilka podstawowych celów, które należy osiągnąć, aby utworzyć wydajną, odporną witrynę o niskim koszcie danych.
Każdy cel wymaga audytu.
| Cel | Why? | Co testować? |
|---|---|---|
| Zapewnij prywatność, bezpieczeństwo i integralność danych oraz korzystaj z zaawansowanych interfejsów API | Dlaczego protokół HTTPS jest ważny | Protokół HTTPS został wdrożony na wszystkich stronach i ścieżkach witryny oraz we wszystkich zasobach. |
| Zwiększanie wydajności wczytywania | 53% użytkowników opuszcza witryny, które wczytują się dłużej niż 3 sekundy. | JavaScript i CSS, które można wczytywać asynchronicznie lub odroczyć. Ustaw cele dotyczące czasu do pełnej interaktywności i rozmiaru ładunku, np. TTI w sieci 3G. Ustaw budżet wydajności. |
| Zmniejsz wagę strony | • Zmniejszenie kosztów danych dla użytkowników z limitowanymi pakietami danych • Zmniejszenie wymagań dotyczących miejsca na dane aplikacji internetowej – szczególnie ważne dla użytkowników urządzeń o niskich parametrach • Zmniejszenie kosztów hostingu i wyświetlania • Poprawa wydajności, niezawodności i odporności wyświetlania | Ustaw budżet wagi strony, np. pierwsze wczytanie poniżej 400 kB. Sprawdź, czy nie ma zbyt wielu skryptów JavaScript. Sprawdź rozmiary plików, aby znaleźć zbyt duże obrazy, multimedia, pliki HTML, CSS i JavaScript. Znajdź obrazy, które mogą być ładowane leniwie, i sprawdź, czy nie ma nieużywanego kodu, korzystając z narzędzi do analizy pokrycia. |
| Zmniejszanie żądań zasobów | • Zmniejszenie problemów z opóźnieniami • Zmniejszenie kosztów wyświetlania • Poprawa wydajności, niezawodności i odporności wyświetlania | Sprawdź, czy nie ma nadmiernych lub niepotrzebnych żądań dotyczących jakiegokolwiek typu zasobów. Na przykład: pliki, które są wielokrotnie wczytywane, JavaScript, który jest wczytywany w wielu wersjach, CSS, który nigdy nie jest używany, obrazy, które nigdy nie są wyświetlane (lub mogą być ładowane leniwie). |
| Optymalizowanie 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 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ą ograniczoną moc procesora, zwłaszcza te o niskich parametrach. | Sprawdź, czy nie ma zbyt dużej ilości kodu JavaScript. Znajdź nieużywany kod JavaScript i CSS za pomocą narzędzi do sprawdzania pokrycia. Sprawdź, czy rozmiar DOM nie jest zbyt duży i czy nie ma skryptów, które niepotrzebnie uruchamiają się przy pierwszym wczytaniu. Poszukaj kodu JavaScript wczytywanego w kilku wersjach lub bibliotek, których można uniknąć dzięki niewielkiej refaktoryzacji. |
Istnieje wiele narzędzi i technik przeprowadzania audytu witryn:
- Narzędzia systemowe
- Wbudowane narzędzia przeglądarki
- Rozszerzenia do przeglądarki
- Internetowe wnioski o testy
- 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 poszczególnych typów kontroli.
Rejestrowanie żądań zasobów: liczba, rozmiar, typ i czas
Dobrym punktem wyjścia do audytu witryny jest sprawdzenie stron za pomocą narzędzi sieciowych przeglądarki. Jeśli nie wiesz, jak to zrobić, zapoznaj się z przewodnikiem dla początkujących dotyczącym panelu sieci w Narzędziach deweloperskich w Chrome. Podobne narzędzia są dostępne w przeglądarkach Firefox, Safari, Internet Explorer i Edge.
Pamiętaj, aby przed wprowadzeniem zmian zapisać wyniki. W przypadku żądań sieciowych może to być zwykły zrzut ekranu. Możesz też zapisać dane profilu jako plik JSON. Poniżej znajdziesz więcej informacji o tym, jak zapisywać i udostępniać wyniki testów.
Zanim zaczniesz sprawdzać wykorzystanie sieci, wyłącz pamięć podręczną przeglądarki, aby uzyskać dokładne statystyki dotyczące wydajności przy pierwszym wczytywaniu. Jeśli już korzystasz z buforowania za pomocą skryptu service worker, wyczyść pamięć interfejsu Cache API. Możesz użyć okna incognito (prywatnego), aby nie martwić się o wyłączenie pamięci podręcznej przeglądarki lub usunięcie wcześniej zapisanych wpisów.
Oto kilka głównych 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 napisał świetne podsumowanie kluczowych momentów użytkownika podczas wczytywania strony.
- Zdarzenia na osi czasu dotyczące wczytywania i analizowania zasobów oraz wykorzystania pamięci. Jeśli chcesz dowiedzieć się więcej, przeprowadź profilowanie pamięci i JavaScriptu.
- Łączna waga strony i liczba plików.
- Liczba i rozmiar plików JavaScript.
- wszystkie szczególnie duże pojedyncze pliki JavaScript (np. powyżej 100 KB);
- Nieużywany JavaScript. Możesz to sprawdzić za pomocą narzędzia do sprawdzania pokrycia w Chrome.
- łączna liczba i waga plików graficznych;
- pojedyncze pliki graficzne o szczególnie dużym rozmiarze;
- Formaty plików graficznych: czy są jakieś pliki PNG, które mogłyby być plikami JPEG lub SVG? Czy format WebP jest używany z kreacjami zastępczymi?
- czy stosowane są techniki tworzenia elastycznych obrazów (np. srcset).
- Rozmiar pliku HTML.
- Łączna liczba i rozmiar plików CSS.
- Nieużywany kod CSS. (W Chrome użyj panelu pokrycia).
- Sprawdź, czy nie występują problemy z używaniem innych zasobów, np. czcionek internetowych (w tym czcionek ikon).
- Sprawdź na osi czasu Narzędzi deweloperskich, czy coś nie blokuje wczytywania strony.
Jeśli korzystasz z szybkiego Wi-Fi lub szybkiego połączenia komórkowego, przetestuj działanie strony, emulując niską przepustowość i wysokie opóźnienie. Pamiętaj, aby przeprowadzić testy zarówno na urządzeniach mobilnych, jak i na komputerach – niektóre witryny używają wykrywania UA, aby dostarczać różne zasoby i układy na różne urządzenia. Może być konieczne przeprowadzenie testów na rzeczywistym sprzęcie przy użyciu zdalnego debugowania, a nie tylko symulacji urządzenia.
Sprawdzanie obciążenia pamięci i procesora
Zanim wprowadzisz zmiany, zapisz informacje o wykorzystaniu pamięci i procesora.
W Chrome możesz uzyskać dostęp do Menedżera zadań z menu Okno. To prosty sposób na sprawdzenie wymagań strony internetowej.
Testowanie wydajności pierwszego i kolejnych wczytań
Lighthouse, WebPagetest i Pagespeed Insights to przydatne narzędzia do analizowania szybkości, kosztów danych i wykorzystania zasobów. WebPagetest sprawdza też buforowanie treści statycznych, czas do pierwszego bajtu oraz to, czy witryna efektywnie korzysta z sieci CDN.
Zapisz wyniki.
- WebPagetest: każdy wynik testu ma własny adres URL.
- PageSpeed Insights: internetowe narzędzie PageSpeed Insights zawiera teraz dane z Raportu na temat użytkowania Chrome, które przedstawiają rzeczywiste statystyki wydajności.
- Lighthouse: zapisz raporty z panelu kontroli Narzędzi deweloperskich w Chrome, klikając przycisk pobierania:
Testowanie pod kątem podstawowych wymagań dotyczących progresywnych aplikacji internetowych
Lighthouse pomaga testować bezpieczeństwo, funkcjonalność, dostępność, wydajność i skuteczność wyszukiwarki. Lighthouse sprawdza m.in., czy witryna prawidłowo implementuje funkcje PWA, takie jak skrypty service worker i plik manifestu aplikacji internetowej.
Lighthouse sprawdza też, czy witryna może zapewnić akceptowalne działanie offline.
Raport Lighthouse możesz 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 w nowym oknie ponownie kliknij przycisk udostępniania i wybierz Zapisz jako Gist.
korzystać z analityki, śledzenia zdarzeń i wskaźników biznesowych do śledzenia rzeczywistej skuteczności;
Jeśli to możliwe, przed wprowadzeniem zmian zachowaj dane analityczne: współczynniki odrzuceń, czas spędzony na stronie, strony wyjścia – wszystko, co jest istotne dla Twojej firmy.
Jeśli to możliwe, zapisz dane biznesowe i techniczne, na które może to wpłynąć, 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 testów obciążeniowych i wytrzymałościowych. Jeśli zmniejszysz wagę strony i liczbę żądań zasobów, prawdopodobnie obniżysz koszty pamięci masowej backendu, wymagania dotyczące procesora, koszty wyświetlania i zwiększysz odporność.
Jeśli nie masz jeszcze wdrożonej analityki, teraz jest na to czas. Wskaźniki biznesowe i statystyki są ostatecznym wyznacznikiem tego, czy witryna działa prawidłowo. W razie potrzeby uwzględnij śledzenie zdarzeń, aby rejestrować działania użytkowników, takie jak kliknięcia przycisków i odtworzenia filmów. Możesz też wdrożyć analizę przepływu celów, czyli ścieżek, którymi użytkownicy przechodzą do „konwersji”.
Możesz monitorować szybkość witryny w Google Analytics, aby sprawdzać, jak wskaźniki skuteczności korelują ze wskaźnikami biznesowymi. Na przykład: „Jak szybko wczytała 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 Navigation Timing API.
Możesz rejestrować dane za pomocą jednego z interfejsów API wydajności JavaScriptu lub własnych danych, 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ć, czy nie ma ostrzeżeń o wycofaniu i interwencji przeglądarki. Jest to jeden z wielu interfejsów API, które umożliwiają uzyskiwanie rzeczywistych, aktualnych pomiarów od rzeczywistych użytkowników.
Rzeczywiste doświadczenia: nagrywanie ekranu i filmów
Nagraj film przedstawiający wczytywanie strony na urządzeniu mobilnym i komputerze. Działa to jeszcze lepiej przy dużej liczbie klatek i po dodaniu wyświetlania licznika czasu.
Możesz też zapisywać screencasty. Istnieje wiele aplikacji do nagrywania screencastów na Androida, iOS i platformy komputerowe (oraz skrypty, które robią to samo).
Nagrywanie wideo podczas wczytywania strony działa podobnie jak widok paska zdjęć w WebPagetest lub robienie zrzutów ekranu w Narzędziach deweloperskich w Chrome. Otrzymasz rzeczywiste dane o szybkości wczytywania komponentów strony – dowiesz się, co wczytuje się szybko, a co wolno. Zapisuj nagrania wideo i screencasty, aby porównać je z późniejszymi ulepszeniami.
Porównanie stanu przed i po może być świetnym sposobem na pokazanie ulepszeń.
Co jeszcze?
W razie potrzeby sprawdź wynik Web Bloat Score. To zabawny test, ale może też być przekonującym sposobem na pokazanie nadmiernego rozrostu kodu lub wprowadzonych ulepszeń.
Narzędzie What Does My Site Cost? (Ile kosztuje moja witryna?) przedstawione poniżej pozwala oszacować koszt finansowy wczytywania witryny w różnych regionach.
Dostępnych jest wiele innych samodzielnych narzędzi i narzędzi online: zajrzyj na stronę perf.rocks/tools.