Lighthouse è uno strumento di controllo dei siti web che aiuta gli sviluppatori con opportunità e strumenti di diagnostica per migliorare l'esperienza utente sui loro siti.
Lighthouse 10 è disponibile immediatamente sulla 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.
Modifiche ai punteggi
La importante metrica Tempo all'interattività (TTI) verrà rimossa in Lighthouse 10, concludendo il processo di ritiro avviato in Lighthouse 8. Il peso del punteggio del 10% di TTI passerà a Cumulative Layout Shift (CLS), che ora rappresenterà il 25% del punteggio di rendimento complessivo.
TTI contrassegna un momento specifico, ma il modo in cui viene definito lo rende eccessivamente sensibile alle richieste di rete outlier e alle attività lunghe. Largest Contentful Paint (LCP) e Indice di velocità sono in genere euristiche migliori per i contenuti di una pagina che sembrano essere 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 essere correlato meglio ai Segnali web essenziali misurati sul campo.
L'aumento di peso di CLS è legato alla rimozione di TTI, ma riflette meglio la sua importanza come Segnale web essenziale e idealmente aumenterà l'attenzione per i siti che continuano a fare variazioni del layout non necessarie.
Ci aspettiamo che ciò migliori i punteggi di rendimento della maggior parte delle pagine, poiché la maggior parte delle pagine tende a ottenere un punteggio migliore in base al CLS rispetto al TTI. In un'analisi di 13 milioni di caricamenti di pagine nell'ultima esecuzione di HTTP Archive, il 90% di queste pagine rileverebbe un miglioramento del punteggio delle prestazioni di Lighthouse, e il 50% di queste ha riscontrato un miglioramento delle prestazioni di oltre 5 punti.
Se per qualche motivo devi ancora avere il valore TTI di Lighthouse (ad esempio in un'asserzione CI), rimane disponibile invariato nell'output JSON di Lighthouse, solo con un punteggio di ponderazione pari a 0 e nascosto nel report HTML. Qualsiasi accesso tramite script del valore JSON dovrebbe continuare a funzionare senza modifiche.
Nuovi controlli
Lighthouse 10 apporta un nuovo controllo delle prestazioni e apporta una modifica significativa 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. Al di là della normale cache del browser, una pagina caricata dalla bfcache ripristinerà il layout della pagina e lo stato di esecuzione quasi istantaneamente, saltando in gran parte tutte le attività di caricamento delle pagine e facendo in modo che la pagina venga visualizzata immediatamente dagli utenti mentre navigano avanti e indietro nella cronologia.
Esistono però alcuni modi in cui una pagina può impedire al browser di ripristinarla dalla cache back-forward. Questo nuovo controllo di Lighthouse esce dalla pagina di test e torna di nuovo per verificare se è compatibile con la cache bfcache ed elenca i motivi dell'esito negativo.
Per ulteriori informazioni, consulta la documentazione relativa al controllo della cache bfcache.
Input che impediscono la incolla
Il vecchio controllo delle best practice "Consente agli utenti di incollare contenuti nei campi delle password" è stato ampliato per verificare che incollare 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 contenuti nei campi di immissione" (paste-preventing-inputs).
Utenti nodo
Se utilizzi Lighthouse come libreria di nodi, in questa release potresti dover tenere conto di alcune modifiche che provocano l'interruzione della pubblicità programmatica. Per informazioni dettagliate, consulta il log delle modifiche 10.0.
Lighthouse 10 viene fornito con dichiarazioni complete per il tipo di TypeScript. Ora tutto il testo importato da lighthouse deve essere digitato, il che dovrebbe essere particolarmente utile se stai creando lo script dei flusso utente di Lighthouse.
Prova i tipi e non esitare a contattarci in caso di problemi con il loro utilizzo.
Faro 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, 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 alla release 10 di Lighthouse 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.