0Pricing
Frontend Academy · Lezione

Controlli Lighthouse automatizzati

Aggiungere la GitHub Action Lighthouse CI, impostare soglie per i punteggi di prestazioni e accessibilità e bloccare i merge che peggiorano i Core Web Vitals

Controlli Lighthouse automatizzati è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Perché automatizzare Lighthouse?

Le esecuzioni manuali di Lighthouse rilevano tardi le regressioni delle prestazioni, di solito dopo che un utente reale si è lamentato. Lighthouse CI automatizzato viene eseguito su ogni PR, interrompe i build che peggiorano le metriche principali e monitora l'andamento dei punteggi nel tempo. Consideri le prestazioni alla stregua di una suite di test.

Lighthouse CI

Il set di strumenti open source Lighthouse CI (lhci) di Google: esegue Lighthouse più volte, calcola la mediana, verifica il rispetto delle soglie e carica i risultati.

npm install -D @lhci/cli

# Run locally:
npx lhci autorun

lighthouserc.json — configurazione

Configuri gli URL da testare, il numero di esecuzioni e le asserzioni.

// lighthouserc.json
{
  "ci": {
    "collect": {
      "url": [
        "http://localhost:3000",
        "http://localhost:3000/blog",
        "http://localhost:3000/pricing"
      ],
      "numberOfRuns": 5,
      "startServerCommand": "npm run start"
    },
    "assert": {
      "assertions": {
        "categories:performance":   ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "categories:seo":            ["warn", { "minScore": 0.9 }],
        "largest-contentful-paint":  ["error", { "maxNumericValue": 2500 }],
        "total-blocking-time":       ["error", { "maxNumericValue": 200 }],
        "cumulative-layout-shift":   ["error", { "maxNumericValue": 0.1 }]
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

Integrazione con GitHub Action

L'azione ufficiale treosh/lighthouse-ci-action esegue lhci su ogni PR e pubblica un controllo di stato.

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]
jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20', cache: 'npm' }
      - run: npm ci && npm run build
      - uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: ./lighthouserc.json
          uploadArtifacts: true
          temporaryPublicStorage: true

Mediana di più esecuzioni

I punteggi di Lighthouse variano tra un'esecuzione e l'altra a causa delle variazioni nei tempi di esecuzione. numberOfRuns: 5 calcola la mediana, abbastanza stabile per essere confrontata con una soglia. Con meno di 3 esecuzioni si ottengono risultati instabili.

Budget delle prestazioni

Oltre ai punteggi, imposti limiti rigidi sulle dimensioni e sul numero delle risorse. Il build fallisce se i limiti vengono superati.

// budget.json
[
  {
    "resourceSizes": [
      { "resourceType": "script", "budget": 300 },
      { "resourceType": "image", "budget": 100 }
    ],
    "resourceCounts": [
      { "resourceType": "third-party", "budget": 10 }
    ]
  }
]

// lighthouserc.json:
"collect": {
  "settings": { "budgetsPath": "./budget.json" }
}

Server Lighthouse CI

Gestisca autonomamente il server LHCI per conservare i dati storici, visualizzare i grafici delle tendenze e confrontare i branch nel tempo. In alternativa, usi uno storage pubblico temporaneo per i risultati di singole PR.

Testare le pagine autenticate

Usi script Puppeteer per effettuare l'accesso prima delle esecuzioni di Lighthouse.

// lighthouserc.json
"collect": {
  "puppeteerScript": "./lighthouse-login.js",
  "url": ["http://localhost:3000/dashboard"]
}

// lighthouse-login.js
module.exports = async (browser, context) => {
  const page = await browser.newPage();
  await page.goto('http://localhost:3000/login');
  await page.fill('#email', 'test@example.com');
  await page.fill('#password', 'test123');
  await page.click('button[type=submit]');
  await page.waitForNavigation();
};

Notifiche Slack/Discord

Invii i risultati di LHCI alla chat del team: le regressioni delle prestazioni meritano la stessa attenzione dei test falliti.

Mobile e desktop

Per impostazione predefinita, Lighthouse usa il mobile (4G lento e CPU di fascia media). Per il desktop, imposti preset: 'desktop'. La maggior parte delle app in produzione dovrebbe essere analizzata in entrambe le modalità, con job separati nella CI.

Calibrare le soglie

Inizi con i punteggi attuali come valori di riferimento. Non faccia fallire le PR dal primo giorno: registri i risultati e mostri prima solo avvisi. Quando il team avrà acquisito familiarità con il workflow, aumenti gradualmente le soglie.

Oltre Lighthouse

Lighthouse fornisce dati di laboratorio. Lo abbini al monitoraggio degli utenti reali (RUM): il pacchetto npm web-vitals insieme al suo sistema di analytics, oppure servizi come SpeedCurve e Calibre, forniscono dati reali sull'andamento delle prestazioni.

Verifica rapida

Perché Lighthouse CI calcola in genere la mediana di più esecuzioni (ad esempio 5) invece di usare una sola esecuzione?

Riepilogo: Lighthouse automatizzato

lhci autorun si integra con la CI. Configuri l'analisi in lighthouserc.json: URL, esecuzioni (5+), asserzioni su categorie e metriche e budget delle prestazioni. Usi treosh/lighthouse-ci-action per GitHub. Gestisca autonomamente il server LHCI per le tendenze. Usi script Puppeteer per le pagine autenticate. Analizzi mobile e desktop. Inizi con gli avvisi e renda le soglie più restrittive nel tempo. Abbini il tutto al RUM per ottenere un quadro completo.

Domande Frequenti

La lezione «Controlli Lighthouse automatizzati» è gratuita?

Sì — il testo completo di «Controlli Lighthouse automatizzati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Controlli Lighthouse automatizzati»?

Aggiungere la GitHub Action Lighthouse CI, impostare soglie per i punteggi di prestazioni e accessibilità e bloccare i merge che peggiorano i Core Web Vitals Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Controlli Lighthouse automatizzati»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. GitHub Actions per il frontend: lint, test e build
  2. Deploy su Vercel, Netlify e Cloudflare Pages
  3. Variabili d’ambiente nella CI
  4. Controlli Lighthouse automatizzati
← Torna a Frontend Academy