Impara come implementare Lighthouse CI per il frontend per il monitoraggio continuo delle prestazioni, garantendo velocità e user experience ottimali per le tue applicazioni web.
Lighthouse CI per il Frontend: Monitoraggio Continuo delle Prestazioni per Applicazioni Web
Nel panorama digitale odierno, caratterizzato da ritmi serrati, le prestazioni di un sito web sono fondamentali. Un sito web lento a caricarsi o scarsamente ottimizzato può portare a utenti frustrati, a un calo del coinvolgimento e, in definitiva, a un impatto negativo sulla tua attività. È qui che entra in gioco Lighthouse CI. Questa guida ti illustrerà come implementare Lighthouse CI per il monitoraggio continuo delle prestazioni, consentendoti di identificare e risolvere proattivamente i colli di bottiglia prima che influiscano sui tuoi utenti.
Cos'è Lighthouse CI?
Lighthouse CI è uno strumento open-source e automatizzato per i test di performance che si integra perfettamente nella tua pipeline di Integrazione Continua e Consegna Continua (CI/CD). Sfrutta lo strumento di audit Lighthouse di Google per fornire informazioni utili sulle prestazioni, l'accessibilità, la SEO e le best practice del tuo sito web. Integrando Lighthouse CI nel tuo flusso di lavoro, puoi monitorare continuamente le prestazioni del tuo sito, tracciare le regressioni e garantire che ogni modifica al codice contribuisca a una migliore esperienza utente. Lighthouse CI non è legato a un provider cloud specifico e può essere utilizzato con diverse configurazioni. Ad esempio, può essere eseguito all'interno di un container Docker su servizi come Github Actions, Jenkins, CircleCI e molti altri.
Perché usare Lighthouse CI?
L'implementazione di Lighthouse CI offre una moltitudine di vantaggi:
- Rilevamento precoce delle regressioni di performance: Identifica i problemi di performance introdotti dalle nuove modifiche al codice prima che raggiungano la produzione.
- Prestazioni del sito web migliorate: Ottieni informazioni utili su come ottimizzare il tuo sito web per velocità, accessibilità e SEO.
- Esperienza utente ottimizzata: Offri un sito web più veloce e intuitivo che mantenga i visitatori coinvolti.
- Riduzione della frequenza di rimbalzo: Ottimizza i tempi di caricamento per ridurre la frustrazione degli utenti ed evitare che lascino il tuo sito.
- Aumento dei tassi di conversione: Un sito web più veloce porta in genere a tassi di conversione più elevati e a migliori risultati di business.
- Test di performance automatizzati: Integra i test di performance nella tua pipeline di CI/CD per un monitoraggio continuo.
- Processo decisionale basato sui dati: Basa i tuoi sforzi di ottimizzazione su metriche e dati concreti sulle prestazioni.
- Tracciamento delle prestazioni a lungo termine: Monitora le prestazioni del tuo sito web nel tempo per identificare le tendenze e misurare l'impatto delle tue ottimizzazioni.
Caratteristiche principali di Lighthouse CI
- Audit automatizzati: Esegue gli audit di Lighthouse automaticamente come parte del tuo processo di CI/CD.
- Budget di performance: Imposta budget di performance per garantire che il tuo sito web rimanga entro soglie di prestazione accettabili.
- Tracciamento delle regressioni: Traccia le regressioni di performance nel tempo, consentendoti di identificare le modifiche al codice che le hanno causate.
- Informazioni utili e attuabili: Fornisce report dettagliati con raccomandazioni pratiche su come migliorare le prestazioni del tuo sito web.
- Configurazione personalizzabile: Configura Lighthouse CI per soddisfare le tue esigenze e requisiti specifici.
- Integrazione con strumenti di CI/CD: Si integra perfettamente con i più diffusi strumenti di CI/CD come Jenkins, CircleCI, GitHub Actions e GitLab CI.
- Open Source: Lighthouse CI è un progetto open-source, il che significa che è gratuito da usare e modificare.
Impostazione di Lighthouse CI: Una guida passo dopo passo
Ecco una guida completa per impostare Lighthouse CI per il tuo progetto:
1. Installa la CLI di Lighthouse CI
Per prima cosa, devi installare l'interfaccia a riga di comando (CLI) di Lighthouse CI a livello globale usando npm o yarn:
npm install -g @lhci/cli
yarn global add @lhci/cli
2. Configura Lighthouse CI
Crea un file lighthouserc.js nella root del tuo progetto per configurare Lighthouse CI. Questo file definisce gli URL da analizzare, le regole di asserzione e altre opzioni di configurazione.
Ecco un esempio di base di un file lighthouserc.js:
module.exports = {
ci:
{
collect: {
url: ['http://localhost:3000', 'http://localhost:3000/about']
},
assert: {
preset: 'lighthouse:recommended'
},
upload: {
target: 'temporary-public-storage'
},
},
};
Spiegazione:
collect.url: Specifica gli URL da sottoporre ad audit da parte di Lighthouse. In questo esempio, stiamo analizzando la homepage e la pagina "about" di un sito web in esecuzione sulocalhost:3000. Ricorda di sostituire questi URL con quelli pertinenti al *tuo* progetto, che potrebbero includere ambienti di staging.assert.preset: Utilizza il presetlighthouse:recommended, che applica un insieme di asserzioni predefinite basate sulle raccomandazioni di Lighthouse. Questo è un buon punto di partenza, ma puoi personalizzare queste asserzioni secondo necessità.upload.target: Configura dove verranno caricati i risultati di Lighthouse CI.temporary-public-storageè utile per test e sviluppo, ma per gli ambienti di produzione, in genere si desidera utilizzare una soluzione di archiviazione più persistente (discussa più avanti).
3. Integra Lighthouse CI nella tua pipeline di CI/CD
Il passo successivo è integrare Lighthouse CI nella tua pipeline di CI/CD. I passaggi esatti varieranno a seconda del tuo provider di CI/CD, ma il processo generale prevede l'aggiunta di uno script alla configurazione di CI/CD che esegue i comandi di Lighthouse CI.
Esempio con GitHub Actions:
Crea un file chiamato .github/workflows/lighthouse-ci.yml nel tuo repository con il seguente contenuto:
name: Lighthouse CI
on:
push:
branches: [main]
pull_request:
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: '16.x'
- name: Install dependencies
run: npm ci
- name: Run Lighthouse CI
run: |
npm install -g @lhci/cli@0.11.x
lhci autorun
Spiegazione:
on.push.branches: Attiva il workflow sui push al branchmain.on.pull_request: Attiva il workflow sulle pull request.jobs.lighthouse.runs-on: Specifica il sistema operativo da utilizzare per il job (Ubuntu in questo caso).steps: Definisce i passaggi da eseguire nel job:actions/checkout@v3: Effettua il checkout del repository.actions/setup-node@v3: Imposta Node.js.npm ci: Installa le dipendenze.Run Lighthouse CI: Esegue i comandi di Lighthouse CI:npm install -g @lhci/cli@0.11.x: Installa la CLI di Lighthouse CI a livello globale. *Importante*: è sempre consigliato bloccare una versione specifica.lhci autorun: Esegue Lighthouse CI in modalità "autorun", che raccoglie automaticamente gli audit, asserisce i budget di performance e carica i risultati.
Considerazioni importanti per l'integrazione CI/CD:
- Avvio del server: Prima di eseguire
lhci autorun, assicurati che il tuo server web sia in esecuzione (ad es.npm start). Potrebbe essere necessario aggiungere un passaggio alla configurazione di CI/CD per avviare il server in background. - Migrazioni del database: Se la tua applicazione si basa su un database, assicurati che le migrazioni del database vengano eseguite come parte del processo di CI/CD *prima* di eseguire Lighthouse CI.
- Variabili d'ambiente: Se la tua applicazione richiede variabili d'ambiente, assicurati che siano configurate correttamente nel tuo ambiente di CI/CD.
4. Esegui Lighthouse CI
Ora, ogni volta che effettui un push di modifiche al branch main o crei una pull request, il workflow di Lighthouse CI verrà eseguito automaticamente. I risultati saranno disponibili nell'interfaccia di GitHub Actions.
5. Visualizza i risultati di Lighthouse CI
I risultati di Lighthouse CI verranno caricati nella posizione specificata nel tuo file lighthouserc.js (ad es. temporary-public-storage). Puoi accedere a questi risultati seguendo il link fornito nell'output del CI/CD. Questi risultati forniscono informazioni dettagliate sulle prestazioni, l'accessibilità, la SEO e le best practice del tuo sito web.
Configurazione di asserzioni e budget di performance
Lighthouse CI ti consente di configurare asserzioni e budget di performance per garantire che il tuo sito web raggiunga i tuoi obiettivi di prestazione. Le asserzioni sono regole che controllano metriche di performance specifiche (ad es. First Contentful Paint, Largest Contentful Paint) rispetto a soglie predefinite. I budget di performance definiscono limiti accettabili per varie metriche di prestazione.
Ecco un esempio di come configurare le asserzioni nel tuo file lighthouserc.js:
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000']
},
assert: {
assertions: {
'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }],
'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
'total-blocking-time': ['warn', { maxNumericValue: 500 }],
'categories:performance': ['warn', { minScore: 0.9 }],
'categories:accessibility': ['error', { minScore: 0.8 }],
}
},
upload: {
target: 'temporary-public-storage'
},
}
};
Spiegazione:
first-contentful-paint: Imposta una soglia di avviso per il First Contentful Paint (FCP) a 2000ms.largest-contentful-paint: Imposta una soglia di avviso per il Largest Contentful Paint (LCP) a 2500ms.cumulative-layout-shift: Imposta una soglia di avviso per il Cumulative Layout Shift (CLS) a 0.1.total-blocking-time: Imposta una soglia di avviso per il Total Blocking Time (TBT) a 500ms.categories:performance: Imposta una soglia di avviso per il punteggio complessivo della categoria Performance a 0.9.categories:accessibility: Imposta una soglia di errore per il punteggio complessivo della categoria Accessibilità a 0.8.
Livelli di asserzione:
off: Disabilita l'asserzione.warn: Mostra un avviso se l'asserzione fallisce.error: Fa fallire l'esecuzione di Lighthouse CI se l'asserzione fallisce.
Personalizzazione delle asserzioni:
Puoi personalizzare le asserzioni per soddisfare le tue esigenze specifiche. Ad esempio, potresti voler impostare soglie più rigide per le metriche di performance critiche o disabilitare le asserzioni che non sono rilevanti per la tua applicazione.
Scegliere una destinazione di upload per Lighthouse CI
L'opzione upload.target nel tuo file lighthouserc.js specifica dove verranno caricati i risultati di Lighthouse CI. La destinazione temporary-public-storage è comoda per i test e lo sviluppo, ma non è adatta per gli ambienti di produzione perché i dati non sono persistenti.
Ecco alcune destinazioni di upload alternative:
- Server Lighthouse CI: L'approccio consigliato per gli ambienti di produzione è utilizzare il server Lighthouse CI. Il server Lighthouse CI fornisce una soluzione di archiviazione persistente per i tuoi risultati, oltre a un'interfaccia utente per visualizzare e analizzare i dati. Può essere distribuito su vari provider cloud o ospitato sulla tua infrastruttura.
- Google Cloud Storage: Puoi caricare i risultati di Lighthouse CI in un bucket di Google Cloud Storage. Questa è una soluzione economica e scalabile per archiviare i tuoi dati.
- Amazon S3: Similmente a Google Cloud Storage, puoi caricare i risultati di Lighthouse CI in un bucket di Amazon S3.
Configurazione del server Lighthouse CI:
La configurazione del server Lighthouse CI prevede i seguenti passaggi:
- Installa il server Lighthouse CI: Puoi installare il server Lighthouse CI usando npm o yarn:
- Configura il database: Il server Lighthouse CI richiede un database per memorizzare i suoi dati. Puoi usare una varietà di database, tra cui PostgreSQL, MySQL e SQLite. Configura le impostazioni di connessione al database nel file
.env. - Avvia il server Lighthouse CI: Avvia il server Lighthouse CI usando il comando
lhci server. - Configura la CLI di Lighthouse CI per usare il server: Aggiorna il tuo file
lighthouserc.jsper usare il server Lighthouse CI come destinazione di upload:
npm install -g @lhci/server
yarn global add @lhci/server
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000']
},
assert: {
preset: 'lighthouse:recommended'
},
upload: {
target: 'lhci',
serverBaseUrl: 'http://your-lhci-server.com',
token: 'YOUR_LHCI_TOKEN'
},
}
};
Sostituisci http://your-lhci-server.com con l'URL del tuo server Lighthouse CI e YOUR_LHCI_TOKEN con il token di accesso per il tuo progetto.
Best practice per l'uso di Lighthouse CI
Per ottenere il massimo da Lighthouse CI, segui queste best practice:
- Esegui Lighthouse CI a ogni modifica del codice: Integra Lighthouse CI nella tua pipeline di CI/CD per eseguire audit su ogni modifica del codice. Questo ti aiuterà a individuare precocemente le regressioni di performance.
- Imposta budget di performance: Definisci budget di performance per garantire che il tuo sito web rimanga entro soglie di prestazione accettabili.
- Monitora le tendenze delle prestazioni: Tieni traccia delle prestazioni del tuo sito web nel tempo per identificare le tendenze e misurare l'impatto delle tue ottimizzazioni.
- Dai priorità agli sforzi di ottimizzazione: Concentrati prima sull'ottimizzazione delle metriche di performance più critiche.
- Usa dati del mondo reale: Usa dati del mondo reale per informare i tuoi sforzi di ottimizzazione. Ad esempio, puoi usare Google Analytics per identificare le pagine più visitate dai tuoi utenti.
- Testa su dispositivi reali: Testa il tuo sito web su dispositivi reali per assicurarti che funzioni bene in condizioni reali.
- Rivedi regolarmente i risultati di Lighthouse CI: Assicurati di rivedere regolarmente i risultati di Lighthouse CI e di agire per risolvere eventuali problemi di performance identificati.
- Ottimizza le immagini: Ottimizza le tue immagini per ridurne le dimensioni del file senza sacrificare la qualità. Strumenti come ImageOptim (macOS), TinyPNG e ImageKit sono utili a questo scopo.
- Minifica CSS e JavaScript: Minifica i tuoi file CSS e JavaScript per ridurne le dimensioni. Strumenti come UglifyJS e CSSNano possono aiutare in questo.
- Sfrutta la cache del browser: Sfrutta la cache del browser per ridurre il numero di richieste che il tuo sito web fa al server.
- Usa una Content Delivery Network (CDN): Usa una CDN per distribuire i contenuti del tuo sito web su server in tutto il mondo. Ciò può migliorare i tempi di caricamento per gli utenti in diverse località geografiche. Servizi come Cloudflare e Amazon CloudFront sono CDN popolari.
- Differisci le immagini fuori schermo: Implementa il lazy loading per le immagini che non sono immediatamente visibili sullo schermo. Ciò può migliorare significativamente il tempo di caricamento iniziale della pagina. L'attributo
loading="lazy"può essere utilizzato per un semplice lazy loading. - Elimina le risorse che bloccano il rendering: Identifica ed elimina le risorse che bloccano il rendering della tua pagina. Questo spesso comporta l'inlining del CSS critico e il differimento di CSS e JavaScript non critici.
- Riduci il tempo di esecuzione di JavaScript: Analizza il tuo codice JavaScript per identificare e ottimizzare le funzioni a esecuzione lenta. Tecniche come il code splitting e il tree shaking possono aiutare a ridurre la quantità di JavaScript che deve essere scaricata ed eseguita.
Tecniche avanzate di Lighthouse CI
Una volta che hai familiarità con le basi di Lighthouse CI, puoi esplorare alcune tecniche avanzate per migliorare ulteriormente il monitoraggio delle prestazioni:
- Audit Lighthouse personalizzati: Puoi creare audit Lighthouse personalizzati per testare problemi di performance specifici rilevanti per la tua applicazione.
- Configurazione di Headless Chrome: Configura Headless Chrome per utilizzare emulazioni di dispositivi specifici o impostazioni di throttling della rete.
- Integrazione con strumenti di monitoraggio: Integra Lighthouse CI con i tuoi strumenti di monitoraggio esistenti (ad es. New Relic, Datadog) per ottenere una visione più completa delle prestazioni del tuo sito web.
- Test di regressione visiva: Combina Lighthouse CI con strumenti di test di regressione visiva per rilevare modifiche visive che potrebbero avere un impatto sulle prestazioni.
Lighthouse CI per un pubblico globale: Considerazioni per siti web internazionali
Quando si utilizza Lighthouse CI per siti web destinati a un pubblico globale, considerare quanto segue:
- Testa da più località: I tempi di risposta del server possono variare in modo significativo in base alla posizione dell'utente. Usa una CDN (Content Delivery Network) e considera di eseguire gli audit di Lighthouse CI da diverse regioni geografiche per ottenere un quadro più accurato delle prestazioni per i tuoi utenti internazionali. Alcuni provider di CI/CD offrono opzioni per specificare la posizione geografica del runner.
- Tieni conto delle condizioni di rete: Le velocità di rete e la latenza variano ampiamente in tutto il mondo. Simula diverse condizioni di rete durante i tuoi audit di Lighthouse CI per capire come si comporta il tuo sito web sotto vari vincoli. Lighthouse ti permette di limitare la connessione di rete, simulando connessioni più lente come il 3G.
- Localizzazione dei contenuti: Assicurati che i tuoi contenuti localizzati siano correttamente ottimizzati. Ciò include l'ottimizzazione delle immagini per diverse lingue e set di caratteri e una corretta codifica per evitare problemi di visualizzazione.
- Caricamento dei font: Ottimizza il caricamento dei font per le diverse lingue. Considera l'uso di font-display: swap per evitare che il testo sia invisibile durante il caricamento del font.
- Script di terze parti: Fai attenzione agli script di terze parti, poiché possono avere un impatto significativo sulle prestazioni, specialmente per gli utenti in regioni con connessioni di rete più lente. Controlla regolarmente le prestazioni degli script di terze parti e considera l'uso del caricamento asincrono o l'auto-hosting degli script critici.
- Ottimizzazione per dispositivi mobili: L'uso dei dispositivi mobili è prevalente in molte parti del mondo. Assicurati che il tuo sito web sia ottimizzato per i dispositivi mobili e che i tuoi audit di Lighthouse CI includano test specifici per i dispositivi mobili.
Risoluzione dei problemi comuni di Lighthouse CI
Ecco alcuni problemi comuni che potresti incontrare quando usi Lighthouse CI e come risolverli:
- Lighthouse CI fallisce con errore "Timeout": Questo può accadere se il tuo sito web impiega troppo tempo a caricarsi o se Lighthouse CI non riesce a connettersi al tuo sito. Prova ad aumentare il valore del timeout nel tuo file
lighthouserc.jso controlla i log del server del tuo sito per errori. - Lighthouse CI riporta risultati incoerenti: I risultati di Lighthouse possono variare leggermente tra un'esecuzione e l'altra a causa delle condizioni di rete o di altri fattori. Esegui più audit per ottenere una media più stabile.
- Lighthouse CI non riesce a caricare i risultati: Controlla la tua configurazione
upload.targete assicurati che il tuo server Lighthouse CI sia in esecuzione e accessibile. Inoltre, verifica di aver configurato il token di accesso corretto. - Lighthouse CI riporta regressioni di performance inaspettate: Indaga sulle modifiche al codice che sono state apportate prima che la regressione fosse rilevata. Usa i report di Lighthouse CI per identificare le metriche di performance specifiche che sono peggiorate e concentra i tuoi sforzi di ottimizzazione su quelle aree.
Conclusione
Lighthouse CI per il frontend è uno strumento potente per il monitoraggio continuo delle prestazioni delle applicazioni web. Integrando Lighthouse CI nella tua pipeline di CI/CD, puoi identificare e risolvere proattivamente i problemi di performance, garantendo che il tuo sito web offra un'esperienza utente ottimale. Ricorda di adattare la tua configurazione, le regole di asserzione e le località di test per un pubblico globale al fine di creare la migliore esperienza possibile per gli utenti di tutto il mondo.
Seguendo i passaggi e le best practice descritte in questa guida, puoi migliorare significativamente le prestazioni del tuo sito web, ridurre la frequenza di rimbalzo, aumentare i tassi di conversione e, in definitiva, raggiungere i tuoi obiettivi di business. Inizia a implementare Lighthouse CI oggi stesso e sblocca il pieno potenziale delle tue applicazioni web.