Novità di Lighthouse 11

Adam Raine
Adam Raine
GitHub
Jasmine Yan
Jasmine Yan
GitHub

Lighthouse è uno strumento di controllo dei siti web che aiuta gli sviluppatori con opportunità e dati diagnostici per migliorare l'esperienza utente sui loro siti.

Lighthouse 11 è immediatamente disponibile nella riga di comando fino a npm, in Chrome Canary e PageSpeed Insights. Verrà aperta la versione stabile di Chrome in Chrome 118.

Consulta l'elenco completo delle modifiche nel log delle modifiche 11.0.

Aggiornamenti delle categorie di accessibilità

Gli aggiornamenti delle categorie includono nuovi controlli automatici, ponderazione migliorata e controlli manuali prioritari per aiutare gli sviluppatori a rendere i loro siti più accessibili.

Nuovi controlli e ponderazione

A partire da Lighthouse 10.0, sono stati aggiunti 13 nuovi controlli sull'accessibilità:

  • 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

Oltre ai nuovi controlli, i pesi di tutti i controlli sono stati aggiornati per corrispondere meglio ai livelli di impatto della regola aXe corrispondenti. Per i dettagli esatti sui nuovi controlli e ponderazioni, consulta la documentazione relativa al punteggio di accessibilità di Lighthouse.

Visibilità dei controlli manuali

Lighthouse ha sempre incluso alcuni controlli manuali che non possono essere testati automaticamente, ma che sono comunque inclusi come elenco di controllo per verificare funzionalità importanti. La sezione di controllo manuale viene ora espansa automaticamente una volta superati tutti i controlli automatici.

Un report Lighthouse che mostra l'espansione dei controlli manuali nella categoria di accessibilità

Ciò sottolinea che il superamento di tutti i controlli automatici e un punteggio di 100 all'accessibilità non garantisce che la pagina controllata sia accessibile. i test manuali sono comunque importanti. Anche i controlli manuali sono stati riordinati in modo da iniziare con i controlli più accessibili.

Modifiche ai controlli esistenti

Interaction to Next Paint (INP)

L'INP non è più sperimentale, pertanto la metrica è stata spostata da experimental-interaction-to-next-paint a interaction-to-next-paint.

Service worker

Non è più necessario che un service worker possa installare una pagina come PWA in Chrome, pertanto il controllo service-worker è stato rimosso dalla categoria PWA Lighthouse.

Riepilogo delle risorse

Il controllo resource-summary è stato rimosso dal report Lighthouse. Le statistiche sulle richieste di rete possono comunque essere compilate utilizzando il controllo network-requests nascosto:

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);

Navigazione precedente

Il flag --legacy-navigation per l'interfaccia a riga di comando, la funzione legacyNavigation() nell'API Node e la "navigazione legacy" nel riquadro DevTools sono state rimosse. Questo ha completato una transizione lunga anni nell'infrastruttura di Lighthouse per supportare i flussi di utenti.

Lighthouse in esecuzione

Lighthouse è disponibile in Chrome DevTools, npm (come modulo Nodo e strumento dell'interfaccia a riga di comando) e come estensione del browser (in Chrome e Firefox). È inoltre alla base di diversi servizi Google, tra cui PageSpeed Insights.

Per provare l'interfaccia a riga di comando del nodo Lighthouse, usa i comandi seguenti:

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

Contatta il team di Lighthouse

Per discutere delle nuove funzionalità, delle modifiche nella release 11 di Lighthouse o di qualsiasi altra cosa relativa a Lighthouse: