Nowości w Lighthouse 9.0

Brendan Kenny
Brendan Kenny

Lighthouse to narzędzie do kontroli witryn, które pomaga deweloperom w tworzeniu możliwości i diagnostyki, które pomagają poprawić wrażenia użytkowników korzystających z ich stron.

Narzędzie Lighthouse 9.0 jest dostępne bezpośrednio w wierszu poleceń, w Chrome Canary i w PageSpeed Insights. Będzie ona działać stabilnie w Chrome w wersji 98.

Zmiany interfejsu API

Większość użytkowników nie powinna zauważyć w tej wersji żadnych zmian, które zablokują przepływ pracy. Jeśli przeprowadzasz niestandardowe audyty Lighthouse lub używasz narzędzi opartych na szczegółach w pliku JSON raportu Lighthouse, możesz zauważyć pewne zmiany powodujące niezgodność w wersji 9.0, o których musisz wiedzieć.

Pełną listę zmian znajdziesz w historii zmian 9.0.

Lighthouse dla przepływów użytkowników

Lighthouse ma nowy interfejs API przepływu użytkowników, który umożliwia testowanie modułów w dowolnym momencie w okresie życia strony.

Puppeteer służy do tworzenia skryptów wczytywanych stron i wywoływania syntetycznych interakcji użytkowników, a Lighthouse można wywoływać na wiele sposobów, aby rejestrować kluczowe statystyki w trakcie tych interakcji. Oznacza to, że wydajność można mierzyć podczas wczytywania strony oraz podczas interakcji z nią.

raport dotyczący przepływu użytkowników w Lighthouse, który obejmuje wiele etapów wczytywania strony i interakcji z nią, a także wyniki kontroli Lighthouse dotyczące każdego kroku

Więcej informacji znajdziesz w samouczku dotyczącym procesu użytkownika w Lighthouse i przykładowym kodzie.

Odświeżenie raportu

Raport Lighthouse został odświeżony, aby zwiększyć czytelność oraz ułatwić zrozumienie źródła raportu i sposobu jego uruchomienia.

Końcowy zrzut ekranu został umieszczony w górnej części raportu, dzięki czemu od razu będzie widać, czy testowana strona wczytuje się prawidłowo i ma oczekiwany format.

raport Lighthouse 9.0, który zawiera najważniejsze dane o skuteczności w widoczny sposób i zawiera zrzut ekranu z ostatecznym wyglądem strony w raporcie skuteczności.

Przeprojektowaliśmy również informacje podsumowujące u dołu raportu, aby lepiej informowały o sposobie działania narzędzia Lighthouse i sposobie zbierania raportu.

Zaktualizowana sekcja ustawień w raporcie Lighthouse, która zawiera teraz podsumowania elementów takich jak czas przechwycenia strony, typ użytej emulacji strony i wersja Chrome, w której przeprowadzono test.

Aby zobaczyć, jak działa nowy raport, wypróbuj Lighthouse 9.0 lub otwórz ten przykładowy raport.

Typowy problem z ułatwieniami dostępu występuje wtedy, gdy elementy, które powinny być unikalne na stronie, nie są na przykład używane w wielu elementach – identyfikator, do którego odwołuje się atrybut aria-labelledby.

Narzędzie Lighthouse zawsze ostrzegało o takiej sytuacji, ale wyświetlało tylko pierwsze wystąpienie elementu z powtórzonym identyfikatorem, co często powodowało dezorientację, ponieważ niektórzy użytkownicy zakładali, że pokazuje wszystkie elementy powodujące problem. W przypadku narzędzia Lighthouse było wyświetlanie tylko 1 elementu, więc zakładali, że był to błąd, który oznaczał jako duplikat tego pojedynczego elementu.

W Lighthouse 9.0 wyświetlają się wszystkie elementy, które współdzielą ten identyfikator:

Audyt w Lighthouse dla „Wszystkich elementów, które można zaznaczyć” musi mieć unikalny „identyfikator” obejmujący 2 elementy, oba o tym samym identyfikatorze.

Ta funkcja „powiązanych węzłów” jest udostępniana przez axe-core, więc może się też pojawić w innych kontrolach ułatwień dostępu.

Więcej informacji znajdziesz w artykułach o zbieraniu zgłoszeń użytkowników o problemach i o prośbie o wdrożenie.

Uruchomiona latarnia morska

Narzędzie Lighthouse jest dostępne w Narzędziach deweloperskich w Chrome, npm (jako moduł węzłów i interfejs wiersza poleceń) oraz jako rozszerzenie do przeglądarki (w Chrome i Firefoksie). Obsługuje wiele usług Google, w tym web.dev/measure i PageSpeed Insights.

Aby wypróbować interfejs wiersza poleceń Lighthouse, użyj tych poleceń:

npm install -g lighthouse
lighthouse https://www.example.com --view

Skontaktuj się z zespołem Lighthouse

Żeby omówić nowe funkcje, zmiany w wersji 9.0 lub inne kwestie związane z Lighthouse: