Audits et évaluation avec Lighthouse
Exécutez Lighthouse dans DevTools ou en intégration continue, consultez le score de performance et les diagnostics, puis donnez la priorité aux optimisations offrant les gains les plus importants.
Audits et évaluation avec Lighthouse est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.
Qu'est-ce que Lighthouse ?
Lighthouse est un outil d'audit open source de Google qui simule le chargement d'une page et lui attribue un score dans les catégories Performance, Accessibilité, Bonnes pratiques, Référencement naturel et PWA. Il est intégré à Chrome DevTools et peut être exécuté depuis le CLI ou l'intégration continue.
Exécuter Lighthouse dans DevTools
Ouvrez DevTools, cliquez sur l'onglet Lighthouse, choisissez les catégories et l'appareil (mobile ou ordinateur), puis cliquez sur « Analyser le chargement de la page ». L'évaluation simulée dure environ 30 secondes.
Détail du score de performance
Le score de performance (0–100) est une moyenne pondérée de : LCP (25 %), temps total de blocage (30 %), CLS (25 %), FCP (10 %) et indice de vitesse (10 %). Le seuil est élevé : un score de 90 ou plus est considéré comme « bon ».
Premier affichage du contenu (FCP)
FCP indique le moment où le premier élément de contenu (texte ou image) est rendu. Il diffère du LCP : FCP s'intéresse à n'importe quel élément, tandis que LCP s'intéresse au plus grand élément. Bon : inférieur à 1,8 s.
Temps total de blocage (TBT)
TBT mesure la durée pendant laquelle le fil d'exécution principal est bloqué par des tâches JavaScript de plus de 50 ms. Un TBT élevé donne l'impression que la page ne répond pas, même si elle semble prête.
Lire la section des possibilités d'amélioration
Lighthouse répertorie des « possibilités d'amélioration » avec les gains estimés (par exemple : « Supprimer les ressources qui bloquent le rendu : 1,2 s »). Triez-les selon le gain afin de corriger d'abord les éléments les plus importants et d'obtenir un impact maximal.
Possibilités d'amélioration courantes
Corrections fréquentes : différer ou exécuter de manière asynchrone les scripts non essentiels, intégrer le CSS critique, précharger les requêtes essentielles, utiliser un CDN, activer la compression du texte (Brotli/gzip) et diffuser des formats d'image modernes.
Lighthouse CLI
Exécutez Lighthouse depuis la ligne de commande pour automatiser les audits.
npm install -g lighthouse
lighthouse https://example.com \
--output html \
--output-path ./report.html \
--chrome-flags="--headless"Lighthouse CI dans GitHub Actions
Exécutez des audits à chaque demande de modification et faites échouer la compilation si les scores passent sous les seuils définis.
# .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
- run: npm ci && npm run build
- uses: treosh/lighthouse-ci-action@v11
with:
configPath: ./lighthouserc.jsonConfiguration de Lighthouse : assertions de score
Définissez des assertions dans lighthouserc.json afin de faire échouer les demandes de modification qui entraînent une régression des scores.
{
"ci": {
"assert": {
"assertions": {
"categories:performance": ["error", { "minScore": 0.9 }],
"categories:accessibility": ["error", { "minScore": 0.95 }],
"largest-contentful-paint": ["error", { "maxNumericValue": 2500 }]
}
}
}
}Limitation du réseau et simulation de l'appareil
Par défaut, Lighthouse simule un réseau 4G lent et un CPU mobile de gamme intermédiaire. C'est intentionnel : les utilisateurs en production sur des appareils réels sont plus lents que votre machine de développement.
Variabilité du score : pourquoi il fluctue
Les scores de Lighthouse fluctuent d'une exécution à l'autre en raison de la variabilité du minutage de JavaScript. Exécutez les audits 3 à 5 fois et prenez la médiane. Utilisez numberOfRuns dans Lighthouse CI pour calculer automatiquement la médiane.
Vérification rapide
Quelle métrique de Lighthouse mesure la durée pendant laquelle le fil d'exécution principal est bloqué par de longues tâches JavaScript ?
Récapitulatif : Lighthouse
Lighthouse audite les domaines Performance, Accessibilité, Bonnes pratiques, Référencement naturel et PWA. Le score de performance est une moyenne pondérée de LCP, TBT, CLS, FCP et de l'indice de vitesse. La section des possibilités d'amélioration classe les corrections selon les gains estimés. Exécutez Lighthouse avec DevTools, le CLI ou dans l'intégration continue avec treosh/lighthouse-ci-action. Pour limiter la variabilité des scores, prenez la médiane de plusieurs exécutions.
Questions Fréquemment Posées
La leçon « Audits et évaluation avec Lighthouse » est-elle gratuite ?
Oui — le texte complet de « Audits et évaluation avec Lighthouse » 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 « Audits et évaluation avec Lighthouse » ?
Exécutez Lighthouse dans DevTools ou en intégration continue, consultez le score de performance et les diagnostics, puis donnez la priorité aux optimisations offrant les gains les plus importants. 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 2 sur 4.
Combien de temps prend la leçon « Audits et évaluation avec Lighthouse » ?
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
- Signaux essentiels du Web : LCP, FID et CLS
- Audits et évaluation avec Lighthouse
- Optimisation des images : chargement différé et formats WebP
- Division du code et routes chargées à la demande