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 zwiększaniu wygody użytkowników witryn.

Lighthouse 11 jest już dostępny w wierszu poleceń za pomocą npm, w Chrome Canary i PageSpeed Insights. Zostanie ona dodana do stabilnej wersji Chrome w Chrome 118.

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

Aktualizacje kategorii Ułatwienia dostępu

Aktualizacje kategorii obejmują nowe automatyczne audyty, ulepszoną wagę i priorytetowe ręczne audyty, które mają pomóc deweloperom w ułatwieniu dostępu do witryn.

Nowe kontrole i wagi

Od wersji Lighthouse 10.0 dodano 13 nowych audytów dostępności:

  • 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 zaktualizowaliśmy wagi wszystkich audytów, aby lepiej pasowały do odpowiednich poziomów wpływu reguł aXe. Szczegółowe informacje o nowych audytach i ich wadze znajdziesz w dokumentacji Lighthouse – ocenianie dostępności.

Widoczność ręcznego sprawdzania

Narzędzie Lighthouse zawsze zawierało niektóre ręczne kontrole, których nie można przeprowadzić automatycznie, ale które są nadal uwzględniane jako lista kontrolna do weryfikacji ważnych funkcji. Sekcja ręcznego sprawdzania jest teraz automatycznie rozwijana po zakończeniu wszystkich automatycznych kontroli.

Raport Lighthouse z rozwiniętymi ręcznymi audytami w kategorii dostępności

Oznacza to, że przejście wszystkich automatycznych audytów i uzyskanie 100 punktów w kategorii ułatwień dostępu nie gwarantuje, że zweryfikowana strona jest dostępna. Ręczne testowanie jest nadal ważne. Ręczne kontrole zostały też pogrupowane w taki sposób, aby na początku wyświetlały się te, które są najprostsze.

Zmiany w dotychczasowych audytach

Interakcja do kolejnego wyrenderowania (INP)

Dane INP nie są już eksperymentalne, więc zostały przeniesione z poziomu experimental-interaction-to-next-paint na interaction-to-next-paint.

Skrypty service worker

Aby strona mogła być zainstalowana jako PWA w Chrome, nie jest już wymagany pracownik usługi, więc z kategorii PWA w Lighthouse usunięto sprawdzenie service-worker.

Podsumowanie zasobu

Kontrola resource-summary została usunięta z raportu Lighthouse. Statystyki dotyczące żądań sieci 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 nawigacja

Usunięto flagę --legacy-navigation dla interfejsu wiersza poleceń, funkcję legacyNavigation() w interfejsie Node API oraz pole wyboru „Stara nawigacja” w panelu DevTools. To kończy wieloletnie przejście na infrastrukturę Lighthouse, która obsługuje ścieżki użytkownika.

Uruchamianie Lighthouse

Lighthouse jest dostępny 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 wersji Lighthouse 11 lub inne kwestie związane z tym narzędziem: