Dlaczego i co?
Prawdopodobnie wiesz już, jakie korzyści dla witryny mogą przynieść techniki progresywnych aplikacji internetowych. Możesz mieć ochotę od razu dodać funkcje PWA. To możliwe, ale lepiej najpierw przygotować stronę do korzystania z PWA.
Żadna ilość magii PWA nie rozwiąże problemów takich jak blokowanie kodu JavaScript czy rozbudowane obrazy. PWAs wymagają solidnej podstawy.
Jak więc sprawdzić stan swojej witryny? Pierwszym krokiem jest przeprowadzenie audytu witryny: obiektywnej oceny tego, co działa dobrze i gdzie (oraz jak) można wprowadzić ulepszenia.
Przeprowadzenie audytu witryny lub aplikacji pomoże Ci stworzyć odporną i wydajną usługę oraz wskaże szybkie rozwiązania, które można wdrożyć bez konieczności uzyskania zgody. Audyt stanowi też punkt wyjścia do tworzenia opartego na danych oprogramowania. Czy po wprowadzeniu zmiany sytuacja się poprawiła? Jak Twoja witryna wypada na tle konkurencji? Otrzymujesz dane, które pomagają Ci ustalać priorytety działań, oraz konkretne dowody, którymi możesz się pochwalić po wprowadzeniu ulepszeń.
Jeśli masz tylko 5 minut…
Uruchom Lighthouse na stronie głównej i zapisz dane z raportu. Otrzymasz ilościowe dane wyjściowe i listę zadań dotyczących poprawy wydajności, przystępności, bezpieczeństwa i SEO.
Jeśli masz tylko 30 minut…
Najlepiej zacząć od Lighthouse, ale przy odrobinie więcej czasu możesz też rejestrować wyniki z innych narzędzi:
- Panel Bezpieczeństwo w Narzędziach deweloperskich w Chrome: użycie HTTPS.
- Panel sieciowy w Narzędziach deweloperskich Chrome: czasy wczytywania; rozmiary zasobów i liczba żądań dotyczących kodu HTML, arkuszy CSS, skryptów JavaScript, obrazów, czcionek i innych plików.
- Menedżer zadań Chrome: jeśli Twoja witryna stale wykorzystuje znaczną część procesora lub więcej pamięci niż inne aplikacje, być może trzeba będzie rozwiązać problemy z wyciekami pamięci, uruchamianiem zadań lub wczytywaniem zasobów. Pamiętaj, aby przetestować witrynę na urządzeniach, które reprezentują Twoich użytkowników.
- WebPagetest: wydajność w różnych lokalizacjach i typach połączeń, buforowanie, czas do pierwszego bajta, korzystanie z CDN.
- PageSpeed Insights: wydajność wczytywania, koszt danych i wykorzystanie zasobów, w tym dane z raportu na temat użytkowania Chrome, które wskazują na statystyki wydajności w rzeczywistych warunkach.
- Podsumowanie statystyk szybkości i kalkulator wpływu: porównaj szybkość witryny z konkurencją i oszacuj potencjalne możliwości zwiększenia przychodów dzięki poprawie szybkości witryny.
Sprawdź, jak Twoja witryna wygląda dla użytkownika, który odwiedza ją po raz pierwszy. Otwórz stronę 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 lokalnego pamięci podręcznej, co pozwala uzyskać dokładny obraz wydajności podczas pierwszego wczytywania.
Nic nie zastąpi testowania w rzeczywistych warunkach. Wypróbuj swoją witrynę na tych samych urządzeniach i z tymi samymi połączeniami co użytkownicy oraz zapisz swoje subiektywne wrażenia.
Jeśli ilość narzędzi Cię przytłacza…
Zapoznaj się z naszym przewodnikiem Jak korzystać z narzędzi do przyspieszania strony.
Jeśli nie masz innego sposobu, możesz użyć Lighthouse, aby sprawdzić:
- HTTPS: każda witryna powinna dostarczać wszystkie zasoby za pomocą protokołu HTTPS.
- Ustawienia serwera: serwer WWW lub CDN powinien prawidłowo wykorzystywać kompresję, używać HTTP/2 oraz zawierać odpowiednie nagłówki, aby umożliwić przeglądarce buforowanie zasobów.
- Elementy skryptu, które można przenieść na dół strony lub opatrzyć atrybutem async lub defer.
- kod JavaScript i biblioteki, które można usunąć.
- Nieużywany kod CSS i nieużywany kod JavaScript.
- Obrazy, które można zapisać z wyższym współczynnikiem kompresji lub mniejszymi wymiarami pikseli.
- Pliki graficzne, które byłyby mniejsze, gdyby zostały zapisane w innym formacie, np. zdjęcia zapisane jako pliki PNG.
Odbiorcy, interesarze, kontekst
Priorytety refaktoryzacji zależą od odbiorców, treści i funkcji. Kto odwiedza Twoją witrynę? Dlaczego i jak z nich korzystają? Jaki jest Twój budżet na wyniki? Jeśli nie masz pewności, jak odpowiedzieć na te pytania, skorzystaj z ćwiczeń dotyczących zbierania wymagań z naszych materiałów szkoleniowych dotyczących PWAs: Twoi odbiorcy i Twoje treści oraz Projektowanie z myślą o wszystkich użytkownikach.
Kto jest zainteresowany Twoją pracą i co jest dla tych osób najważniejsze? Wpłynie to na sposób strukturyzowania, przedstawiania i udostępniania danych z audytu.
Jeśli nie możesz przeprowadzić audytu całej witryny, sprawdź dane analityczne strony, aby dowiedzieć się, na czym się skupić. Wysokie współczynniki odrzuceń, krótki czas spędzony na stronie i nieoczekiwane strony wyjścia mogą być dobrym wskaźnikiem tego, od czego zacząć. Podobnie dane biznesowe, takie jak koszty hostingu, kliknięcia reklam i konwersje. Dowiedz się od interesariuszy, jakie dane są dla nich ważne.
Testuj, rejestruj, koryguj, powtarzaj
Zapisz stan witryny przed wprowadzeniem jakichkolwiek zmian, aby odkryć problemy i ustalić punkt wyjścia do wprowadzania ulepszeń lub regresji. Dzięki temu masz dane, które uzasadniają i wynagradzają wysiłek związany z rozwojem.
Pamiętaj, aby przetestować różne typy stron w witrynie, a nie tylko stronę główną. W przypadku aplikacji jednostronicowych przetestuj różne komponenty, ścieżki i przepływy interfejsu, a nie tylko pierwsze wczytanie.