Być może słyszałeś już o zaletach, jakie techniki progresywnych aplikacji internetowych (PWA) mogą przynieść Twojej witrynie. Możesz ulec pokusie dodania funkcji PWA bez poprawy podstawowej wydajności witryny. Jednak żadne funkcje PWA nie rozwiążą problemów z blokowaniem JavaScriptu i przeładowanymi obrazami.
Zamiast tego najpierw przeprowadź audyt witryny, czyli obiektywną ocenę tego, co działa dobrze, a co można poprawić.
Sprawdzanie witryny lub aplikacji pomaga w tworzeniu odpornych i wydajnych rozwiązań. Wskaż też szybkie sukcesy, które można osiągnąć przy minimalnym zatwierdzeniu. Audyt tworzy punkt odniesienia dla rozwoju opartego na danych. Czy zmiana przyniosła lepsze efekty? Jak Twoja witryna wypada na tle konkurencji? Otrzymasz dane, które pomogą Ci określić priorytety, oraz konkretne dowody, którymi będziesz się mógł pochwalić po wprowadzeniu ulepszeń.
W zaledwie 5 minut
Uruchom Lighthouse na stronie głównej i zapisz dane raportu. Otrzymasz ilościowe dane referencyjne i listę zadań do wykonania, które pomogą Ci poprawić wydajność, dostępność, bezpieczeństwo i SEO.
W zaledwie 30 minut
Lighthouse to prawdopodobnie najlepsze narzędzie na początek, ale jeśli masz więcej czasu, możesz też rejestrować wyniki z innych narzędzi:
- Panel Bezpieczeństwo w Narzędziach deweloperskich w Chrome: użycie protokołu HTTPS.
- Panel żądań sieciowych w Narzędziach deweloperskich w Chrome: czasy ładowania, rozmiary zasobów i liczba żądań dotyczących plików HTML, CSS, JavaScript, obrazów, czcionek i innych plików.
- Menedżer zadań Chrome: jeśli Twoja witryna regularnie zużywa znacznie więcej procesora lub pamięci niż inne aplikacje, być może musisz naprawić wycieki pamięci, problemy z działaniem zadań lub ładowaniem zasobów.
- WebPagetest buforowanie, czas do pierwszego bajtu, wykorzystanie sieci CDN.
- PageSpeed Insights: wydajność wczytywania, koszt danych i wykorzystanie zasobów, w tym dane z Raportu na temat użytkowania Chrome, które pokazują statystyki wydajności w rzeczywistych warunkach.
Sprawdź, jak Twoja witryna wygląda z perspektywy użytkownika odwiedzającego ją po raz pierwszy. Otwórz witrynę w oknie incognito (prywatnym) lub użyj narzędzi przeglądarki, aby wyłączyć buforowanie i wyczyścić pamięć. Dzięki temu każdy zasób jest pobierany z sieci, a nie z pamięci podręcznej, co pozwala uzyskać dokładny obraz wydajności pierwszego wczytania.
Nic nie zastąpi testów w rzeczywistych warunkach. Przetestuj witrynę na urządzeniach i przy połączeniach, które są typowe dla Twoich użytkowników, i zapisuj swoje subiektywne wrażenia.
Jeśli narzędzia Cię przytłaczają
Zapoznaj się z naszym przewodnikiem: Jak korzystać z narzędzi do pomiaru szybkości.
Jeśli nic innego nie skutkuje, użyj Lighthouse, aby sprawdzić:
- HTTPS: każda witryna powinna przesyłać wszystkie zasoby przez HTTPS.
- Ustawienia serwera: serwer internetowy lub CDN powinien prawidłowo korzystać z kompresji, używać protokołu HTTP/2 i zawierać odpowiednie nagłówki, aby umożliwić przeglądarce buforowanie zasobów.
- Elementy skryptu, które można przenieść na dół strony lub którym można przypisać atrybut async lub defer.
- JavaScript i biblioteki, które można usunąć.
- Nieużywany kod, np. biblioteki CSS i JavaScript.
- Możliwości zmniejszenia rozmiaru obrazu w pikselach.
- Zmiany formatu pliku, które zmniejszają rozmiar obrazu, np. zmiana formatu PNG na JPG.
Odbiorcy, zainteresowane strony, kontekst
Priorytety refaktoryzacji zależą od odbiorców, treści i funkcjonalności. Kto odwiedza Twoją witrynę? Dlaczego i jak z niej korzystają? Jaki jest Twój budżet na skuteczność?
Kim są Twoi interesariusze i jakie są ich priorytety? Wpływa to na sposób strukturyzacji, prezentacji i udostępniania danych z audytu.
Jeśli nie możesz przeprowadzić audytu całej witryny, sprawdź statystyki strony, aby dowiedzieć się, na czym się skupić. Wysoki współczynnik odrzuceń, krótki czas spędzony na stronie i nieoczekiwane strony wyjścia mogą być dobrym wskaźnikiem, od którego warto zacząć. Podobnie jak dane biznesowe, takie jak koszty hostingu, kliknięcia reklam i konwersje. Uzyskaj od interesariuszy informacje o tym, jakie dane są dla nich ważne.
Testuj, nagrywaj, poprawiaj, powtarzaj
Zarejestruj stan witryny przed wprowadzeniem jakichkolwiek zmian, aby wykryć problemy i ustalić punkt wyjścia do wprowadzania ulepszeń lub regresji. Dzięki temu uzyskasz dane, które pozwolą Ci uzasadnić i nagrodzić wysiłek włożony w rozwój.
Przetestuj różne typy stron w swojej witrynie. W przypadku aplikacji jednostronicowych testuj komponenty, ścieżki i przepływy UX, a nie tylko pierwsze wczytanie.