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

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.

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.

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à.

Nota: Cumulative Layout Shift (CLS) è un'altra nuova metrica ancora in fase di perfezionamento e che alla fine dovrebbe entrare a far parte del punteggio Lighthouse Performance.

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.

Nota: a volte i tecnici delle prestazioni ritengono che i risultati relativi agli strumenti per la velocità siano difficili da riprodurre a causa di due sfide discrete: variabilità e incoerenza tra ambienti. La variabilità è il problema di vedere che i numeri cambiano anche quando l'ambiente di test rimane lo stesso. L'incoerenza cross-environment è dovuta al fatto di ottenere risultati diversi durante l'esecuzione dei test sulla stessa pagina, ma in ambienti diversi (ad esempio DevTools e PageSpeed Insights). Anche se il team di Lighthouse sta studiando dei modi per mitigare la variabilità, è utile comprendere le fonti della variabilità e come gestirla. Il team di Lighthouse sta anche esaminando i metodi di calibrazione per ridurre le differenze tra gli ambienti, ma è giusto aspettarsi che condizioni e hardware diversi portino a misurazioni diverse, almeno per il momento.

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.

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

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.

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.