Frontend Academy · Leçon

Vérifications Lighthouse automatisées

Ajoutez l’action GitHub Lighthouse CI, définissez des seuils de performance et d’accessibilité et bloquez les fusions qui dégradent les indicateurs essentiels du Web.

Leçon 4 sur 414 étapes

Vérifications Lighthouse automatisées est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Pourquoi automatiser Lighthouse ?

Les exécutions manuelles de Lighthouse détectent tard les régressions de performances, généralement après la plainte d’un utilisateur réel. Lighthouse CI s’exécute automatiquement à chaque PR, fait échouer les compilations qui dégradent les métriques clés et suit l’évolution des scores au fil du temps. Traitez les performances comme une suite de tests.

Lighthouse CI

L’outillage open source Lighthouse CI (lhci) de Google : il exécute Lighthouse plusieurs fois, calcule la médiane, vérifie les seuils et téléverse les résultats.

npm install -D @lhci/cli

# Run locally:
npx lhci autorun

lighthouserc.json — Configuration

Configurez les URL à tester, le nombre d’exécutions et les assertions.

// 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"
    }
  }
}

Intégration avec GitHub Actions

La tâche officielle treosh/lighthouse-ci-action exécute lhci à chaque PR et publie une vérification d’état.

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

Médiane de plusieurs exécutions

Les scores Lighthouse varient d’une exécution à l’autre en raison du bruit lié au minutage. numberOfRuns: 5 calcule la médiane, suffisamment stable pour être comparée aux seuils. Avec moins de 3 exécutions, les résultats sont instables.

Budgets de performances

Au-delà des scores, définissez des limites strictes concernant la taille et le nombre des ressources. La compilation échoue si ces limites sont dépassées.

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

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

Serveur Lighthouse CI

Hébergez vous-même le serveur LHCI pour conserver les données historiques, consulter les graphiques de tendance et comparer les branches au fil du temps. Vous pouvez aussi utiliser un stockage public temporaire pour les résultats ponctuels de PR.

Tester les pages authentifiées

Utilisez des scripts Puppeteer pour vous connecter avant les exécutions de 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();
};

Notifications Slack/Discord

Transmettez les résultats de LHCI à la discussion de votre équipe : les régressions de performances méritent la même attention que les échecs de tests.

Mobile ou ordinateur

Par défaut, Lighthouse utilise le mode mobile (4G lente et processeur de gamme intermédiaire). Pour le mode ordinateur, définissez preset: 'desktop'. La plupart des applications en production devraient effectuer les deux audits, dans des tâches distinctes de l’intégration continue.

Étalonner les seuils

Commencez par utiliser les scores actuels comme références. Ne faites pas échouer les PR dès le premier jour : consignez d’abord les résultats et affichez des avertissements. Une fois que votre équipe sera habituée au processus, augmentez progressivement les exigences.

Au-delà de Lighthouse

Lighthouse fournit des données de laboratoire. Associez-le à la surveillance des utilisateurs réels (RUM) : le paquet npm web-vitals associé à vos analyses, ou des services comme SpeedCurve et Calibre, fournit les véritables tendances de performances.

Vérification rapide

Pourquoi Lighthouse CI calcule-t-il généralement la médiane de plusieurs exécutions (par exemple 5) plutôt que d’une seule ?

Réponds-y dans la leçon interactive

Récapitulatif : Lighthouse automatisé

lhci autorun s’intègre à l’intégration continue. Configurez-le dans lighthouserc.json : URL, exécutions (5 ou plus), assertions sur les catégories et les métriques, budgets de performances. Utilisez treosh/lighthouse-ci-action pour GitHub. Hébergez vous-même le serveur LHCI pour suivre les tendances. Utilisez des scripts Puppeteer pour les pages authentifiées. Auditez les modes mobile et ordinateur. Commencez par des avertissements, puis resserrez progressivement les seuils. Associez RUM à Lighthouse pour obtenir une vue complète.

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 41
Leçons: 163

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Vérifications Lighthouse automatisées » est-elle gratuite ?

Oui — le texte complet de « Vérifications Lighthouse automatisées » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Vérifications Lighthouse automatisées » ?

Ajoutez l’action GitHub Lighthouse CI, définissez des seuils de performance et d’accessibilité et bloquez les fusions qui dégradent les indicateurs essentiels du Web. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Vérifications Lighthouse automatisées » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

GitHub Actions pour le frontend : analyse, tests et compilation
Déployer sur Vercel, Netlify et Cloudflare Pages
Variables d’environnement dans l’intégration continue
Vérifications Lighthouse automatisées

← Retour à Frontend Academy