Dlaczego i co?
O korzyściach, jakie dają techniki progresywnej aplikacji internetowej, pewnie już wiecie. Być może zechcesz od razu zacząć korzystać z funkcji PWA. Jest to możliwe, ale znacznie lepiej wyjdzie od Ciebie, jeśli wcześniej zabierzesz się za obsługę PWA.
Żadne funkcje PWA nie rozwiązują problemów, takich jak blokowanie JavaScriptu czy duże obrazy. PWA potrzebują solidnych podstaw.
Jak sprawdzić kondycję swojej witryny? Pierwszym krokiem jest przeprowadzenie audytu witryny: obiektywna analiza, co działa dobrze oraz gdzie (i w jaki sposób) można ją poprawić.
Kontrola witryny lub aplikacji pomoże Ci zbudować stabilną i wydajną obsługę oraz wyróżnić szybkie efekty, które można wdrożyć przy minimalnym aprobowaniu. Audyt stanowi również punkt odniesienia dla programowania opartego na danych. Czy zmiana sprawiła, że sytuacja się zmieniła? Jak Twoja witryna wypada na tle konkurencji? Otrzymasz wskaźniki, które pozwolą Ci nadać priorytet wysiłkowi, 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 raportu. Otrzymasz określony punkt odniesienia oraz listę rzeczy do zrobienia, które pomogą Ci zwiększyć wydajność, dostępność, bezpieczeństwo i SEO.
Jeśli masz tylko 30 minut...
Nadal najlepiej zacząć od Lighthouse, ale później możesz też zacząć rejestrować efekty za pomocą innych narzędzi:
- Panel Zabezpieczenia w Narzędziach deweloperskich w Chrome: użycie protokołu HTTPS.
- Panel sieci w Narzędziach deweloperskich w Chrome: czas wczytywania, rozmiary zasobów i liczbę żądań kodu HTML, CSS, JavaScript, obrazów, czcionek i innych plików.
- Menedżer zadań Chrome: jeśli Twoja witryna stale zużywa procesor lub więcej pamięci niż inne aplikacje, może być konieczne rozwiązanie problemów z wyciekami pamięci, uruchomionymi zadaniami lub wczytywaniem zasobów. Przetestuj swoją witrynę na urządzeniach reprezentatywnych dla Twoich użytkowników.
- WebPagetest: wydajność dla różnych lokalizacji i typów połączeń, buforowanie, czas do pierwszego bajtu, wykorzystanie CDN.
- Pagespeed Insights: wydajność wczytywania, koszt danych i wykorzystanie zasobów, w tym dane z Raportu na temat użytkowania Chrome zawierające rzeczywiste statystyki wydajności.
- Podsumowanie statystyk dotyczących szybkości i Kalkulator wpływu: porównaj szybkość witryny z wynikami innych wydawców i oszacuj potencjalne możliwości zarobkowe związane z poprawą szybkości witryny.
Przetestuj swoją witrynę tak, jak widzi ją po raz pierwszy. Otwórz witrynę w oknie incognito (prywatne) 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 lokalnej pamięci podręcznej, co zapewnia dokładny obraz wydajności pierwszego wczytywania.
Nic nie przebije prawdziwego testowania – wypróbuj witrynę z tych samych urządzeń i możliwości połączenia, z jakimi korzystają jej użytkownicy, i zapisuj swoje subiektywne odczucia.
Jeśli wydaje Ci się, że gama narzędzi jest zdumiewająca...
Zajrzyj do naszego przewodnika: How To Think about Speed Tools (Jak myśleć o narzędziach do zarządzania szybkością).
Jeśli nic więcej, po prostu użyj Lighthouse, aby sprawdzić:
- HTTPS: każda witryna powinna przesyłać wszystkie zasoby przez HTTPS.
- Ustawienia serwera: serwer WWW lub sieć CDN powinny prawidłowo używać kompresji, używać HTTP/2 i uwzględnić odpowiednie nagłówki, aby umożliwić przeglądarce buforowanie zasobów.
- Elementy skryptu, które można przenieść na dół strony lub mają atrybut asynchroniczny bądź opóźniony.
- Skrypty JavaScript i biblioteki, które można usunąć.
- nieużywany kod CSS i nieużywany kod JavaScript;
- Obrazy, które można zapisać przy wyższej kompresji lub mniejszych pikselach.
- pliki graficzne, które można zapisać w innym formacie, np. zdjęcia zapisane w formacie PNG.
Odbiorcy, zainteresowane osoby, kontekst
Priorytety refaktoryzacji zależą od odbiorców, treści i funkcji. Kto odwiedza Twoją witrynę? Dlaczego i jak to robią? Jaki masz budżet skuteczności? Jeśli nie znasz odpowiedzi na te pytania, zapoznaj się z wymaganiami i ćwiczeniami z zakresu aplikacji PWA, które znajdziesz w naszych materiałach szkoleniowych na temat aplikacji PWA: Twoi odbiorcy, Twoje treści i Projektowanie dla wszystkich użytkowników.
Kim są zainteresowane osoby i jakie są ich priorytety? Wpłynie to na sposób porządkowania, prezentowania i udostępniania danych z kontroli.
Jeśli nie możesz skontrolować całej witryny, sprawdź statystyki stron, aby dowiedzieć się, na czym należy się skupić. Dobrym wskaźnikiem tego, od czego należy zacząć, są wysoki współczynnik odrzuceń, krótki czas spędzony na stronie i nieoczekiwane strony wyjściowe. Podobnie jest w przypadku danych biznesowych, takich jak koszty hostingu, kliknięcia reklam i konwersje. Dowiedz się od zainteresowanych osób, jakie dane są dla nich ważne.
Testuj, nagrywaj, poprawiaj i powtarzaj
Zapisz stan witryny przed wprowadzeniem jakichkolwiek zmian, by wykryć problemy i ustalić punkt wyjścia do ulepszeń lub regresji. To daje dane, które uzasadniają i nagradzają pracochłonność rozwoju.
Pamiętaj, aby przetestować wiele typów stron w witrynie – nie tylko stronę główną. W przypadku aplikacji na jednej stronie przetestuj różne komponenty, trasy i przepływy UX, a nie tylko pierwsze wczytywanie.