Budget de Performance Web : Métriques, Limites et Intégration CI/CD

Qu'est-ce que le Budget de Performance ?

Le budget de performance sont les valeurs maximales définies pour les métriques de performance de la page web. Taille de la page, taille du bundle JavaScript, temps de LCP, etc.

Objectif : Prévenir les régressions de performance. Prévenir la dégradation des performances lors de l'ajout de nouvelles fonctionnalités.

Dépassement du budget : Échec du build ou avertissement. Vérification de performance dans le pipeline CI/CD.

Budgets d'exemple : JS bundle < 200KB, CSS < 50KB, LCP < 2.5s, taille totale de la page < 1MB.

Métriques de Performance

Taille du bundle : Tailles des fichiers JavaScript et CSS. Analyser avec webpack bundle analyzer.

LCP (Largest Contentful Paint) : Temps de chargement du plus grand élément de contenu. Objectif < 2.5s.

CLS (Cumulative Layout Shift) : Décalages dans la mise en page de la page. Objectif < 0.1.

INP (Interaction to Next Paint) : Temps de réponse à l'interaction de l'utilisateur. Objectif < 200ms.

TTFB (Time to First Byte) : Temps de réponse du serveur. Objectif < 600ms.

Poids total de la page : Taille totale de la page. Objectif < 1-2MB (pour mobile).

Création du Budget

Mesurez la performance actuelle : Créez une baseline avec Lighthouse, WebPageTest.

Fixez des objectifs : Basé sur l'analyse des concurrents et les attentes des utilisateurs. Budget plus strict pour mobile.

Fichier de budget : Définissez les métriques et les limites avec performance-budget.json.

Durcissement progressif : Commencez avec un budget proche de la performance actuelle. Durcissez au fil du temps.

Adoption par l'équipe : Toute l'équipe doit adopter le budget de performance. La performance est la responsabilité de tous.

Intégration CI/CD

Lighthouse CI : Audit Lighthouse à chaque PR. Vérification du seuil de score de performance. Échec du build si le budget est dépassé.

WebPageTest : Intégration WebPageTest dans le pipeline CI/CD. Comparaison de filmstrip et waterfall.

Vérification de la taille du bundle : Vérification de la taille du bundle avec webpack-bundle-analyzer ou bundlesize.

GitHub Actions : Test de performance automatique avec l'action Lighthouse CI. Rapport de résultats en commentaire de PR.

Configuration du seuil : Niveaux d'avertissement et d'erreur. Avertissement : 90% du budget. Erreur : 100% du budget.

Monitoring et Reporting

RUM (Real User Monitoring) : Données de performance des utilisateurs réels. CrUX, Datadog, New Relic.

Synthetic monitoring : Tests de performance périodiques. WebPageTest, Pingdom, GTmetrix.

Dashboard : Visualisez les tendances de performance. Dashboard Grafana, Datadog.

Alerting : Alerte en cas de dépassement du budget. Notification Slack, email.

Reporting : Rapport de performance hebdomadaire/mensuel. Analyse des tendances et recommandations d'amélioration.

Meilleures Pratiques

Performance champion : Assignez la responsabilité de la performance dans l'équipe. Diffusez la culture de la performance.

Revue du budget : Revoyez le budget à la fin de chaque sprint. Ajustez le budget pour les nouvelles fonctionnalités.

Trade-off : Nouvelle fonctionnalité vs performance. Chaque fonctionnalité apporte un coût de performance. Prenez une décision consciente.

Documentation : Documentez le budget de performance et la justification. Pour l'onboarding de l'équipe.

Amélioration continue : Durcissez progressivement le budget de performance. Objectif d'amélioration de 10%.