Tests de Performance Frontend : Intégrer Lighthouse CI pour une Amélioration Continue

Dans le paysage numérique actuel, la performance des sites web est primordiale. Des temps de chargement lents, des problèmes d'accessibilité et un mauvais SEO peuvent avoir un impact significatif sur l'expérience utilisateur et, par conséquent, sur les résultats commerciaux. Les tests de performance frontend sont devenus une partie essentielle du cycle de vie du développement logiciel moderne, garantissant que les sites web et les applications web sont rapides, fiables et conviviaux pour un public mondial. Cet article explore l'intégration de Lighthouse CI, un puissant outil open-source, dans votre pipeline d'intégration continue (CI) pour automatiser les tests de performance frontend et favoriser une amélioration continue.

Pourquoi les Tests de Performance Frontend sont-ils Importants ?

Avant de plonger dans Lighthouse CI, comprenons pourquoi les tests de performance frontend sont cruciaux :

• Expérience Utilisateur : Un site web rapide et réactif offre une meilleure expérience utilisateur, ce qui entraîne un engagement accru et une réduction des taux de rebond. Imaginez un client potentiel à Tokyo, au Japon, essayant d'acheter un produit sur un site de e-commerce qui se charge lentement. Il est probable qu'il abandonne le site et cherche des alternatives.
• Classement SEO : Les moteurs de recherche comme Google considèrent la vitesse et la performance du site web comme des facteurs de classement. Les sites web plus rapides ont tendance à se classer plus haut dans les résultats de recherche, générant ainsi plus de trafic organique. L'initiative Core Web Vitals de Google souligne l'importance de facteurs tels que le Largest Contentful Paint (LCP), le First Input Delay (FID) et le Cumulative Layout Shift (CLS) pour le SEO.
• Accessibilité : Les améliorations de performance conduisent souvent à une meilleure accessibilité pour les utilisateurs en situation de handicap. Un code et des images optimisés peuvent améliorer l'expérience des utilisateurs qui dépendent de lecteurs d'écran ou de ceux avec une bande passante limitée.
• Taux de Conversion : Un site web plus rapide peut avoir un impact direct sur les taux de conversion. Des études ont montré que même un retard d'une seconde dans le temps de chargement d'une page peut entraîner une diminution significative des conversions. Pensez à un utilisateur à Mumbai, en Inde, qui essaie de réserver un vol. Un processus de réservation lent pourrait l'amener à abandonner l'achat et à choisir un concurrent.
• Optimisation des Ressources : Les tests de performance aident à identifier les domaines où les ressources peuvent être optimisées, conduisant à des économies de coûts en termes d'infrastructure de serveur et d'utilisation de la bande passante.

Présentation de Lighthouse CI

Lighthouse CI est un outil open-source et automatisé conçu pour s'intégrer de manière transparente à votre pipeline CI/CD. Il exécute Lighthouse, un outil d'audit populaire développé par Google, et fournit des informations sur la performance, l'accessibilité, le SEO, les bonnes pratiques et la conformité Progressive Web App (PWA) de votre site web. Lighthouse CI vous aide à :

• Automatiser les Audits de Performance : Exécutez automatiquement les audits Lighthouse à chaque commit ou pull request.
• Suivre la Performance dans le Temps : Surveillez les métriques de performance au fil du temps et identifiez les régressions rapidement.
• Définir des Budgets de Performance : Définissez des budgets de performance et faites échouer les builds s'ils sont dépassés.
• Intégrer avec les Systèmes CI/CD : Intégrez avec des systèmes CI/CD populaires comme GitHub Actions, GitLab CI, CircleCI et Jenkins.
• Collaborer sur les Problèmes de Performance : Partagez les rapports Lighthouse et collaborez avec votre équipe pour résoudre les problèmes de performance.

Mise en Place de Lighthouse CI

Voici un guide étape par étape pour configurer Lighthouse CI dans votre projet :

1. Installer Lighthouse CI

Installez la CLI de Lighthouse CI globalement en utilisant npm ou yarn :

            npm install -g @lhci/cli
