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 10 è subito disponibile nella riga di comando tramite npm e in Chrome Canary. Sarà disponibile nella versione stabile di Chrome in Chrome 112 e in PageSpeed Insights nelle prossime settimane.
Variazioni di punteggio
La storica metrica Time To Interactive (TTI) verrà rimossa in Lighthouse 10, concludendo il processo di ritiro avviato in Lighthouse 8. La ponderazione del 10% del TTI verrà spostata in Cumulative Layout Shift (CLS), che ora corrisponderà al 25% del punteggio di rendimento complessivo.
Il TTI contrassegna un momento, ma il modo in cui viene definito lo rende eccessivamente sensibile alle richieste di rete outlier e alle attività lunghe. LCP (Largest Contentful Paint) e Speed Index sono generalmente euristiche migliori per definire i contenuti di una pagina caricati rispetto al conteggio delle richieste di rete attive. Il tempo di blocco totale (TBT) nel frattempo gestisce le attività lunghe e la disponibilità del thread principale in modo più solido e, sebbene non sia un proxy diretto, tende a correlare meglio con i Core Web Vitals misurati sul campo.
L'aumento del peso di CLS è irrilevante alla rimozione di TTI, ma riflette meglio la sua importanza come Core Web Vital e idealmente aumenterà l'attenzione per i siti che apportano ancora variazioni del layout non necessarie.
Ci aspettiamo che questo migliorerà la maggior parte delle pagine di rendimento, poiché la maggior parte delle pagine tende ad avere un punteggio migliore in CLS rispetto a TTI. In un'analisi di 13 milioni di caricamenti di pagine nell'ultima esecuzione di HTTP Archive, il 90% di queste pagine registrerà un miglioramento del punteggio delle prestazioni di Lighthouse, mentre il 50% registrerà un miglioramento delle prestazioni di oltre 5 punti.
Se per qualche motivo hai ancora bisogno del valore TTI di Lighthouse (in un'asserzione CI, ad esempio), è ancora disponibile invariato nell'output JSON di Lighthouse, solo con peso del punteggio 0 e nascosto nel report HTML. Qualsiasi accesso basato su script del valore JSON dovrebbe continuare a funzionare senza modifiche.
Nuovi controlli
Lighthouse 10 introduce un nuovo controllo delle prestazioni e un cambiamento significativo rispetto a un altro.
Cache back/forward
La cache back/forward (bfcache) è uno degli strumenti più potenti disponibili per migliorare le prestazioni di una pagina per gli utenti reali. Oltre alla normale cache del browser, una pagina caricata dalla bfcache ripristinerà il layout e lo stato di esecuzione della pagina quasi istantaneamente, saltando in gran parte tutta l'attività di caricamento della pagina e mostrando la tua pagina immediatamente agli utenti mentre navigano avanti e indietro nella cronologia.
Tuttavia, una pagina può impedire al browser di ripristinare una pagina dalla cache bfcache in diversi modi. Questo nuovo controllo di Lighthouse salta dalla pagina di test e torna indietro per verificare se è compatibile con bfcache ed elenca i motivi dell'esito negativo.
Per ulteriori informazioni, leggi la documentazione del controllo bfcache.
Input che non consente la copia
Il vecchio controllo delle best practice "Consente agli utenti di incollare contenuti nei campi delle password" è stata ampliata per verificare che l'operazione incolla in qualsiasi campo di immissione (non di sola lettura) funzioni. Per la maggior parte dei siti, impedire di incollare è un'esperienza utente nettamente negativa e impedisce flussi di lavoro legittimi di sicurezza e accessibilità.
Il nuovo controllo ora è "Consente agli utenti di incollare nei campi di immissione" (paste-preventing-inputs)
Utenti nodo
Se utilizzi Lighthouse come libreria di nodi, potresti dover tenere conto di alcune modifiche che interrompono la programmazione programmatica in questa release. Per informazioni dettagliate, consulta il log delle modifiche 10.0.
Lighthouse 10 viene fornito anche con dichiarazioni di tipo TypeScript complete. A questo punto dovrebbe essere digitato tutto ciò che viene importato da lighthouse, il che dovrebbe essere particolarmente utile se stai eseguendo lo script di flussi utente di Lighthouse.
Prova i diversi tipi e facci sapere se riscontri problemi durante l'utilizzo.
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 10 di Lighthouse o di qualsiasi altra cosa relativa a Lighthouse:
- Segnala un problema o invia un feedback nel Issue Tracker di GitHub di Lighthouse.
- Poni le tue domande nei forum di discussione di GitHub di Lighthouse.
- Contatta il team di Lighthouse su Twitter @____lighthouse.