Analyse de performance (Web Vitals, Lighthouse CI)

Au-delà des erreurs : La quête de la rapidité et de la fluidité

Une application React en production peut être exempte d'erreurs JavaScript mais néanmoins offrir une expérience utilisateur médiocre si elle est lente à charger, peu réactive aux interactions, ou si sa mise en page change de manière inattendue pendant le chargement. La performance web n'est pas un luxe, mais une nécessité pour retenir les utilisateurs, améliorer le référencement (SEO) et atteindre les objectifs métier.

Après avoir mis en place le suivi des erreurs, l'étape suivante logique est de surveiller activement les performances de votre application telle qu'elle est vécue par vos utilisateurs réels et de mettre en place des gardes-fous pour éviter les régressions de performance au fil des déploiements. Deux concepts et outils clés pour cela sont les Core Web Vitals et Lighthouse CI.

Core Web Vitals : Mesurer l'expérience utilisateur réelle (RUM)

Les Core Web Vitals (Signaux Web Essentiels) sont une initiative de Google visant à fournir des indicateurs unifiés pour mesurer la qualité de l'expérience utilisateur sur le web. Ils se concentrent sur trois aspects clés :

• Largest Contentful Paint (LCP) : Mesure la performance de chargement. Il indique le temps nécessaire pour que le plus grand élément de contenu (image ou bloc de texte) visible dans la fenêtre d'affichage initiale soit rendu. Un bon LCP est généralement considéré comme inférieur à 2,5 secondes.
• Interaction to Next Paint (INP) : Mesure la réactivité globale de la page aux interactions utilisateur (clics, touchés, saisie clavier). Il remplace progressivement le First Input Delay (FID). L'INP mesure la latence de toutes les interactions éligibles tout au long de la visite d'un utilisateur sur une page et rapporte la pire valeur (ou une valeur proche de la pire). Un bon INP est généralement considéré comme inférieur à 200 millisecondes.
• Cumulative Layout Shift (CLS) : Mesure la stabilité visuelle. Il quantifie le déplacement inattendu des éléments de la page pendant son chargement. Un faible CLS garantit une expérience agréable sans sauts de mise en page perturbants. Un bon CLS est généralement inférieur à 0,1.

La meilleure façon de mesurer les Core Web Vitals est d'utiliser le Real User Monitoring (RUM), c'est-à-dire collecter les données directement depuis les navigateurs de vos utilisateurs réels. Plusieurs méthodes existent :

• Bibliothèque `web-vitals` : Une petite bibliothèque JavaScript de Google qui permet de mesurer facilement ces métriques dans le navigateur et de les envoyer à votre propre système d'analyse ou à un service tiers.
• Google Analytics (GA4) : Intègre nativement la collecte des Web Vitals.
• Plateformes de Monitoring/APM : De nombreux outils (Sentry Performance, Datadog RUM, Dynatrace, New Relic, etc.) et plateformes d'hébergement (Vercel Analytics, Netlify Analytics) collectent et affichent automatiquement les données RUM, y compris les Web Vitals.

Le suivi RUM des Web Vitals vous donne une vision précise de la performance réellement perçue par vos utilisateurs dans divers contextes (appareils, réseaux, localisations).

Lighthouse : Auditer la qualité en laboratoire

Lighthouse est un outil open-source automatisé, intégré aux Outils de Développement de Chrome (onglet "Lighthouse"), qui permet d'auditer la qualité d'une page web. Il effectue une série de tests dans un environnement simulé ("données de laboratoire" ou Lab Data) et fournit des scores et des recommandations sur plusieurs catégories :

