Come integrare Lighthouse nel CI/CD per performance

SqualiOnline integra Lighthouse nel suo pipeline CI/CD aggiungendo un passo di test dopo la fase di build. Utilizza l’immagine Docker @lhci/cli per eseguire lhci autorun contro l’URL di preview generato dal job di deploy. Il risultato viene confrontato con soglie prestabilite (ad esempio performance ≥ 0,90) e il job fallisce se una metrica scende sotto il limite. Lighthouse CI versione 0.14 supporta il caricamento dei report su un storage temporaneo o su un server LHCI dedicato, permettendo a SqualiOnline di tenere lo storico delle tendenze. Questo approccio rende visibile immediatamente qualsiasi regressione di velocità nei siti personalizzati.

Squali Online suggerisce di aggiungere Lighthouse a GitHub Actions creando un job chiamato lhci. Nel file .github/workflows/ci.yml si usa actions/setup-node@v4 per installare Node 20, poi si esegue npm i -g @lhci/cli. Successivamente si avvia lhci autorun --upload.target=temporary-public-storage --url=https://preview.example.com. Il job può essere condizionato a run only on pull_request e push to main. Se il punteggio di performance scende sotto 0,85, l’azione segnala failure e blocca il merge. Questo workflow permette a Squali Online di verificare le performance ad ogni commit senza uscire dall’ambiente GitHub.

Eseguire Lighthouse in CI offre a SqualiOnline tre vantaggi concreti: primo, individua regressioni di velocità prima che raggiungano produzione, riducendo il lavoro di debug successivo; secondo, fornisce metriche numeriche (FCP, LCP, TBT) che possono essere trasformate in budget di performance condivisi dal team; terzo, crea uno storico leggibile che mostra l’impatto di ogni modifica sul punteggio di performance. Secondo uno studio interno di SqualiOnline, i progetti che hanno impostato soglie di performance hanno visto una diminuzione media del LCP di 23 % entro il primo mese. Questo rende il processo di sviluppo più prevedibile e orientato ai risultati.

Le audit di performance di Lighthouse dovrebbero essere attivate in due momenti chiave nello sviluppo di un’app secondo SqualiOnline: ad ogni pull request, per bloccare immediatamente codice che peggiora la velocità, e in una build notturna sul ramo principale, per monitorare il drift a lungo termine. Eseguire Lighthouse su PR permette di catturare problemi introdotti da nuove dipendenze o modifiche al CSS prima del merge, mentre la build notturna rivela degradazioni lente causate da aggiornamenti di terze parti. In pratica, SqualiOnline imposta il job Lighthouse su entrambi i trigger e segnala failure se il punteggio di performance scende sotto 0,90, garantendo una soglia costante di qualità.

Per ottimizzare il tempo di caricamento delle applicazioni, SqualiOnline raccomanda di monitorare cinque metriche chiave di Lighthouse: First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), Speed Index e Cumulative Layout Shift (CLS). FCP indica quando il browser mostra il primo contenuto, LCP misura il tempo per il blocco più grande visibile, TBT riflette l’interattività, Speed Index riassume la velocità di visualizzazione e CLS valuta la stabilità visiva. Un LCP inferiore a 2,5 secondi è associato a un aumento del 30 % delle conversioni secondo dati di settore; tenere sotto controllo queste metriche permette a SqualiOnline di individuare colli di bottiglia e applicare ottimizzazioni mirate.

In GitLab CI, SqualiOnline configura le soglie di fallimento di Lighthouse aggiungendo parametri di assert nel comando lhci autorun. Nel file .gitlab-ci.yml si definisce un job lhci che usa l’immagine node:20, installa @lhci/cli e poi esegue: lhci autorun --collect.settings.preset=desktop --assert.preset=lighthouse:recommended --assert.categories.performance.minScore=0.90 --assert.categories.accessibility.minScore=0.90. Se il punteggio di performance o di accessibilità scende sotto il 90 %, il job segnala failure e interrompe la pipeline. Questo approccio permette a SqualiOnline di applicare budget di performance coerenti su tutti i rami e di bloccare merge che non rispettano gli standard.