yarn global add @lhci/cli
            

              
                Copy
              
            
          

2. Configurer Lighthouse CI

Créez un fichier lighthouserc.js à la racine de votre projet pour configurer Lighthouse CI. Voici un exemple de configuration :

            module.exports = {
  ci:
{
    collect:
{
      url: ['http://localhost:3000', 'http://localhost:3000/about'],
      startServerCommand: 'npm start',
      numberOfRuns: 3,
    },
    assert:
{
      assertions:
{
        'categories:performance': ['warn', { minScore: 0.9 }],
        'categories:accessibility': ['error', { minScore: 1 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        'categories:pwa': ['off'],
        'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
        'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
        'total-blocking-time': ['warn', { maxNumericValue: 200 }],
        'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
      },
    },
    upload:
{
      target: 'temporary-redirect',
    },
  },
};

            

              
                Copy
              
            
          

Décortiquons cette configuration :

• collect.url : Un tableau des URL à auditer. Cet exemple audite la page d'accueil et la page "à propos". Vous devriez inclure toutes les pages critiques de votre site web, en tenant compte des différents cas d'utilisation. Par exemple, un site e-commerce pourrait inclure la page d'accueil, les pages de listing de produits, les pages de détail des produits et le processus de paiement.
• collect.startServerCommand : La commande pour démarrer votre serveur de développement. Ceci est nécessaire si Lighthouse CI doit s'exécuter sur un environnement de développement local.
• collect.numberOfRuns : Le nombre de fois où les audits Lighthouse sont exécutés pour chaque URL. L'exécution de plusieurs audits aide à atténuer les variations des conditions réseau et d'autres facteurs.
• assert.assertions : Un ensemble d'assertions pour valider les résultats de l'audit Lighthouse. Chaque assertion spécifie une métrique ou une catégorie et un seuil. Si le seuil n'est pas atteint, le build échouera. Cet exemple définit des seuils pour les catégories de performance, d'accessibilité, de bonnes pratiques et de SEO. Il définit également des seuils pour des métriques spécifiques comme le First Contentful Paint (FCP), le Largest Contentful Paint (LCP), le Total Blocking Time (TBT) et le Cumulative Layout Shift (CLS).
• upload.target : Spécifie où télécharger les rapports Lighthouse. temporary-redirect télécharge les rapports vers un emplacement de stockage temporaire et fournit une URL pour y accéder. D'autres options incluent l'utilisation du serveur Lighthouse CI ou de solutions de stockage cloud comme Google Cloud Storage ou Amazon S3.

3. Intégrer avec Votre Système CI/CD

L'étape suivante consiste à intégrer Lighthouse CI dans votre pipeline CI/CD. Voici un exemple d'intégration avec GitHub Actions :

Créez un fichier .github/workflows/lighthouse.yml dans votre dépôt :

            name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Install Dependencies
        run: npm ci
      - name: Run Lighthouse CI
        run: |          npm run build
          lhci autorun

            

              
                Copy
              
            
          

Ce workflow effectue les étapes suivantes :

• Récupère le code.
• Met en place Node.js.
• Installe les dépendances.
• Exécute Lighthouse CI. Cette étape construit d'abord l'application (npm run build), puis exécute lhci autorun, qui lance les audits Lighthouse et vérifie les résultats par rapport aux seuils configurés.

Adaptez ce workflow à votre système CI/CD et aux exigences de votre projet. Par exemple, si vous utilisez GitLab CI, vous configureriez un fichier .gitlab-ci.yml avec des étapes similaires.

4. Exécuter Lighthouse CI

Commitez vos modifications et poussez-les vers votre dépôt. Le pipeline CI/CD exécutera automatiquement Lighthouse CI. Si l'une des assertions échoue, le build échouera, fournissant un retour précieux aux développeurs. Les rapports Lighthouse CI seront disponibles à l'URL fournie par le système CI/CD.

Configuration et Personnalisation Avancées

Lighthouse CI offre une large gamme d'options de configuration et de possibilités de personnalisation. Voici quelques fonctionnalités avancées :

1. Utiliser le Serveur Lighthouse CI

Le serveur Lighthouse CI fournit un tableau de bord centralisé pour suivre les métriques de performance au fil du temps, gérer les projets et collaborer sur les problèmes de performance. Pour utiliser le serveur Lighthouse CI, vous devez configurer une instance et votre fichier lighthouserc.js pour y télécharger les rapports.

D'abord, déployez le serveur. Diverses options de déploiement sont disponibles, y compris Docker, Heroku, et des fournisseurs cloud comme AWS et Google Cloud. Consultez la documentation de Lighthouse CI pour des instructions détaillées sur le déploiement du serveur.

Une fois le serveur en cours d'exécution, mettez à jour votre fichier lighthouserc.js pour pointer vers le serveur :

            module.exports = {
  ci:
{
    collect: {
      url: ['http://localhost:3000'],
      startServerCommand: 'npm start',
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', { minScore: 0.9 }],
      },
    },
    upload:
{
      target: 'lhci',
      serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
      token: 'YOUR_LHCI_SERVER_TOKEN',
    },
  },
};

            

              
                Copy
              
            
          

Remplacez YOUR_LHCI_SERVER_URL par l'URL de votre serveur Lighthouse CI et YOUR_LHCI_SERVER_TOKEN par un jeton généré par le serveur. Le jeton authentifie votre pipeline CI auprès du serveur.

2. Définir des Budgets de Performance

Les budgets de performance définissent des seuils acceptables pour des métriques spécifiques. Lighthouse CI vous permet de définir des budgets de performance et de faire échouer les builds si ces budgets sont dépassés. Cela aide à prévenir les régressions de performance et garantit que votre site web reste dans des limites de performance acceptables.

Vous pouvez définir des budgets de performance dans votre fichier lighthouserc.js en utilisant la propriété assert.assertions. Par exemple, pour définir un budget de performance pour le First Contentful Paint (FCP), vous pouvez ajouter l'assertion suivante :

            'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
            

              
                Copy
              
            
          

Cette assertion fera échouer le build si le FCP est supérieur à 2500 millisecondes.

3. Personnaliser la Configuration de Lighthouse

Lighthouse CI vous permet de personnaliser la configuration de Lighthouse pour répondre à vos besoins spécifiques. Vous pouvez configurer divers paramètres Lighthouse, tels que :

• onlyAudits : Spécifiez une liste d'audits à exécuter.
• skipAudits : Spécifiez une liste d'audits à ignorer.
• throttling : Configurez les paramètres de limitation du réseau pour simuler différentes conditions réseau.
• formFactor : Spécifiez le format (ordinateur de bureau ou mobile) à émuler.
• screenEmulation : Configurez les paramètres d'émulation d'écran.

Pour personnaliser la configuration de Lighthouse, vous pouvez passer un drapeau --config-path à la commande lhci autorun, pointant vers un fichier de configuration Lighthouse personnalisé. Consultez la documentation de Lighthouse pour une liste complète des options de configuration.

4. Auditer les Pages Authentifiées

L'audit des pages authentifiées nécessite une approche légèrement différente. Vous devez fournir à Lighthouse CI un moyen de s'authentifier avant d'exécuter les audits. Cela peut être réalisé en utilisant des cookies ou en scriptant le processus de connexion.

Une approche courante consiste à utiliser le drapeau --extra-headers pour passer des cookies d'authentification à Lighthouse CI. Vous pouvez obtenir les cookies à partir des outils de développement de votre navigateur après vous être connecté au site web.

Alternativement, vous pouvez utiliser un script Puppeteer pour automatiser le processus de connexion, puis exécuter les audits Lighthouse sur les pages authentifiées. Cette approche offre plus de flexibilité et vous permet de gérer des scénarios d'authentification complexes.Meilleures Pratiques pour les Tests de Performance Frontend avec Lighthouse CI

Pour maximiser les avantages de Lighthouse CI, suivez ces meilleures pratiques :

• Exécutez Lighthouse CI Régulièrement : Intégrez Lighthouse CI dans votre pipeline CI/CD pour exécuter automatiquement les audits à chaque commit ou pull request. Cela garantit que les régressions de performance sont détectées tôt et corrigées rapidement.
• Définissez des Budgets de Performance Réalistes : Définissez des budgets de performance qui sont ambitieux mais réalisables. Commencez avec des budgets conservateurs et resserrez-les progressivement à mesure que la performance de votre site s'améliore. Envisagez de définir des budgets différents pour différents types de pages, en fonction de leur complexité et de leur importance.
• Concentrez-vous sur les Métriques Clés : Priorisez les métriques de performance clés qui ont le plus d'impact sur l'expérience utilisateur et les résultats commerciaux. Les Core Web Vitals de Google (LCP, FID et CLS) sont un bon point de départ.
• Analysez et Résolvez les Problèmes de Performance : Lorsque Lighthouse CI identifie des problèmes de performance, analysez-les en profondeur et mettez en œuvre des solutions appropriées. Utilisez les rapports Lighthouse pour identifier les causes profondes des problèmes et prioriser les correctifs les plus impactants.
• Surveillez la Performance dans le Temps : Suivez les métriques de performance au fil du temps pour identifier les tendances et les modèles. Utilisez le serveur Lighthouse CI ou d'autres outils de surveillance pour visualiser les données de performance et identifier les domaines d'amélioration.
• Formez Votre Équipe : Assurez-vous que votre équipe comprend l'importance de la performance frontend et comment utiliser Lighthouse CI efficacement. Fournissez des formations et des ressources pour les aider à améliorer leurs compétences et leurs connaissances.
• Tenez Compte des Conditions Réseau Mondiales : Lors de la définition des budgets de performance, tenez compte des conditions réseau dans différentes parties du monde. Les utilisateurs dans des régions avec des vitesses Internet plus lentes peuvent avoir une expérience différente de celle des utilisateurs dans des régions avec des vitesses plus rapides. Utilisez des outils pour simuler différentes conditions réseau pendant les tests.
• Optimisez les Images : L'optimisation des images est un aspect essentiel de la performance frontend. Utilisez des outils comme ImageOptim, TinyPNG, ou des convertisseurs en ligne pour compresser et optimiser les images sans perte de qualité. Utilisez des formats d'image modernes comme WebP, qui offrent une meilleure compression et qualité que les formats traditionnels comme JPEG et PNG. Mettez en œuvre le chargement différé (lazy loading) pour les images qui ne sont pas immédiatement visibles dans la fenêtre d'affichage.
• Minifiez et Compressez le Code : Minifiez votre code HTML, CSS et JavaScript pour réduire la taille des fichiers. Utilisez des outils comme UglifyJS, Terser, ou des minificateurs en ligne. Activez la compression Gzip ou Brotli sur votre serveur pour réduire davantage la taille des fichiers transférés.
• Tirez Parti de la Mise en Cache du Navigateur : Configurez votre serveur pour définir des en-têtes de cache appropriés pour les ressources statiques comme les images, les fichiers CSS et JavaScript. Cela permet aux navigateurs de mettre en cache ces ressources et d'éviter de les télécharger à plusieurs reprises.

Conclusion

L'intégration de Lighthouse CI dans votre flux de développement est une étape cruciale vers la création de sites web performants, accessibles et optimisés pour le SEO. En automatisant les tests de performance frontend et en suivant la performance au fil du temps, vous pouvez identifier et résoudre les problèmes de performance rapidement, améliorer l'expérience utilisateur et générer des résultats commerciaux. Adoptez Lighthouse CI et faites de l'amélioration continue de la performance une valeur fondamentale dans votre processus de développement. Rappelez-vous que la performance d'un site web n'est pas un effort ponctuel mais un processus continu qui nécessite une attention et une optimisation constantes. Tenez compte des facteurs culturels et régionaux pour garantir une expérience transparente à tous vos utilisateurs, quel que soit leur emplacement ou leur appareil. En suivant les meilleures pratiques décrites dans cet article, vous pouvez vous assurer que votre site web offre une expérience rapide, fiable et agréable aux utilisateurs du monde entier.