Apprenez à mettre en œuvre Lighthouse CI Frontend pour une surveillance continue de la performance, garantissant une vitesse et une expérience utilisateur optimales pour vos applications web.
Lighthouse CI Frontend : Surveillance Continue de la Performance pour les Applications Web
Dans le paysage numérique actuel qui évolue rapidement, la performance des sites web est primordiale. Un site web lent ou mal optimisé peut entraîner des utilisateurs frustrés, une diminution de l'engagement et, finalement, un impact négatif sur votre entreprise. C'est là que Lighthouse CI entre en jeu. Ce guide vous expliquera comment mettre en œuvre Lighthouse CI pour une surveillance continue de la performance, vous permettant d'identifier et de résoudre de manière proactive les goulots d'étranglement avant qu'ils n'affectent vos utilisateurs.
Qu'est-ce que Lighthouse CI ?
Lighthouse CI est un outil de test de performance open-source et automatisé qui s'intègre de manière transparente dans votre pipeline d'Intégration Continue et de Livraison Continue (CI/CD). Il s'appuie sur l'outil d'audit Lighthouse de Google pour fournir des informations exploitables sur la performance, l'accessibilité, le SEO et les bonnes pratiques de votre site web. En intégrant Lighthouse CI dans votre flux de travail, vous pouvez surveiller en continu la performance de votre site, suivre les régressions et vous assurer que chaque modification de code contribue à une meilleure expérience utilisateur. Lighthouse CI n'est pas lié à un fournisseur de cloud spécifique et peut être utilisé avec différentes configurations. Par exemple, il peut s'exécuter dans un conteneur Docker sur des services tels que Github Actions, Jenkins, CircleCI et bien d'autres.
Pourquoi utiliser Lighthouse CI ?
La mise en Ĺ“uvre de Lighthouse CI offre une multitude d'avantages :
- Détection Précoce des Régressions de Performance : Identifiez les problèmes de performance introduits par de nouvelles modifications de code avant qu'elles n'atteignent la production.
- Performance Améliorée du Site Web : Obtenez des informations exploitables sur la manière d'optimiser votre site web pour la vitesse, l'accessibilité et le SEO.
- Expérience Utilisateur Améliorée : Offrez un site web plus rapide et plus convivial qui maintient l'engagement des visiteurs.
- Taux de Rebond Réduit : Optimisez les temps de chargement pour réduire la frustration des utilisateurs et les empêcher de quitter votre site.
- Taux de Conversion Augmentés : Un site web plus rapide entraîne généralement des taux de conversion plus élevés et de meilleurs résultats commerciaux.
- Tests de Performance Automatisés : Intégrez les tests de performance dans votre pipeline CI/CD pour une surveillance continue.
- Prise de Décision Basée sur les Données : Basez vos efforts d'optimisation sur des métriques et des informations de performance concrètes.
- Suivi de la Performance Ă Long Terme : Surveillez la performance de votre site web au fil du temps pour identifier les tendances et mesurer l'impact de vos optimisations.
Fonctionnalités Clés de Lighthouse CI
- Audits Automatisés : Exécute les audits Lighthouse automatiquement dans le cadre de votre processus CI/CD.
- Budgets de Performance : DĂ©finissez des budgets de performance pour vous assurer que votre site web respecte des seuils de performance acceptables.
- Suivi des Régressions : Suit les régressions de performance au fil du temps, vous permettant d'identifier les modifications de code qui les ont causées.
- Informations Exploitables : Fournit des rapports détaillés avec des recommandations concrètes sur la manière d'améliorer la performance de votre site web.
- Configuration Personnalisable : Configurez Lighthouse CI pour répondre à vos besoins et exigences spécifiques.
- Intégration avec les Outils CI/CD : S'intègre de manière transparente avec les outils CI/CD populaires tels que Jenkins, CircleCI, GitHub Actions et GitLab CI.
- Open Source : Lighthouse CI est un projet open-source, ce qui signifie qu'il est gratuit Ă utiliser et Ă modifier.
Mise en Place de Lighthouse CI : Un Guide Étape par Étape
Voici un guide complet pour configurer Lighthouse CI pour votre projet :
1. Installer la CLI de Lighthouse CI
Tout d'abord, vous devez installer l'interface de ligne de commande (CLI) de Lighthouse CI globalement en utilisant npm ou yarn :
npm install -g @lhci/cli
yarn global add @lhci/cli
2. Configurer Lighthouse CI
Créez un fichier lighthouserc.js à la racine de votre projet pour configurer Lighthouse CI. Ce fichier définit les URL à auditer, les règles d'assertion et d'autres options de configuration.
Voici un exemple de base d'un fichier lighthouserc.js :
module.exports = {
ci:
{
collect: {
url: ['http://localhost:3000', 'http://localhost:3000/about']
},
assert: {
preset: 'lighthouse:recommended'
},
upload: {
target: 'temporary-public-storage'
},
},
};
Explication :
collect.url: Spécifie les URL à auditer par Lighthouse. Dans cet exemple, nous auditons la page d'accueil et la page "à propos" d'un site web fonctionnant surlocalhost:3000. N'oubliez pas de remplacer ceci par les URL pertinentes pour *votre* projet, qui pourraient inclure des environnements de pré-production.assert.preset: Utilise le préréglagelighthouse:recommended, qui applique un ensemble d'assertions prédéfinies basées sur les recommandations de Lighthouse. C'est un bon point de départ, mais vous pouvez personnaliser ces assertions selon vos besoins.upload.target: Configure l'endroit où les résultats de Lighthouse CI seront téléversés.temporary-public-storageest utile pour les tests et le développement, mais pour les environnements de production, vous voudrez généralement utiliser une solution de stockage plus persistante (discutée plus tard).
3. Intégrer Lighthouse CI dans votre Pipeline CI/CD
L'étape suivante consiste à intégrer Lighthouse CI dans votre pipeline CI/CD. Les étapes exactes varieront en fonction de votre fournisseur CI/CD, mais le processus général consiste à ajouter un script à votre configuration CI/CD qui exécute les commandes de Lighthouse CI.
Exemple avec GitHub Actions :
Créez un fichier nommé .github/workflows/lighthouse-ci.yml dans votre dépôt avec le contenu suivant :
name: Lighthouse CI
on:
push:
branches: [main]
pull_request:
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: '16.x'
- name: Install dependencies
run: npm ci
- name: Run Lighthouse CI
run: |
npm install -g @lhci/cli@0.11.x
lhci autorun
Explication :
on.push.branches: Déclenche le workflow lors des pushes sur la branchemain.on.pull_request: Déclenche le workflow sur les pull requests.jobs.lighthouse.runs-on: Spécifie le système d'exploitation à utiliser pour le job (Ubuntu dans ce cas).steps: Définit les étapes à exécuter dans le job :actions/checkout@v3: Récupère le code du dépôt.actions/setup-node@v3: Configure Node.js.npm ci: Installe les dépendances.Run Lighthouse CI: Exécute les commandes de Lighthouse CI :npm install -g @lhci/cli@0.11.x: Installe la CLI de Lighthouse CI globalement. *Important* : Il est toujours recommandé de verrouiller une version spécifique.lhci autorun: Exécute Lighthouse CI en mode "autorun", qui collecte automatiquement les audits, vérifie les budgets de performance et téléverse les résultats.
Considérations importantes pour l'intégration CI/CD :
- Démarrage du Serveur : Avant d'exécuter
lhci autorun, assurez-vous que votre serveur web est en cours d'exécution (par ex.,npm start). Vous pourriez avoir besoin d'ajouter une étape à votre configuration CI/CD pour démarrer votre serveur en arrière-plan. - Migrations de Base de Données : Si votre application dépend d'une base de données, assurez-vous que les migrations de base de données sont exécutées dans le cadre de votre processus CI/CD *avant* d'exécuter Lighthouse CI.
- Variables d'Environnement : Si votre application nécessite des variables d'environnement, assurez-vous qu'elles sont correctement configurées dans votre environnement CI/CD.
4. Exécuter Lighthouse CI
Désormais, chaque fois que vous poussez des modifications sur la branche main ou créez une pull request, le workflow Lighthouse CI s'exécutera automatiquement. Les résultats seront disponibles dans l'interface de GitHub Actions.
5. Consulter les RĂ©sultats de Lighthouse CI
Les résultats de Lighthouse CI seront téléversés à l'emplacement spécifié dans votre fichier lighthouserc.js (par ex., temporary-public-storage). Vous pouvez accéder à ces résultats en suivant le lien fourni dans la sortie du CI/CD. Ces résultats fournissent des informations détaillées sur la performance, l'accessibilité, le SEO et les bonnes pratiques de votre site web.
Configuration des Assertions et des Budgets de Performance
Lighthouse CI vous permet de configurer des assertions et des budgets de performance pour vous assurer que votre site web atteint vos objectifs de performance. Les assertions sont des règles qui vérifient des métriques de performance spécifiques (par ex., First Contentful Paint, Largest Contentful Paint) par rapport à des seuils prédéfinis. Les budgets de performance définissent des limites acceptables pour diverses métriques de performance.
Voici un exemple de configuration des assertions dans votre fichier lighthouserc.js :
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000']
},
assert: {
assertions: {
'first-contentful-paint': ['warn', { maxNumericValue: 2000 }],
'largest-contentful-paint': ['warn', { maxNumericValue: 2500 }],
'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
'total-blocking-time': ['warn', { maxNumericValue: 500 }],
'categories:performance': ['warn', { minScore: 0.9 }],
'categories:accessibility': ['error', { minScore: 0.8 }],
}
},
upload: {
target: 'temporary-public-storage'
},
}
};
Explication :
first-contentful-paint: Définit un seuil d'avertissement pour le First Contentful Paint (FCP) à 2000 ms.largest-contentful-paint: Définit un seuil d'avertissement pour le Largest Contentful Paint (LCP) à 2500 ms.cumulative-layout-shift: Définit un seuil d'avertissement pour le Cumulative Layout Shift (CLS) à 0.1.total-blocking-time: Définit un seuil d'avertissement pour le Total Blocking Time (TBT) à 500 ms.categories:performance: Définit un seuil d'avertissement pour le score global de la catégorie Performance à 0.9.categories:accessibility: Définit un seuil d'erreur pour le score global de la catégorie Accessibilité à 0.8.
Niveaux d'Assertion :
off: Désactive l'assertion.warn: Affiche un avertissement si l'assertion échoue.error: Fait échouer l'exécution de Lighthouse CI si l'assertion échoue.
Personnalisation des Assertions :
Vous pouvez personnaliser les assertions pour répondre à vos besoins spécifiques. Par exemple, vous pourriez vouloir définir des seuils plus stricts pour les métriques de performance critiques ou désactiver les assertions qui ne sont pas pertinentes pour votre application.
Choisir une Cible de Téléversement pour Lighthouse CI
L'option upload.target dans votre fichier lighthouserc.js spécifie où les résultats de Lighthouse CI seront téléversés. La cible temporary-public-storage est pratique pour les tests et le développement, mais elle n'est pas adaptée aux environnements de production car les données ne sont pas persistantes.
Voici quelques cibles de téléversement alternatives :
- Serveur Lighthouse CI : L'approche recommandée pour les environnements de production est d'utiliser le serveur Lighthouse CI. Le serveur Lighthouse CI fournit une solution de stockage persistante pour vos résultats, ainsi qu'une interface utilisateur pour visualiser et analyser vos données. Il peut être déployé sur divers fournisseurs de cloud ou hébergé sur votre propre infrastructure.
- Google Cloud Storage : Vous pouvez téléverser vos résultats Lighthouse CI dans un bucket Google Cloud Storage. C'est une solution rentable et évolutive pour stocker vos données.
- Amazon S3 : Similaire à Google Cloud Storage, vous pouvez téléverser vos résultats Lighthouse CI dans un bucket Amazon S3.
Mise en place du Serveur Lighthouse CI :
La mise en place du serveur Lighthouse CI implique les Ă©tapes suivantes :
- Installer le Serveur Lighthouse CI : Vous pouvez installer le serveur Lighthouse CI en utilisant npm ou yarn :
- Configurer la Base de Données : Le serveur Lighthouse CI nécessite une base de données pour stocker ses données. Vous pouvez utiliser diverses bases de données, y compris PostgreSQL, MySQL et SQLite. Configurez les paramètres de connexion à la base de données dans le fichier
.env. - DĂ©marrer le Serveur Lighthouse CI : DĂ©marrez le serveur Lighthouse CI en utilisant la commande
lhci server. - Configurer la CLI de Lighthouse CI pour Utiliser le Serveur : Mettez Ă jour votre fichier
lighthouserc.jspour utiliser le serveur Lighthouse CI comme cible de téléversement :
npm install -g @lhci/server
yarn global add @lhci/server
module.exports = {
ci: {
collect: {
url: ['http://localhost:3000']
},
assert: {
preset: 'lighthouse:recommended'
},
upload: {
target: 'lhci',
serverBaseUrl: 'http://your-lhci-server.com',
token: 'YOUR_LHCI_TOKEN'
},
}
};
Remplacez http://your-lhci-server.com par l'URL de votre serveur Lighthouse CI et YOUR_LHCI_TOKEN par le jeton d'accès de votre projet.
Meilleures Pratiques pour l'Utilisation de Lighthouse CI
Pour tirer le meilleur parti de Lighthouse CI, suivez ces meilleures pratiques :
- Exécuter Lighthouse CI à Chaque Modification de Code : Intégrez Lighthouse CI dans votre pipeline CI/CD pour exécuter des audits sur chaque modification de code. Cela vous aidera à détecter rapidement les régressions de performance.
- DĂ©finir des Budgets de Performance : DĂ©finissez des budgets de performance pour vous assurer que votre site web respecte des seuils de performance acceptables.
- Surveiller les Tendances de Performance : Suivez la performance de votre site web au fil du temps pour identifier les tendances et mesurer l'impact de vos optimisations.
- Prioriser les Efforts d'Optimisation : Concentrez-vous d'abord sur l'optimisation des métriques de performance les plus critiques.
- Utiliser des Données du Monde Réel : Utilisez des données du monde réel pour éclairer vos efforts d'optimisation. Par exemple, vous pouvez utiliser Google Analytics pour identifier les pages les plus fréquemment visitées par vos utilisateurs.
- Tester sur des Appareils Réels : Testez votre site web sur des appareils réels pour vous assurer qu'il fonctionne bien dans des conditions réelles.
- Examiner Régulièrement les Résultats de Lighthouse CI : Assurez-vous d'examiner régulièrement les résultats de Lighthouse CI et de prendre des mesures pour résoudre les problèmes de performance identifiés.
- Optimiser les Images : Optimisez vos images pour réduire leur taille de fichier sans sacrifier la qualité. Des outils comme ImageOptim (macOS), TinyPNG et ImageKit sont utiles pour cela.
- Minifier le CSS et le JavaScript : Minifiez vos fichiers CSS et JavaScript pour réduire leur taille. Des outils comme UglifyJS et CSSNano peuvent vous y aider.
- Tirer Parti de la Mise en Cache du Navigateur : Tirez parti de la mise en cache du navigateur pour réduire le nombre de requêtes que votre site web envoie au serveur.
- Utiliser un Réseau de Diffusion de Contenu (CDN) : Utilisez un CDN pour distribuer le contenu de votre site web sur des serveurs du monde entier. Cela peut améliorer les temps de chargement pour les utilisateurs dans différentes régions géographiques. Des services comme Cloudflare et Amazon CloudFront sont des CDN populaires.
- Différer les Images Hors Écran : Mettez en œuvre le chargement différé (lazy loading) pour les images qui ne sont pas immédiatement visibles à l'écran. Cela peut améliorer considérablement le temps de chargement initial de la page. L'attribut
loading="lazy"peut être utilisé pour un chargement différé simple. - Éliminer les Ressources Bloquant le Rendu : Identifiez et éliminez les ressources qui bloquent le rendu de votre page. Cela implique souvent d'intégrer le CSS critique (inlining) et de différer le CSS et le JavaScript non critiques.
- Réduire le Temps d'Exécution du JavaScript : Profilez votre code JavaScript pour identifier et optimiser les fonctions lentes. Des techniques comme le fractionnement de code (code splitting) et l'élagage (tree shaking) peuvent aider à réduire la quantité de JavaScript à télécharger et à exécuter.
Techniques Avancées de Lighthouse CI
Une fois que vous êtes à l'aise avec les bases de Lighthouse CI, vous pouvez explorer quelques techniques avancées pour améliorer davantage votre surveillance de la performance :
- Audits Lighthouse Personnalisés : Vous pouvez créer des audits Lighthouse personnalisés pour tester des problèmes de performance spécifiques pertinents pour votre application.
- Configuration de Chrome Headless : Configurez Chrome Headless pour utiliser des émulations d'appareils ou des paramètres de limitation de réseau spécifiques.
- Intégration avec des Outils de Surveillance : Intégrez Lighthouse CI avec vos outils de surveillance existants (par ex., New Relic, Datadog) pour obtenir une vue plus complète de la performance de votre site web.
- Tests de Régression Visuelle : Combinez Lighthouse CI avec des outils de test de régression visuelle pour détecter les changements visuels qui pourraient impacter la performance.
Lighthouse CI pour un Public International : Considérations pour les Sites Web Internationaux
Lorsque vous utilisez Lighthouse CI pour des sites web ciblant un public mondial, tenez compte des points suivants :
- Tester depuis Plusieurs Emplacements : Les temps de réponse des serveurs peuvent varier considérablement en fonction de l'emplacement de l'utilisateur. Utilisez un CDN (Réseau de Diffusion de Contenu) et envisagez d'exécuter des audits Lighthouse CI depuis différentes régions géographiques pour obtenir une image plus précise de la performance pour vos utilisateurs internationaux. Certains fournisseurs CI/CD offrent des options pour spécifier l'emplacement géographique de l'exécuteur.
- Tenir Compte des Conditions Réseau : Les vitesses et la latence du réseau varient considérablement à travers le globe. Simulez différentes conditions réseau lors de vos audits Lighthouse CI pour comprendre comment votre site web se comporte sous diverses contraintes. Lighthouse vous permet de limiter la connexion réseau, simulant des connexions plus lentes comme la 3G.
- Localisation du Contenu : Assurez-vous que votre contenu localisé est correctement optimisé. Cela inclut l'optimisation des images pour différentes langues et jeux de caractères, ainsi qu'un encodage approprié pour éviter les problèmes d'affichage.
- Chargement des Polices : Optimisez le chargement des polices pour différentes langues. Envisagez d'utiliser font-display: swap pour éviter que le texte ne soit invisible pendant le chargement des polices.
- Scripts Tiers : Soyez attentif aux scripts tiers, car ils peuvent avoir un impact significatif sur la performance, en particulier pour les utilisateurs dans les régions avec des connexions réseau plus lentes. Auditez régulièrement la performance des scripts tiers et envisagez d'utiliser un chargement asynchrone ou d'auto-héberger les scripts critiques.
- Optimisation Mobile : L'utilisation du mobile est prédominante dans de nombreuses parties du monde. Assurez-vous que votre site web est optimisé pour les appareils mobiles et que vos audits Lighthouse CI incluent des tests spécifiques au mobile.
Dépannage des Problèmes Courants de Lighthouse CI
Voici quelques problèmes courants que vous pourriez rencontrer en utilisant Lighthouse CI et comment les résoudre :
- Lighthouse CI Échoue avec une Erreur "Timeout" : Cela peut se produire si votre site web met trop de temps à charger ou si Lighthouse CI ne parvient pas à se connecter à votre site. Essayez d'augmenter la valeur du timeout dans votre fichier
lighthouserc.jsou vérifiez les journaux de votre serveur web pour des erreurs. - Lighthouse CI Rapporte des Résultats Incohérents : Les résultats de Lighthouse peuvent varier légèrement d'une exécution à l'autre en raison des conditions réseau ou d'autres facteurs. Exécutez plusieurs audits pour obtenir une moyenne plus stable.
- Lighthouse CI ne Réussit pas à Téléverser les Résultats : Vérifiez votre configuration
upload.targetet assurez-vous que votre serveur Lighthouse CI est en cours d'exécution et accessible. Vérifiez également que vous avez configuré le bon jeton d'accès. - Lighthouse CI Signale des Régressions de Performance Inattendues : Enquêtez sur les modifications de code qui ont été faites avant que la régression ne soit détectée. Utilisez les rapports de Lighthouse CI pour identifier les métriques de performance spécifiques qui ont régressé et concentrez vos efforts d'optimisation sur ces domaines.
Conclusion
Frontend Lighthouse CI est un outil puissant pour la surveillance continue de la performance des applications web. En intégrant Lighthouse CI dans votre pipeline CI/CD, vous pouvez identifier et résoudre de manière pro-active les problèmes de performance, garantissant que votre site web offre une expérience utilisateur optimale. N'oubliez pas d'adapter votre configuration, vos règles d'assertion et vos lieux de test pour un public international afin de créer la meilleure expérience possible pour les utilisateurs du monde entier.
En suivant les étapes et les meilleures pratiques décrites dans ce guide, vous pouvez améliorer considérablement la performance de votre site web, réduire les taux de rebond, augmenter les taux de conversion et, finalement, atteindre vos objectifs commerciaux. Commencez à mettre en œuvre Lighthouse CI dès aujourd'hui et libérez tout le potentiel de vos applications web.