Lighthouse è uno strumento di controllo dei siti web che aiuta gli sviluppatori con opportunità e diagnostica per migliorare l'esperienza utente dei loro siti.
Lighthouse 9.0 è disponibile immediatamente sulla riga di comando, in Chrome Canary e in PageSpeed Insights. Verrà inserito nella versione stabile di Chrome in Chrome 98.
Modifiche all'API
La maggior parte degli utenti non dovrebbe eseguire modifiche che interrompono il flusso di lavoro con questa release. Se esegui controlli di Lighthouse personalizzati o utilizzi strumenti che dipendono dai dettagli nel JSON del report Lighthouse, potrebbero verificarsi alcune modifiche che provocano errori nella versione 9.0 di cui devi essere a conoscenza.
Consulta l'elenco completo delle modifiche nel log delle modifiche 9.0.
Lighthouse per i flussi degli utenti
Lighthouse ha una nuova API per i flussi utente che consente di eseguire test di laboratorio in qualsiasi momento della durata di una pagina.
Puppeteer viene utilizzato per creare script dei caricamenti delle pagine e attivare le interazioni sintetiche degli utenti e Lighthouse può essere richiamato in diversi modi per acquisire informazioni chiave durante queste interazioni. Ciò significa che il rendimento può essere misurato durante il caricamento della pagina e durante le interazioni con la pagina.
Per saperne di più, consulta il tutorial dei flussi utente di Lighthouse e gli esempi di codice.
Aggiornamento del report
Il report Lighthouse è stato aggiornato per migliorare la leggibilità e rendere più chiara l'origine del report e il modo in cui è stato eseguito.
Abbiamo incorporato uno screenshot finale nella parte superiore del report per capire a colpo d'occhio se la pagina in fase di test è stata caricata correttamente e se è nel formato previsto.
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.
Per vedere come funziona il nuovo report, prova Lighthouse 9.0 o consulta questo report di esempio.
Elementi di accessibilità correlati
Un problema comune di accessibilità 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 elencava solo la prima istanza di un elemento con un ID ripetuto, il che spesso causava confusione perché alcuni utenti presumevano che fossero mostrati tutti gli elementi che causano il problema. Poiché Lighthouse mostrava un solo elemento, presumevano che si fosse trattato di un bug, a causa del quale il singolo elemento veniva segnalato come duplicato.
In Lighthouse 9.0 vengono elencati tutti gli elementi che condividono questo ID:
Questa funzionalità "nodi correlati" è fornita da axe-core, quindi può essere inclusa anche in altri controlli di accessibilità.
Per saperne di più, consulta il problema relativo alla raccolta delle segnalazioni degli utenti e la richiesta di pull dell'implementazione.
Faro 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, utilizza i seguenti comandi:
npm install -g lighthouse
lighthouse https://www.example.com --view
Contatta il team di Lighthouse
Per parlare delle nuove funzionalità, delle modifiche apportate alla release 9.0 o di qualsiasi altra cosa relativa a Lighthouse:
- Segnala un problema o invia un feedback tramite il Issue Tracker su GitHub di Lighthouse.
- Poni domande nei forum di discussione di GitHub di Lighthouse.
- Contatta il team di Lighthouse su Twitter @____lighthouse.