Lighthouse to narzędzie, które pomaga mierzyć i znajdować sposoby na poprawę szybkości działania strony. Oto ogólny proces korzystania z Lighthouse:
- Wskazujesz Lighthouse, którą stronę chcesz sprawdzić.
- Lighthouse wczytuje tę stronę i rejestruje, ile czasu zajmuje jej wczytanie do różnych etapów pomiaru wydajności. Te kamienie milowe nazywamy danymi.
- Lighthouse udostępnia raport o wydajności strony. Raport zawiera wynik dla każdego wskaźnika oraz listę możliwości, które po wdrożeniu powinny przyspieszyć wczytywanie strony.
Twoim zadaniem jest poprawianie wyników w miarę upływu czasu lub przynajmniej dbanie o to, aby nie pogarszały się. Nie można jednak bezpośrednio modyfikować danych. Zamiast tego możesz skorzystać z możliwości, które oferuje Lighthouse. Wykorzystanie tych możliwości zwykle poprawia wyniki pomiarów.
Uruchamianie Lighthouse na stronie profilu
Uruchom Lighthouse na stronie profilu web.dev:
Wpisz dowolny adres URL, a Lighthouse przeprowadzi serię audytów i wygeneruje raport o wydajności strony.
Przejrzyj raport z audytu, aby znaleźć obszary, które można ulepszyć.
W przypadku każdego audytu znajdziesz wskazówki i działania, które możesz podjąć, aby poprawić swoje wyniki.
Uruchamianie Lighthouse z Narzędzi deweloperskich w Chrome
Narzędzia deweloperskie w Chrome to zestaw narzędzi dla programistów stron internetowych wbudowany w przeglądarkę Google Chrome. Aby uzyskać dostęp do DevTools, nie musisz niczego pobierać. Jeśli masz Chrome, masz też Narzędzia deweloperskie.
- W Chrome otwórz stronę, którą chcesz sprawdzić.
- Aby otworzyć Narzędzia dla programistów, naciśnij `Control+Shift+J` (lub `Command+Option+J` na Macu).
Kliknij kartę Sprawdzanie. Jeśli nie widzisz tej karty, kliknij symbol » i na liście wybierz Sprawdzanie. Lighthouse to silnik, który obsługuje panel Audyty. Dlatego widzisz obraz latarni morskiej.
- Upewnij się, że zaznaczona jest opcja Mobile (Komórka). Podczas audytu strony Lighthouse symuluje widok strony i ciąg agenta użytkownika na urządzeniu mobilnym.
- Upewnij się, że pole wyboru Wydajność jest zaznaczone. Pozostałe pola wyboru możesz włączyć lub wyłączyć w sekcji Sprawdzanie. Jeśli je włączysz, zobaczysz wiele możliwości ulepszenia tych aspektów strony.
- Sprawdź, czy zaznaczona jest opcja Symulowana szybka sieć 3G, 4-krotne spowolnienie procesora. Podczas wczytywania strony Lighthouse nie ogranicza przepustowości sieci ani procesora. Zamiast tego sprawdza, ile czasu zajęło załadowanie strony w normalnych warunkach, a potem szacuje, ile zajęłoby to w szybkiej sieci 3G z procesorem 4 razy słabszym niż ten w Twoim urządzeniu.
- Upewnij się, że pole wyboru Wyczyść pamięć jest zaznaczone. Ta opcja zmusza Lighthouse do korzystania z sieci dla każdego zasobu strony, co pozwala sprawdzić, jak strona wygląda dla nowych użytkowników.
- Kliknij Uruchom kontrolę. Po 5–10 sekundach Lighthouse wyświetli raport.
Jeśli na przykład wykonasz audyt z symulowanym trybem szybkiego 3G i 4-krotnym spowolnieniem CPU (throttling włączony), a potem z throttlingiem wyłączonym, wyniki pomiarów będą znacznie niższe, gdy throttling będzie włączony. Możesz poświęcić dużo czasu na próby zrozumienia, dlaczego Twoja strona jest teraz tak dużo wolniejsza, podczas gdy jedyną rzeczą, która się zmieniła, jest konfiguracja.
Interpretowanie raportu
W prawym górnym rogu raportu znajdziesz ogólny wynik skuteczności. 100 to doskonały wynik. Pod wynikiem ogólnym znajdują się wyniki danych. Przewodnik po ocenie Lighthouse w wersji 3 zawiera informacje o tym, jak poszczególne dane wpływają na ogólną ocenę.
Aby dowiedzieć się więcej o danym rodzaju danych, najedź na niego kursorem. Aby przeczytać dokumentację, kliknij Więcej informacji.
Pod wynikami wskaźników znajdziesz zrzuty ekranu pokazujące, jak wyglądała strona podczas wczytywania.
Pod zrzutami ekranu znajdziesz możliwości poprawy wydajności strony.
Kliknij możliwość, aby dowiedzieć się o niej więcej.
Dalsze kroki
Spróbuj użyć Lighthouse do sprawdzenia strony, korzystając ze strony profilu lub z Narzędzi deweloperskich w Chrome. Wprowadź jedną z możliwości, a potem ponownie zweryfikuj stronę, aby sprawdzić, jak zmiana wpłynęła na raport. Wyniki Twoich danych powinny być w tym momencie nieco lepsze, a Lighthouse nie powinien już wskazywać tej możliwości jako wymagającej poprawy.
Uruchamianie Lighthouse jest świetnym sposobem na szybkie sprawdzenie problemów, ale ostatecznie warto skonfigurować ciągły monitoring, aby mieć pewność, że witryna będzie w dobrym stanie. Aby śledzić postępy w przypadku Lighthouse na przestrzeni czasu, dodaj swoją witrynę do profilu.