Audit HTML avec Lighthouse

Lighthouse est un outil d’audit automatisé intégré à Chrome DevTools (onglet Audits) qui évalue une page selon les performances, l’accessibilité, les bonnes pratiques, le référencement naturel et PWA. Il exécute un audit de la page dans le navigateur, effectue des mesures et produit des suggestions directement exploitables.

Dans Chrome DevTools, passez à Lighthouse, sélectionnez les catégories, choisissez Ordinateur ou Mobile, puis cliquez sur "Analyser le chargement de la page". L’outil recharge la page dans un environnement propre et produit un rapport en moins d’une minute.

Performances mesure les indicateurs essentiels du Web et d’autres métriques de vitesse. Accessibilité vérifie des règles conformes à WCAG. Bonnes pratiques couvre la sécurité et les normes modernes du Web. Référencement naturel vérifie que le balisage peut être exploré. PWA vérifie l’installabilité et la prise en charge du mode hors connexion.

L’audit d’accessibilité détecte : texte alternatif manquant, étiquettes de formulaire manquantes, contraste de couleurs insuffisant, attribut de langue manquant, identifiants dupliqués, repères manquants, éléments pouvant recevoir le focus sans prise en charge du clavier. Chaque problème renvoie vers des conseils détaillés pour le corriger.

Plus grand rendu de contenu (LCP), décalage cumulatif de mise en page (CLS), temps total de blocage (TBT) et indice de vitesse. Chaque métrique reçoit une note et un coefficient qui contribuent à la note globale de performances. Lighthouse indique quels éléments du DOM contribuent le plus à chaque métrique.

Vérifie l’utilisation de HTTPS, les erreurs de console, les proportions des images, les API obsolètes et le contenu mixte. L’audit des bonnes pratiques détecte un large éventail de pratiques anciennes ou non sécurisées qui doivent être modernisées.

Détecte l’absence de description meta, l’absence ou la duplication de <title>, les problèmes liés à robots.txt, les liens sans texte descriptif, l’absence de balise meta viewport et les problèmes liés à hreflang. Associez l’audit du référencement naturel de Lighthouse à un véritable outil d’audit SEO (Ahrefs, Screaming Frog) pour analyser le contenu.

Vérifie toutes les exigences nécessaires à l’installabilité : HTTPS, manifeste valide avec les champs minimum requis, worker de service enregistré, balise viewport et icônes. Corrigez tous les échecs de l’audit PWA avant de lancer l’application comme application installable.

L’interface CLI Lighthouse et l’outil Lighthouse CI intègrent les audits au pipeline d’intégration et de déploiement continus. Chaque PR exécute Lighthouse sur l’aperçu déployé ; l’action échoue si les notes passent sous les seuils. Cela empêche les régressions silencieuses en matière d’accessibilité, de performances ou de référencement naturel.

Les rapports Lighthouse peuvent être enregistrés au format JSON et comparés par programmation : suivez la note LCP au fil du temps pour détecter les régressions, comparez deux PR pour voir quelle modification a affecté quelle métrique et déclenchez une alerte lorsque les seuils sont franchis. Les données sont structurées pour être exploitées par des outils.

Lighthouse est un test synthétique : il s’exécute dans un environnement contrôlé, et non auprès d’utilisateurs réels. Associez-le à des outils de suivi des utilisateurs réels (RUM) qui mesurent l’expérience réelle. Les tests synthétiques détectent tôt les régressions ; le RUM confirme que les utilisateurs ressentent effectivement les améliorations.

Certains audits signalent des pratiques inévitables dans certains contextes. Documentez les exceptions délibérées, ajoutez-les à la liste d’exclusion de Lighthouse CI et réévaluez-les périodiquement à mesure que la plateforme évolue. Évitez l’option générale "tout ignorer" : elle annule l’objectif de l’audit automatisé.

Considérez les notes Lighthouse comme un objectif d’amélioration continue, et non comme une correction ponctuelle. Instaurez une culture où la note est examinée sur chaque PR, où les régressions sont corrigées immédiatement et où la référence initiale est progressivement améliorée. Avec cette discipline, la plupart des équipes voient leurs notes augmenter régulièrement au fil des mois.

Pourquoi les audits synthétiques Lighthouse doivent-ils être associés au suivi des utilisateurs réels (RUM) ?

Lighthouse audite une page selon les performances, l’accessibilité, les bonnes pratiques, le référencement naturel et PWA. Utilisez-le depuis Chrome DevTools pour des vérifications ponctuelles et Lighthouse CI pour l’intégration continue. Traitez les régressions sur chaque PR, instaurez une culture d’amélioration fondée sur les mesures et associez les audits synthétiques au suivi des utilisateurs réels pour vérifier que les améliorations en laboratoire profitent réellement aux utilisateurs.