Performance Vitals : un système de notation unifié pour guider la santé et la priorisation des performances | par Coinbase | août 2022

Tl;dr : L’article suivant détaille comment nous mesurons les performances des clients à travers les produits et les équipes interfonctionnelles de Coinbase.

Par Leonardo Zizzamia, ingénieur logiciel senior

Beaucoup de choses ont changé depuis 2018, lorsque l’équipe Web de Coinbase n’était composée que de quelques ingénieurs. À l’époque, tout en travaillant à rendre notre produit plus rapide avec un petit groupe sur une seule plate-forme, nous pouvions nous appuyer sur des outils open source préexistants.

En 2022, Coinbase compte désormais des ingénieurs travaillant sur plusieurs offres de produits et quatre plates-formes : React Web, React Native, Server Side Rendering et Chrome Extension. Les performances sur les quatre plates-formes n’avaient jamais été standardisées auparavant, nous devions donc aborder plusieurs aspects : un manque de données complètes et suffisantes pour certaines plates-formes, la perte d’efficacité lorsque les opportunités de performances ne pouvaient pas être identifiées et une hiérarchisation cohérente entre toutes les équipes.

Sachant cela, nous avons introduit les Performance Vitals : un système de notation de haut niveau qui est clair, fiable et facile à comprendre. Résumer la santé des performances d’une application dans un score fiable et cohérent contribue à augmenter l’urgence et à diriger l’attention et les ressources de l’entreprise vers la résolution de chaque opportunité de performance.

Extension de Google Web Vitals

La communauté des développeurs Web dispose de la norme Core Web Vitals pour aider à mesurer les performances des clients, que nous avons adoptée et que nous utilisons activement chez Coinbase.

Les métriques vitales sont différenciées par des seuils qui classent chaque mesure de performance comme « bien”, “a besoin d’amélioration« , ou « pauvre”.

Vous trouverez ci-dessous un exemple de l’endroit où le seuil pourrait se situer pour l’un des Web Vitals, Time to First Byte.

Pour classer les performances globales d’un produit client, Coinbase suit les meilleures pratiques et utilise la valeur du 85e centile de toutes les mesures pour cette page ou cet écran. Autrement dit, si au moins 85% des mesures sur un site atteint le seuil « bon », le site est classé comme ayant de « bonnes » performances pour cette métrique. Cette métrique est supérieure de 10 points à la norme Google Web Vitals, ce qui nous donne suffisamment de bande passante pour corriger les régressions potentielles.

Le principal outil que nous utilisons pour capturer ces métriques est la bibliothèque Perfume.js, un wrapper autour de l’API Performance Observer qui nous aide à mesurer tous les Core Web Vitals. Cependant, comme nous sommes le principal mainteneur de cette bibliothèque, nous avons profité de cette opportunité pour rechercher et développer de nouvelles solutions autour des mesures de performance Web et des modes d’attribution.

Aujourd’hui, nous introduisons une métrique interne innovante que nous appelons le Temps de blocage total de la navigation (NTBT). Le NTBT mesure la durée pendant laquelle l’application peut être bloquée du traitement du code pendant la fenêtre de 2 secondes après qu’un utilisateur navigue de la page A à la page B. La métrique NTBT est la somme du temps de blocage pour toutes les tâches longues dans la fenêtre de 2 s après cette méthode est invoquée.

L’image ci-dessous est un exemple d’une marque de performance NTBT dans coinbase.com aidant un ingénieur client à suivre la longue tâche et à s’améliorer réactivité lors de la navigation entre les pages.

Une autre façon d’utiliser Perfume.js est utile, c’est que nous pouvons enrichir toutes les métriques avec les informations des API Navigator, pour différencier les expériences bas de gamme et haut de gamme.

Après avoir adopté et étendu Web Vitals, la prochaine étape pour nous consistait à réutiliser ces connaissances dans l’ensemble de notre pile.

Points vitaux des performances de Coinbase

En plus de créer des applications Web, nous créons des applications mobiles React Native et les services qui fournissent leurs données. Nous avons réutilisé les meilleures pratiques Web Vitals et créé de nouvelles métriques pour servir les applications React Native et nos services Backend. Ensemble, nous les appelons « Performances vitales», et ils nous donnent une vue globale des scores de performance de toutes nos applications, de l’aval (Navigateur & Apps) à l’amont (Backend Services).

Comme le montre le tableau ci-dessous, les performances vitales sont divisées de bout en bout, de l’aval vers l’amont.

Créer React Native Vitals

Lors de l’évaluation des performances de React Native, nous avons développé les Vitals initiaux de Rendu d’application terminé et Temps de blocage total de la navigation.

• Rendu d’application terminé (ARC) : Mesure le temps qu’il faut pour passer du démarrage de l’application au rendu complet du contenu à l’utilisateur sans charger d’indicateurs. Le bon seuil de 5s est basé sur les conseils de la recherche officielle de la communauté Android.
• Temps de blocage total de la navigation (NTBT) : Mesure la durée pendant laquelle l’application peut être bloquée dans le traitement du code pendant la fenêtre de 2 s après qu’un utilisateur navigue de l’écran A à l’écran B.

