Budgets de performance : Appliquer la vitesse dans l'IC/DC

Budgets de performance : Fixer des limites de vitesse pour votre site web

Un budget de performance est un ensemble de limites que vous imposez aux ressources de votre site web. C'est comme une limite de vitesse pour votre code. Vous décidez que votre bundle JavaScript ne peut pas dépasser 200 Ko, que vos images ne peuvent pas totaliser plus de 1 Mo et que votre page doit se charger en moins de 2 secondes. Ces limites vous aident à garder votre site rapide à mesure qu'il grandit.

Pourquoi vous avez besoin d'un budget

Sans budget, la performance a tendance à se dégrader avec le temps. Quelqu'un ajoute une nouvelle bibliothèque, puis une autre, puis une grande image, puis un script tiers. Chaque ajout semble petit en soi, mais ensemble, ils ralentissent le site. Un budget détecte ces ajouts avant qu'ils ne deviennent un problème.

Les budgets créent également une compréhension partagée de ce qui est acceptable. Lorsqu'un développeur souhaite ajouter une nouvelle bibliothèque, il peut vérifier si elle rentre dans le budget. Si ce n'est pas le cas, il doit trouver une alternative plus petite ou optimiser autre chose. Cela empêche la lente progression du gonflement.

Sur quoi budgéter

Commencez par les ressources les plus impactantes : la taille totale du JavaScript, la taille totale du CSS, la taille totale des images et le nombre total de requêtes. Ceux-ci affectent directement la vitesse de chargement de la page. Vous pouvez également budgéter des métriques spécifiques : Largest Contentful Paint en moins de 2,5 secondes, First Input Delay en moins de 100 millisecondes, Cumulative Layout Shift en moins de 0,1.

Des budgets plus avancés peuvent inclure le nombre de requêtes tierces, la taille des polices web ou la quantité de JavaScript exécutée au chargement de la page. La clé est de mesurer ce qui compte pour vos utilisateurs et de fixer des limites en conséquence.

Appliquer le budget

Un budget n'est utile que s'il est appliqué. La meilleure façon est de l'intégrer dans votre pipeline CI. Lorsque quelqu'un soumet une demande de tirage, la CI vérifie si les modifications dépassent le budget. Si c'est le cas, la construction échoue. Des outils comme Lighthouse CI, bundlesize et les indicateurs de performance de webpack peuvent automatiser cela.

Cela crée une boucle de rétroaction : les développeurs voient l'impact de leurs changements immédiatement et peuvent faire des ajustements avant de fusionner. Au fil du temps, cela construit une culture de sensibilisation à la performance.

Fixer des limites réalistes

Commencez par mesurer votre performance actuelle. Où en êtes-vous maintenant ? Fixez ensuite un objectif ambitieux mais réalisable. Un point de départ courant est de viser une amélioration de 30 %. Une fois que vous l'avez atteint, fixez un nouvel objectif. Le but est une amélioration progressive et durable, pas une optimisation ponctuelle.

Pour un site de contenu typique, un budget raisonnable pourrait être : 200 Ko de JavaScript (compressé), 100 Ko de CSS, 1 Mo d'images et moins de 20 requêtes. Pour une application web plus complexe, les chiffres pourraient être plus élevés. L'important est de fixer le budget, de s'y tenir et de le réviser périodiquement.