Evoluzione di Lighthouse: integrazione continua, nuova formula del punteggio delle prestazioni e altro ancora

Ricevi gli ultimi aggiornamenti e approfondimenti su Lighthouse dal Chrome Developer Summit 2019.

Elizabeth Sweeny
Elizabeth Sweeny

Durante la discussione sullo Speed Tooling Evolutions al Chrome Developer Summit (CDS), io e Paul Ireland abbiamo presentato i prodotti e le funzionalità più recenti di Google che possono aiutarti a creare e mantenere un'esperienza eccezionalmente veloce per tutti i tuoi utenti. Al centro di questa storia ci sono le aggiunte alla famiglia di strumenti di monitoraggio del rendimento Lighthouse.

Release alpha CI Lighthouse

Il team di Lighthouse ha lanciato la versione alpha di Lighthouse CI, il nuovo prodotto di integrazione continua che consente di eseguire Lighthouse su ogni commit prima di passare in produzione. Lighthouse CI esegue più volte Lighthouse, dichiarando soglie di metriche o controlli statici, quindi carica i report Lighthouse su un server per le differenze visive e la cronologia dei punteggi delle categorie di base. Le configurazioni budgets.json esistenti funzionano perfettamente insieme alla nuova sintassi espressiva per l'affermazione di qualsiasi controllo o risultato di categoria di Lighthouse.

Report Lighthouse CI.

Lighthouse CI supporta pronti all'uso Travis CI, Circle CI e GitHub Actions e qualsiasi servizio CI Ubuntu o basato su container con una certa configurazione. Puoi installare il server CI Lighthouse on-premise o utilizzare un'immagine Docker per la configurazione immediata. Come alternativa, puoi iniziare subito con l'archiviazione senza costi, pubblica e temporanea dei report Lighthouse.

(Disponibili a breve) Aggiornamenti sul punteggio del rendimento

A breve verranno apportate modifiche alla versione 6 del punteggio prestazioni Lighthouse. Nella versione 5 (a partire da novembre 2019), Lighthouse dispone di cinque metriche ponderate e combinate per formare il punteggio prestazioni 0-100: First Contentful Paint, Speed Index, First Meaningful Paint, Time to Interactive e First CPU Idle.

Confronto delle formule del punteggio delle prestazioni di Lighthouse nelle versioni 5 e 6.

Per informazioni dettagliate, consulta la pagina relativa al punteggio delle prestazioni di Lighthouse.

In Lighthouse versione 6, le nuove metriche Largest Contentful Paint (LCP) e Total Block Time (TBT), sostituiscono la prima CPU Idle (FCI) e la First Meaningful Paint (FMP). I pesi di ciascuna delle cinque metriche verranno adattati per bilanciare meglio le diverse fasi delle misure di carico e interattività.

Il team di Lighthouse sta ancora lavorando per garantire che tutte le curve dei punteggi siano perfezionate e le metriche siano mature e testate a fondo. Il suo obiettivo è distribuire il punteggio sulle prestazioni di Lighthouse v6 a gennaio 2020.

Pacchetti di stack Lighthouse

Lighthouse può rilevare automaticamente se i siti utilizzano un framework o un sistema di gestione dei contenuti (CMS) e includere nel report consigli specifici per stack. Gli Stack Pack aggiungono consigli personalizzati, a cura di esperti della community (come te), in aggiunta ai controlli principali dei report Lighthouse.

Suggerimento del report Lighthouse per il differimento delle immagini fuori schermo nelle applicazioni React.

Al momento sono disponibili pacchetti di stack per Angular, WordPress, Magento, React e AMP. Per creare il tuo pacchetto di stack, visita il repository GitHub o contatta il team di Lighthouse.

(Disponibile a breve) Plug-in Lighthouse come estensioni di Chrome

Icona del plug-in Lighthouse.

I plug-in Lighthouse sono un altro modo per sfruttare l'estensibilità di Lighthouse. Sono molti i controlli di qualità che attualmente i controlli principali di Lighthouse non riguardano, perché sono applicabili solo a un sottoinsieme di sviluppatori o perché il team non aveva ancora la larghezza di banda necessaria per creare i controlli.

I plug-in Lighthouse consentono agli esperti della community di implementare una nuova serie di controlli che Lighthouse può eseguire e aggiungere al report come nuova categoria. Al momento, i plug-in funzionano solo nell'interfaccia a riga di comando di Lighthouse, ma l'obiettivo è abilitarne l'esecuzione anche nel riquadro Controlli di DevTools.

Riquadro Controlli di Chrome DevTools con le opzioni per eseguire i plug-in Lighthouse per gli annunci per i publisher di Google e l'esperienza utente.
Plug-in della community nel riquadro Controlli DevTools (beta)

Quando gli utenti installano le estensioni dei plug-in Lighthouse dal Chrome Web Store, DevTools identificherà i plug-in installati e li offrirà come opzione nel riquadro Controlli. Il team di Lighthouse si occuperà di supportare l'approccio basato sui plug-in nei prossimi mesi, quindi continuate a seguirci. Nel frattempo, puoi creare un plug-in come modulo nodo e renderlo accessibile a tutti gli utenti Lighthouse tramite l'interfaccia a riga di comando.

Scopri di più

Per maggiori dettagli su Lighthouse e su altri aggiornamenti degli strumenti per le prestazioni di CDS 2019, guarda l'articolo sulle evoluzioni degli strumenti per le prestazioni:

Il tuo feedback è inestimabile per migliorare Lighthouse, quindi continua e prova Lighthouse CI, scrivi uno Stack Pack o crea un plug-in Lighthouse e facci sapere cosa ne pensi.