Pour NTBT, nous avons utilisé les connaissances existantes sur le temps de blocage total de Web Vitals pour déterminer un seuil pour le mobile. Étant donné qu’un bon TBT sur le Web est de 200 ms et que nous prévoyons que le mobile prendra plus de temps, nous avons doublé la norme du Web pour arriver à 400 ms pour le mobile.

La vidéo suivante montre comment un ingénieur produit peut détecter les tâches longues, mesurer le temps de blocage total lors de la navigation entre les pages et des mesures NTBT supplémentaires.

Cette métrique aide à détecter la lenteur potentielle d’une interface utilisateur, généralement causée par l’exécution de tâches longues sur le thread principal, le blocage du rendu ou la consommation excessive de puissance du processeur sur les processus d’arrière-plan.

Semblable à l’expérience du Web, Coinbase a construit une bibliothèque interne React Native Core Vitals pour mesurer cette performance, dans le but de approvisionnement ouvert notre découverte à la communauté dans les prochains trimestres.

Création de vitaux backend

Comme nous l’avons fait avec Web et React Native Vitals, nous avons étendu la norme Vitals aux services backend, y compris GraphQL et Backend Services.

Les deux métriques que nous avons d’abord créées sont :

• Temps de réponse GraphQL (GRT) : Temps d’aller-retour pour que le service GraphQL réponde à une requête.
• Temps de réponse en amont (URT) : Temps d’aller-retour pour que la passerelle API serve un service de backend.

Pour déterminer un bon score pour représenter la latence du backend, nous avons pris en compte plusieurs points :

1. Du point de vue de l’utilisateur, le temps de réponse du système semble immédiat lorsqu’il est inférieur à 1 s.
2. Nous devons également tenir compte du fait que le coût du réseau peut varier entre 50 ms et 500 ms, selon la région à partir de laquelle un utilisateur accède à notre produit.
3. Sur la base des points 1 et 2, la latence de GraphQL ne doit pas dépasser 500 ms, ce qui signifie que les services en amont doivent répondre en moins de 300 ms car les requêtes GraphQL doivent attendre le point de terminaison le plus lent.
4. Par conséquent, nous avons conclu que le seuil pour un bon score GRT est de 500 ms et un bon score URT est de 300 ms.

Pour Backend Vitals, nous visons au moins 99 % des mesures pour chaque demande enregistrée pour atteindre le seuil « Bon ».

Au fur et à mesure que nous continuons à améliorer nos performances, nous réexaminerons nos bons scores chaque année, en les abaissant éventuellement au fil du temps afin de pouvoir réduire davantage la latence pour nos utilisateurs.

L’instrumentation pour Vitals principaux est composé de trois pièces essentielles. Tout d’abord, nous utilisons notre bibliothèque d’analyse interne pour définir des métadonnées telles que le produit, la plate-forme et les pages. Ensuite, nous propageons ces informations dans nos API, et finalement nous co-localisons les métriques de performance avec les métadonnées Web ou React Native.

Découverte et hiérarchisation de Performance Vitals

En utilisant le même notation métrique et attribution système à travers différentes spécialités chez Coinbase, il est facile d’identifier les domaines d’opportunité et aligne les ingénieurs frontend et backend dans les efforts de performance.

Tous les Performance Vitals sont basés sur des données en temps réel de nos applications de production et peuvent être découverts par filtres standardiséstels que : nom du produit, plate-forme, page, est connecté, région géographique, opération GraphQL et service backend.

Ce niveau de précision devient particulièrement utile pour la détection d’anomalies en temps réel. Toutes les équipes sont en mesure de posséder les mesures de performance de leur surface de produit, ce qui leur donne la possibilité d’avoir des moniteurs automatisés pour les changements de performance et d’être alertés lorsque des régressions se produisent.

En cas de régression des performances, nous utilisons le pourcentage de la régression pour déterminer s’il est essentiel d’ouvrir un incident et d’atténuer le problème dès que possible, ou de créer un bogue qui peut être résolu dans le sprint à venir.

Planification trimestrielle et annuelle

Les Performance Vitals sont parfaits pour la planification KR, car ils mesurent un score de 0 à 100 et peuvent être facilement stockés pendant plus d’un an. Un langage commun pour tous les KR de performance facilite également la création d’objectifs partagés pour les équipes de toute l’organisation.

Voici quelques exemples de la façon dont vous pouvez encadrer vos KR :

• [Year KR] Atteignez un bon score NTBT de 90 %, contre 70 % dans l’application mobile Coinbase.
• [Quarter KR] Améliorez le bon score LCP de 70 % à 85 % sur le Web Coinbase.

Suivant

Performance Vitals revient à trouver un langage commun, qu’il s’agisse de standardiser les filtres, de définir des KR trimestriels ou d’unifier un système de notation. Qu’il s’agisse d’une petite équipe travaillant sur une régression API ou de grandes initiatives menées par plusieurs organisations, parler le même langage aide tous les types de hiérarchisation des produits.

À l’avenir, nous prévoyons d’ouvrir certains de nos apprentissages et de partager davantage sur la mesure et la conduite de l’impact pour les parcours utilisateur critiques et sur la manière dont nous utilisons l’automatisation et les processus internes pour permettre à chacun chez Coinbase de créer des produits performants.