• Performance : Analyse la vitesse de chargement (incluant des métriques comme LCP, TTI, Speed Index, mais mesurées dans l'environnement simulé).
• Accessibilité (a11y) : Vérifie la conformité aux bonnes pratiques d'accessibilité.
• Bonnes Pratiques (Best Practices) : Recherche les erreurs courantes de développement web (utilisation de HTTPS, pas d'erreurs console, etc.).
• SEO : Vérifie les éléments techniques de base pour un bon référencement.
• Progressive Web App (PWA) : (Si applicable) Vérifie si l'application respecte les critères d'une PWA.

Lighthouse est excellent pour obtenir un instantané rapide de la qualité d'une page et des pistes d'amélioration concrètes pendant le développement ou avant un déploiement.

Lighthouse CI : Automatiser les audits dans le pipeline

Le véritable pouvoir de Lighthouse pour prévenir les régressions réside dans son automatisation via Lighthouse CI. Cet outil permet d'exécuter des audits Lighthouse automatiquement dans votre pipeline d'Intégration Continue (CI/CD).

Le workflow typique avec Lighthouse CI est le suivant :

1. Dans le pipeline CI (après le build) :
   • Lancer un serveur web statique pour servir le build de production (ou utiliser une URL de prévisualisation/staging).
   • Exécuter la commande `lhci autorun` (ou des commandes plus granulaires comme `lhci collect` et `lhci assert`).
2. Configuration : Un fichier de configuration (`lighthouserc.js` ou `.json`) définit les URL à tester, les serveurs à utiliser, et surtout les budgets de performance ou les seuils minimums pour les scores Lighthouse.
3. Assertion : Lighthouse CI compare les résultats de l'audit aux budgets définis. Si un score est inférieur au seuil ou si une métrique dépasse son budget (ex: LCP > 3s, taille du bundle JS > 500KB), le pipeline CI échoue, empêchant ainsi le déploiement d'une version qui introduit une régression de performance ou de qualité.
4. Reporting : Lighthouse CI peut générer des rapports détaillés et même les télécharger vers un serveur Lighthouse CI dédié pour suivre l'évolution des scores au fil du temps.

Lighthouse CI agit comme un garde-fou automatisé, garantissant que chaque modification de code est évaluée par rapport à des standards de qualité et de performance avant d'atteindre la production.

// Exemple simple de lighthouserc.js
module.exports = {
  ci: {
    collect: {
      // Lance un serveur statique pour le dossier de build
      staticDistDir: './build',
      url: ['http://localhost/'], // URLs à tester une fois le serveur lancé
      numberOfRuns: 3, // Exécuter plusieurs fois pour la stabilité
    },
    assert: {
      // Définir les budgets ou les seuils minimums
      preset: 'lighthouse:recommended', // Utiliser les seuils recommandés par Lighthouse
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }], // Avertissement si score < 0.9
        'categories:accessibility': ['error', { minScore: 1 }], // Erreur si score < 1
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
        // Pas de budgets sur les métriques affectées par la variabilité réseau/CPU en CI
        // 'first-contentful-paint': 'off',
      },
    },
    upload: {
      target: 'temporary-public-storage', // Option simple pour voir les rapports
    },
  },
};

Combiner RUM et Lab Data

Il est important de comprendre que les données RUM (Web Vitals mesurés sur les utilisateurs réels) et les données de laboratoire (Lighthouse CI dans un environnement contrôlé) sont complémentaires :

• RUM (Web Vitals) : Reflète l'expérience réelle de vos utilisateurs dans toute sa diversité (différents appareils, réseaux, etc.). C'est la vérité terrain.
• Lab Data (Lighthouse CI) : Fournit des résultats cohérents et reproductibles dans un environnement contrôlé. Idéal pour détecter les régressions d'une modification à l'autre et pour faire respecter des budgets avant le déploiement.

Une bonne stratégie de monitoring de performance utilise les deux : Lighthouse CI pour attraper les régressions en amont, et le suivi RUM des Web Vitals pour comprendre et optimiser l'expérience utilisateur réelle en production.

Conclusion : Vers une performance durable

La performance web n'est pas une tâche unique, mais un effort continu. En intégrant la mesure des Core Web Vitals via le Real User Monitoring et en automatisant les audits de qualité avec Lighthouse CI dans votre pipeline de développement, vous mettez en place les fondations pour une performance durable.

Ces outils vous fournissent les données nécessaires pour comprendre comment votre application React se comporte en production, identifier les opportunités d'optimisation, et surtout, garantir que les nouvelles fonctionnalités ou modifications n'impactent pas négativement la rapidité et la fluidité de l'expérience offerte à vos utilisateurs.