Nowości w Lighthouse 11

Adam Raine
Adam Raine
GitHub
Jasmine Yan
Jasmine Yan
GitHub

Lighthouse to narzędzie do kontroli witryn, które pomaga deweloperom korzystać z możliwości i diagnostyki, aby zwiększać wygodę użytkowników korzystających z ich witryn.

Narzędzie Lighthouse 11 jest dostępne bezpośrednio w wierszu poleceń za pomocą npm, w Chrome Canary oraz w PageSpeed Insights. Będzie ona dostępna w stabilnej wersji Chrome w wersji 118.

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

Zmiany w kategorii ułatwień dostępu

Aktualizacje kategorii obejmują nowe automatyczne audyty, ulepszoną wagę i priorytetowe audyty ręczne, aby ułatwić deweloperom zwiększenie dostępności witryn.

Nowe kontrole i ważenie

Od wersji Lighthouse 10.0 dodaliśmy 13 nowych audytów 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

Zaktualizowaliśmy też wagi wszystkich audytów, aby lepiej pasowały do odpowiednich poziomów wpływu reguł axe. Szczegółowe informacje o nowych audytach i ważeniach znajdziesz w dokumentacji oceny ułatwień dostępu w Lighthouse.

Widoczność kontroli ręcznej

Narzędzie Lighthouse zawsze uwzględniało kontrole ręczne, których nie można przetestować automatycznie. Znajdziesz je jednak na liście kontrolnej służącej do weryfikacji ważnych funkcji. Sekcja kontroli ręcznej jest teraz automatycznie rozwinięta po pomyślnym zakończeniu wszystkich kontroli automatycznych.

Raport Lighthouse przedstawiający rozwinięte ręczne audyty w kategorii ułatwień dostępu

Podkreśla to, że przejście wszystkich kontroli automatycznych i uzyskanie 100 w zakresie ułatwień dostępu nie gwarantuje, że skontrolowana strona będzie dostępna – nadal ważne są testy ręczne. Zmieniliśmy też kolejność audytów ręcznych, tak aby rozpoczynały się od kontroli, które są najłatwiejsze.

Zmiany w istniejących kontrolach

od interakcji do kolejnego wyrenderowania (INP)

Wartość INP nie jest już eksperymentalna, więc została ona przeniesiona z experimental-interaction-to-next-paint do interaction-to-next-paint.

Skrypty service worker

Skrypt service worker nie jest już wymagany do zainstalowania strony jako PWA w Chrome, więc kontrola service-worker została usunięta z kategorii Lighthouse dla aplikacji.

Podsumowanie zasobu

Kontrola resource-summary została usunięta z raportu Lighthouse. Statystyki żądań sieciowych można nadal zestawiać 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);

Starsza nawigacja

Flaga --legacy-navigation interfejsu wiersza poleceń, funkcja legacyNavigation() w interfejsie Node API oraz pole wyboru „Starsza wersja nawigacji” w panelu Narzędzi deweloperskich zostały usunięte. W ten sposób zakończyliśmy wieloletnie przejście w infrastrukturze Lighthouse na obsługę przepływów użytkowników.

Uruchomiona latarnia morska

Narzędzie Lighthouse jest dostępne w Chrome DevTools, npm (jako moduł węzłów i narzędzie interfejsu wiersza poleceń) oraz jako rozszerzenie do przeglądarki (w Chrome i Firefoksie). Jest też obsługiwany przez kilka usług Google, w tym 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 porozmawiać o nowych funkcjach, zmianach w wersji Lighthouse 11 lub o innych kwestiach związanych z Lighthouse: