InMy.Live

8 janvier 2020

Écrit par Harry Robert sur Magie CSS.

L’un des principaux outils dont disposent les ingénieurs de performance est le budget de performance : il nous aide, ou, plus important encore, nos clients, à garantir que tout travail axé sur la performance est surveillé et maintenu après notre départ.

En établissant un seuil acceptable, qu’il soit basé sur les données RUM, l’analyse des bundles, le poids de l’image, les délais d’étape ou toute autre mesure appropriée, nous pouvons être sûrs que les travaux nouveaux ou non liés n’ont pas d’impact négatif sur les performances de notre placer.

La difficulté réside toutefois dans la définition même de ces seuils. Ce message est pour tous ceux qui ont lutté avec la question, Mais quels devraient être réellement nos budgets ? !

Cibles vs sauvegardes

Face à la tâche d’établir un tout nouveau budget, il peut sembler intimidant, presque paralysant, d’essayer de trouver une valeur à la fois atteignable mais efficace. Est-ce trop ambitieux ? N’est-ce pas assez ambitieux ? Est-ce que ça va être vraiment difficile à frapper ? Ou risquons-nous de le rendre si facile à réaliser que c’est presque inutile ? Comment savons nous? Combien de temps faudra-t-il pour le savoir ?

Voici le truc : la plupart des organisations ne sont pas prêtes à relever des défis, elles ont besoin de filets de sécurité. Les budgets de performance ne devraient pas être des choses vers lesquelles travailler, ils devraient être des choses qui nous empêchent de dépasser un certain point. Ils ne doivent pas être ambitieux, ils doivent être préventifs.

Maintes et maintes fois, j’entends des clients discuter de leurs budgets de performance en termes d’objectifs : Nous visons un budget de 250 Ko JavaScript non compressé;
nous espérons être interactif en 2.75s. Bien qu’il soit absolument vital que ces objectifs existent et soient activement travaillés, cela ne fait pas partie de votre budgétisation. Votre budgétisation est en fait beaucoup, beaucoup plus simple :

Notre budget pour [metric] n’est jamais pire qu’en ce moment.

Les deux dernières semaines

Quelle que soit la surveillance que vous utilisez (j’adore SpeedCurve et Treo), ma suggestion pour établir un budget pour toute mesure traçable est de prendre le pire point de données au cours des deux dernières semaines et de l’utiliser comme limite. Les temps de chargement étaient de 7,2 s ? Vous n’êtes pas autorisé à aller plus lentement que cela. La taille de JS était de 478 Ko ? Vous ne pouvez plus en introduire sans refactoriser ce qui existe déjà. 68 demandes de tiers ? Vous ne pouvez plus en ajouter.

Ensuite, toutes les deux semaines, vous revoyez votre surveillance et l’une des trois choses suivantes peut se produire :

1. Votre nouveau pire point est meilleur que le précédent : C’est le meilleur résultat ! Disons que vous êtes passé d’un temps de chargement de 7,2 s et que votre pire valeur est maintenant de 6,8 s – bravo ! Maintenant, votre budget est mis à jour à 6,8 et votre travail consiste à ne pas régresser au-delà.
2. Votre nouveau pire point est le même que le précédent : C’est quand même une bonne nouvelle, nous n’avons pas régressé ! Mais nous ne nous sommes pas améliorés non plus. Dans ce scénario, nous n’avons rien à faire. Au lieu de cela, nous laissons simplement le budget tel qu’il était et espérons que nous pourrons continuer sur la même voie.
3. Votre nouveau pire point est pire que le précédent : Oh oh. C’est une mauvaise nouvelle. Les choses ont dérapé. Dans ce scénario, nous ne modifions pas le budget. Nous ne pouvons pas augmenter les budgets à moins qu’il y ait une raison très valable et convenue de le faire. Au lieu de cela, nous redoublons d’efforts pour résoudre le problème et nous remettre sur la bonne voie.

En revoyant et en redéfinissant constamment les budgets dans des instantanés bihebdomadaires, nous sommes en mesure d’apporter des améliorations lentes, régulières et progressives. Mais l’essentiel à retenir est que nous ne pouvons jamais augmenter un budget de performance ; nous ne pouvons pas changer le test juste pour le rendre passable. On peut en maintenir ou en diminuer un, mais on ne peut pas l’augmenter, car cela les affaiblirait complètement.

Exemples de budgets de performance

Les graphiques SpeedCurve suivants montrent respectivement les budgets Visually Complete, Start Render et Fully Loaded pour CSS Wizardry sur un Galaxy S4 3G du Royaume-Uni.

Sous budget

J’ai défini un budget Visually Complete de 3 s, mais je fais bien mieux que cela tous les jours au cours des quinze derniers jours. Le rendu de démarrage le plus lent au cours de cette période était de 2,4 secondes. Je dois donc mettre à jour mon budget en conséquence et maintenir le nouveau maximum pendant les deux prochaines semaines avant de revenir une fois de plus.

Budget

Avec un budget alloué de 2 s pour Start Render, je trouve que la plupart des jours, je suis en fait assez bien en deçà du budget, ce qui est une excellente nouvelle. Cela dit, à quatre reprises, je ne fais que pousser la ligne. Cela signifie que je dois être attentif au cours des deux prochaines semaines, mais je n’ai pas besoin de mettre à jour quoi que ce soit. Ce budget est probablement assez judicieusement fixé car il est clairement réalisable, mais il est sur le point de nécessiter une contribution proactive pour rester dans les limites.

Dépassement de budget

Oh oh. Je dépasse complètement mon temps à pleine charge chaque jour, et parfois jusqu’à quatre secondes. Je ne peux pas réinitialiser le budget (à moins qu’il ne soit décidé que, pour une raison quelconque, 6s était complètement incorrect en premier lieu) mais j’ai du travail à faire. De toute évidence, j’ai décidé que les temps de chargement sont suffisamment importants pour être surveillés, je dois donc retrousser mes manches et me mettre au travail pour réparer les choses.

À ton tour

La définition des budgets de performance n’a pas besoin d’être complexe ou déroutante, vous avez simplement besoin de données existantes, d’une surveillance et de vous rappeler que les budgets et les objectifs sont deux choses différentes. Ne vous compliquez pas la vie en traitant les budgets de performance comme des aspirations.

☕️ Cela vous a-t-il aidé ? Achetez-moi un café !