Nowości w Lighthouse 11

Adam Raine
Adam Raine
GitHub
Jasmine Yan
Jasmine Yan
GitHub

Lighthouse to narzędzie do przeprowadzania audytów witryn, które pomaga deweloperom w znajdowaniu możliwości i diagnozowaniu problemów, aby mogli poprawić wrażenia użytkowników korzystających z ich witryn.

Narzędzie Lighthouse 11 jest dostępne od razu w wierszu poleceń przez npm, w Chrome Canary i w PageSpeed Insights. W stabilnej wersji Chrome pojawi się w Chrome 118.

Pełną listę zmian znajdziesz w dzienniku zmian wersji 11.0.

Aktualizacje kategorii ułatwień dostępu

Aktualizacje kategorii obejmują nowe automatyczne audyty, ulepszone ważenie i priorytetowe audyty ręczne, które pomagają deweloperom zwiększać dostępność witryn.

Nowe kontrole i wagi

Od wersji Lighthouse 10.0 dodaliśmy 13 nowych kontroli ułatwień dostępu:

  • aria-allowed-role
  • aria-dialog-name
  • aria-text
  • html-xml-lang-mismatch
  • image-redundant-alt
  • input-button-name
  • label-content-name-mismatch
  • link-in-text-block
  • select-name
  • skip-link
  • table–duplicate-name
  • table-fake-caption
  • td-has-header

Oprócz nowych kontroli zaktualizowaliśmy wagi wszystkich kontroli, aby lepiej odpowiadały poziomom wpływu reguł aXe. Szczegółowe informacje o nowych kontrolach i wagach znajdziesz w dokumentacji dotyczącej oceny ułatwień dostępu w Lighthouse.

Widoczność kontroli ręcznej

Lighthouse zawsze zawiera pewne kontrole ręczne, których nie można przetestować automatycznie, ale są one uwzględnione jako lista kontrolna do weryfikacji ważnych funkcji. Sekcja kontroli ręcznej jest teraz automatycznie rozwijana, gdy wszystkie kontrole automatyczne zakończą się powodzeniem.

Raport Lighthouse z rozwiniętymi kontrolami ręcznymi w kategorii ułatwień dostępu

Podkreśla to, że przejście wszystkich automatycznych kontroli i uzyskanie wyniku 100 w zakresie ułatwień dostępu nie gwarantuje, że sprawdzana strona jest dostępna. Testowanie ręczne jest nadal ważne. Zmieniliśmy też kolejność kontroli ręcznych, aby zaczynały się od najprostszych.

Zmiany w istniejących audytach

Interakcja do kolejnego wyrenderowania (INP)

Wskaźnik INP nie jest już eksperymentalny, więc został przeniesiony z experimental-interaction-to-next-paint do interaction-to-next-paint.

Skrypty service worker

Skrypt service worker nie jest już wymagany, aby stronę można było zainstalować jako PWA w Chrome, więc kontrola service-worker została usunięta z kategorii PWA w Lighthouse.

Podsumowanie zasobu

Kontrola resource-summary została usunięta z raportu Lighthouse. Statystyki żądań sieciowych można nadal kompilować za pomocą ukrytej kontroli network-requests:

const {lhr} = await lighthouse('https://example.com');
const networkRequests = lhr.audits['network-requests'].details.items;
const resourceSummary = {};

for (const request of networkRequests) {
  let total = resourceSummary[request.resourceType] || 0;
  total += request.resourceSize;
  resourceSummary[request.resourceType] = total;
}

console.log(resourceSummary);

Starszy tryb nawigacji

Flaga --legacy-navigation w interfejsie wiersza poleceń, funkcja legacyNavigation() w interfejsie Node API i pole wyboru „Starsza nawigacja” w panelu Narzędzi deweloperskich zostały usunięte. To zwieńczenie wieloletniego procesu przekształcania infrastruktury Lighthouse w celu obsługi wzorców przeglądania.

Uruchamianie Lighthouse

Narzędzie Lighthouse jest dostępne w Narzędziach deweloperskich w Chrome, npm (jako moduł Node i narzędzie CLI) oraz jako rozszerzenie do przeglądarki (w Chrome i Firefox). Jest też używany w kilku usługach Google, m.in. w PageSpeed Insights.

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

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

Kontakt z zespołem Lighthouse

Aby omówić nowe funkcje, zmiany w Lighthouse 11 lub inne kwestie związane z Lighthouse: