Novità di Lighthouse 9.0

Brendan Kenny
Brendan Kenny

Lighthouse è uno strumento di controllo dei siti web che offre agli sviluppatori opportunità e diagnostica per migliorare l'esperienza utente sui loro siti.

Lighthouse 9.0 è subito disponibile nella riga di comando, in Chrome Canary e PageSpeed Insights. Sarà disponibile nella versione stabile di Chrome in Chrome 98.

Modifiche all'API

La maggior parte degli utenti non dovrebbe subire modifiche che interrompono il flusso di lavoro con questa release. Se esegui controlli di Lighthouse personalizzati o utilizzi strumenti che dipendono dai dettagli nel file JSON del report Lighthouse, potresti dover conoscere alcune modifiche che provocano errori nella versione 9.0.

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

Lighthouse per i flussi utente

Lighthouse dispone di una nuova API User-flow che consente test di laboratorio in qualsiasi momento all'interno della durata di una pagina.

Puppeteer viene utilizzato per creare script di caricamenti pagine e attivare interazioni sintetiche degli utenti. Lighthouse può essere richiamato in più modi per acquisire informazioni chiave durante queste interazioni. Ciò significa che le prestazioni possono essere misurate durante il caricamento della pagina e durante le interazioni con la pagina stessa.

Un report sul flusso utente di Lighthouse, che include più passaggi per il caricamento e l'interazione con un sito web, e i risultati del controllo Lighthouse per ogni passaggio

Per saperne di più, consulta il tutorial sui flussi utente di Lighthouse e gli esempi di codice.

Aggiornamento dei report

Il report Lighthouse è stato aggiornato per migliorare la leggibilità e rendere più chiare l'origine del report e il modo in cui è stato eseguito.

Uno screenshot finale è stato incorporato nella parte superiore del report per chiarire a colpo d'occhio se la pagina in fase di test è stata caricata correttamente e se è nel formato previsto.

Un report Lighthouse 9.0 che elenca in modo più evidente le principali metriche sul rendimento e incorpora uno screenshot dell'aspetto finale della pagina nel report sul rendimento.

Anche le informazioni di riepilogo nella parte inferiore del report sono state riprogettate per comunicare meglio come è stato eseguito Lighthouse e come è stato raccolto il report.

La sezione delle impostazioni aggiornate del report Lighthouse, che ora contiene riepiloghi di elementi come la data di acquisizione della pagina, il tipo di emulazione della pagina utilizzata e la versione di Chrome in cui è stato eseguito il test.

Per vedere il nuovo report in azione, prova Lighthouse 9.0 o consulta questo report di esempio.

Un problema di accessibilità comune si verifica quando gli elementi che dovrebbero essere univoci in una pagina non lo sono, ad esempio se l'ID a cui viene fatto riferimento in un attributo aria-labelledby viene utilizzato su più elementi.

Lighthouse ha sempre avvisato di questa situazione, ma elencherà solo la prima istanza di un elemento con un ID ripetuto, il che spesso causava confusione in quanto alcuni utenti presumevano che mostrasse tutti gli elementi a causa del problema. Poiché Lighthouse mostrava solo un singolo elemento, il team presumeva che fosse un bug segnalato come duplicato.

In Lighthouse 9.0, ora sono elencati tutti gli elementi che condividono questo ID:

Un controllo di Lighthouse per "Tutti gli elementi attivabili devono avere un "id" univoco che mostra due elementi, entrambi con lo stesso "id"

Questi "nodi correlati" è fornita da axe-core, pertanto potrebbe comparire anche in altri controlli dell'accessibilità.

Per ulteriori informazioni, consulta il problema di raccolta dei report degli utenti e la richiesta di pull dell'implementazione.

Lighthouse in esecuzione

Lighthouse è disponibile in Chrome DevTools, npm (come modulo Nodo e interfaccia a riga di comando) e come estensione del browser (in Chrome e Firefox). È alla base di molti servizi Google, tra cui web.dev/measure e 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 9.0 o di qualsiasi altra cosa relativa a Lighthouse: