Lighthouse to narzędzie, które pomaga mierzyć i poprawiać wydajność strony. Oto ogólny sposób korzystania z Lighthouse:
- Wskazujesz Lighthouse, którą stronę przeprowadzić.
- Lighthouse wczytuje tę stronę i rejestruje czas potrzebny na osiągnięcie różnych progów wydajności. Te etapy nazywane są metrics.
- Lighthouse wygeneruje raport o skuteczności strony. Raport zawiera wynik poszczególnych danych oraz listę możliwości, które, jeśli je zastosujesz, powinny przyspieszyć wczytywanie strony.
Twoim celem jest poprawianie wyników wskaźników z czasem lub przynajmniej zadbanie o to, aby się nie pogorszyły. Nie ma jednak możliwości bezpośredniej pracy na danych. Zamiast tego będziesz korzystać z możliwości oferowanych przez Lighthouse. Praca nad takimi możliwościami zwykle poprawia wyniki wskaźników.
Uruchom Lighthouse na stronie profilu
Uruchom Lighthouse ze strony profilu web.dev:
Podaj dowolny adres URL, a Lighthouse przeprowadzi serię kontroli i wygeneruje raport o skuteczności strony.
Zapoznaj się z raportem z kontroli, aby zidentyfikować obszary, w których możesz ulepszyć swoją stronę.
Podczas każdego audytu otrzymasz wskazówki i natychmiastowe kroki, które możesz podjąć, aby poprawić swoje wyniki.
Uruchom Lighthouse z Narzędzi deweloperskich w Chrome
Narzędzia deweloperskie w Chrome to zestaw wbudowanych w przeglądarkę Google Chrome narzędzi dla programistów internetowych. Nie musisz niczego pobierać, aby korzystać z Narzędzi deweloperskich. Jeśli używasz Chrome, masz do dyspozycji Narzędzia deweloperskie.
- W Chrome otwórz stronę, którą chcesz sprawdzić.
- Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
Kliknij kartę Kontrole. Jeśli nie widzisz tej karty, kliknij symbol » i wybierz z listy Audyty. Lighthouse to mechanizm, który obsługuje panel Audits. Dlatego widzisz obraz latarni morskiej.
- Upewnij się, że opcja Urządzenia mobilne jest zaznaczona. Gdy Lighthouse będzie sprawdzał Twoją stronę, symuluje widoczny obszar i ciąg znaków klienta użytkownika na urządzeniu mobilnym.
- Upewnij się, że pole wyboru Wydajność jest zaznaczone. Pozostałe pola wyboru w sekcji Kontrole możesz włączać i wyłączać. Jeśli je włączysz, zobaczysz różne możliwości ulepszenia tych elementów strony.
- Upewnij się, że jest zaznaczona opcja Simulationd Fast 3G, 4x CPU Slowdown (Symulowany szybki 3G, 4x spowolnienie procesora). Lighthouse nie reguluje szybkości sieci ani procesora podczas wczytywania strony. Sprawdza natomiast, ile czasu zajęło wczytanie strony w normalnych warunkach, a następnie określa, ile czasu zajmie to w szybkiej sieci 3G z czterokrotnie mniejszym procesorem niż Twój komputer.
- Upewnij się, że pole wyboru Wyczyść pamięć jest zaznaczone. Powoduje to, że Lighthouse przechodzi do sieci w przypadku każdego zasobu strony, tak aby użytkownicy, którzy odwiedzają ją po raz pierwszy, przechodzą do sieci.
- Kliknij Przeprowadź audyty. Po 5–10 sekundach narzędzie Lighthouse wyświetli raport.
Jeśli na przykład przeprowadzasz niektóre kontrole z wykorzystaniem symulowanej szybkiej sieci 3G, włączonego ograniczania spowolnienia procesora czterokrotnie, a potem przeprowadzasz kontrole z wyłączonym ograniczaniem, wyniki wskaźników będą znacznie niższe przy włączonym ograniczaniu. Może się zdarzyć, że będziesz poświęcać dużo czasu na określenie, dlaczego strona działa obecnie tak wolniej. W rzeczywistości zmieniła się tylko konfiguracja.
Interpretowanie raportu
W prawym górnym rogu raportu znajduje się ogólny wynik skuteczności. 100 to doskonały wynik. Poniżej wyniku ogólnego znajdują się wyniki wskaźników. W przewodniku po ocenianiu Lighthouse v3 wyjaśniamy, jak każdy z wskaźników wpływa na całościowy wynik.
Aby dowiedzieć się więcej o danych, najedź kursorem na dane. Kliknij Więcej informacji, aby zapoznać się z dokumentacją tej usługi.
Pod wynikami wskaźników zobaczysz zrzuty ekranu przedstawiające wygląd strony podczas wczytywania.
Pod zrzutami ekranu widać możliwości poprawy wydajności strony.
Kliknij możliwość, aby dowiedzieć się więcej na jej temat.
Dalsze kroki
Użyj narzędzia Lighthouse, aby sprawdzić swoją stronę – możesz to zrobić na stronie profilu lub w Narzędziach deweloperskich w Chrome. Zastosuj jedną z możliwości, a potem jeszcze raz sprawdź stronę, by zobaczyć, jak zmiana wpłynęła na raport. Twoje wyniki wskaźników powinny być trochę lepsze, a Lighthouse nie powinien już informować o możliwościach do pracy.
Korzystanie z Lighthouse doskonale sprawdza się przy wykrytym monitorowaniu problemów, ale warto skonfigurować stałe monitorowanie, aby mieć pewność, że witryna działa prawidłowo. Aby śledzić postępy w korzystaniu z Lighthouse z upływem czasu, dodaj witrynę do swojego profilu.