Introduction : La Performance Comme Exigence, Pas Comme Option
Les performances web ne sont pas un aspect à optimiser « quand on a le temps ». Chaque milliseconde de retard de chargement se traduit par des utilisateurs perdus. Les performance budgets transforment la performance d'un objectif vague en une contrainte mesurable et automatisée.
Ce Que Vous Apprendrez dans Cet Article
- Ce que sont les performance budgets et pourquoi ils sont importants
- Comment configurer les budgets dans
angular.json - Comment installer et configurer Lighthouse CI (lhci)
- Comment intégrer Lighthouse CI avec GitHub Actions
- Comment suivre les scores dans le temps
- Comment surveiller la taille du bundle
- Comment faire échouer le build en cas de régressions
1. Qu'est-ce que les Performance Budgets
Métriques de Performance Budget
| Métrique | Description | Budget Recommandé |
|---|---|---|
| Bundle size | Taille totale des fichiers JS et CSS | JS initial < 300 KB (gzip) |
| LCP | Largest Contentful Paint | < 2,5 secondes |
| FID/INP | Interaction to Next Paint | < 200 ms |
| CLS | Cumulative Layout Shift | < 0,1 |
2. Performance Budgets dans angular.json
3. Setup de Lighthouse CI
Différence entre Error et Warn dans les Assertions
Les assertions de niveau error font échouer le build. Celles de niveau warn génèrent un avertissement sans bloquer le pipeline.
4. Intégration avec GitHub Actions
5. Suivre les Scores dans le Temps
6. Surveillance de la Taille du Bundle
7. Comparaison avec les Outils Alternatifs
8. Faire Échouer le Build sur les Régressions
Stratégie d'Implémentation Graduelle
- Semaine 1 : Exécuter Lighthouse CI en mode
warnpour collecter une ligne de base - Semaine 2 : Définir des seuils basés sur la ligne de base (moyenne - 5%)
- Semaine 3 : Passer les métriques critiques (LCP, CLS) en
error - Semaine 4 : Activer les branch protection rules pour exiger le check Lighthouse
Conclusion
Nous avons construit un système complet de surveillance des performances dans le pipeline CI/CD.
Dans le dernier article, nous aborderons la surveillance et les alertes pour les applications web.







