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 w diagnostyce i wykorzystywaniu możliwości, aby poprawić wygodę użytkowników.

Narzędzie Lighthouse 11 jest dostępne natychmiast w wierszu poleceń przez npm, w Chrome Canary i w PageSpeed Insights. Pojawi się ona w stabilnej wersji Chrome 118.

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

Aktualizacje kategorii ułatwień dostępu

Aktualizacje kategorii obejmują nowe automatyczne kontrole, ulepszone ważenie i priorytetowe kontrole ręczne, które pomagają deweloperom zwiększać dostępność 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

Oprócz nowych audytów zaktualizowane zostały też wagi wszystkich kontroli, aby lepiej pasowały do odpowiednich poziomów wpływu reguł aXe. Szczegółowe informacje o nowych kontrolach i wagach znajdziesz w dokumentacji oceniania ułatwień dostępu w Lighthouse.

Widoczność ręcznego audytu

W Lighthouse zawsze uwzględniano pewne ręczne audyty, których nie można przetestować automatycznie, ale nadal są one uwzględniane jako lista kontrolna służąca do weryfikacji ważnych funkcji. Sekcja dotycząca ręcznej kontroli jest teraz rozwinięta automatycznie po zakończeniu wszystkich automatycznych kontroli.

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

Podkreśla to, że przejście wszystkich zautomatyzowanych audytów i punkt 100 w zakresie ułatwień dostępu nie gwarantuje, że dana strona będzie dostępna. testowanie ręczne jest nadal ważne. Zmieniliśmy też kolejność kontroli ręcznych, by rozpocząć od najbardziej przystępnych kontroli.

Zmiany w istniejących kontrolach

Od interakcji do kolejnego wyrenderowania (INP)

INP nie jest już w fazie eksperymentalnej, więc przeniesiono go z kategorii experimental-interaction-to-next-paint do kategorii interaction-to-next-paint.

Skrypty service worker

Skrypt service worker nie jest już wymagany, aby stronę można było zainstalować w Chrome jako PWA, dlatego test service-worker został usunięty z kategorii PWA Lighthouse.

Podsumowanie zasobu

Kontrola resource-summary została usunięta z raportu Lighthouse. Statystyki żądań sieciowych można nadal kompilować za pomocą ukrytego audytu 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 wersja nawigacji

flaga --legacy-navigation interfejsu wiersza poleceń, funkcji legacyNavigation() w interfejsie Node API i starszej nawigacji. w panelu Narzędzi deweloperskich zostały usunięte. Jest to już długotrwałe przejście w infrastrukturze Lighthouse z myślą o obsłudze przepływów użytkowników.

Uruchomiona latarnia morska

Narzędzie Lighthouse jest dostępne w Narzędziach deweloperskich w Chrome, npm (jako moduł węzła i narzędzie wiersza poleceń) oraz jako rozszerzenie przeglądarki (w Chrome i Firefoksie). Obsługuje również kilka usług Google, w tym PageSpeed Insights.

Aby wypróbować interfejs wiersza poleceń węzła w Lighthouse, użyj tych poleceń:

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

Skontaktuj się z zespołem Lighthouse

Jeśli chcesz porozmawiać o nowych funkcjach, zmianach w Lighthouse 11 lub innych kwestiach związanych z Lighthouse: