Catégories
Astuces et Design

Mesure des éléments vitaux Web de base avec Sentry

Chris a pris quelques notes sur Core Web Vitals l'autre jour, expliquant pourquoi la mesure de ces mesures de performance est si importante:

Je pense toujours que les Core Web Vitals conçus par Google sont intelligents. Quand j'ai commencé à me soucier de la performance, c'était tout: réduire les demandes! cache les choses! Faites des choses plus petites! Et bien que ceux-ci soient tous très liés aux performances Web, ils sont liés de manière abstraite. Les performances Web réelles pour les utilisateurs sont des choses comme combien de temps ai-je dû attendre pour voir le contenu de la page? Combien de temps avant que je puisse réellement interagir avec la page, comme taper un formulaire ou cliquer sur un lien? Est-ce que les choses ont bougé de façon odieuse pendant que j'essayais de faire quelque chose? C’est pourquoi Core Web Vitals est intelligent: il mesure ces choses.

Il existe certainement de nombreux outils qui vous aident à mesurer ces mesures extrêmement importantes. Le message de Chris était opportun car là où je travaille chez Sentry¹, nous lançons notre propre point de vue sur ce sujet. Ma blogueuse et mentor préférée une fois par an chez Sentry, Dora Chan, a expliqué pourquoi l'utilisation de données utilisateur réelles est importante pour mesurer les Web Vitals et comment notre propre produit l'aborde:

Google Web Vitals peut être consulté à l'aide de l'extension Google Chrome Lighthouse. Vous vous demandez peut-être: "Pourquoi aurais-je besoin de Sentry pour voir de quoi il s'agit si je possède déjà Google?" Bonne question. Google fournit des données de laboratoire synthétiques, dans lesquelles vous pouvez contrôler directement votre environnement, votre appareil et la vitesse de votre réseau. C'est bien et tout, mais ça ne peint qu'une partie du tableau. Peindre. Tu piges?

Sentry rassemble des données de terrain agrégées sur ce que vos utilisateurs vivent réellement lorsqu'ils interagissent avec votre application. Cela inclut le contexte sur la vitesse du réseau variable, le navigateur, le périphérique, la région, etc. Avec Web Vitals, nous pouvons vous aider à comprendre ce qui se passe dans la nature, à quelle fréquence cela se produit, pourquoi et quoi d'autre est lié au comportement.

Sentry décompose toutes ces transactions en métriques les plus importantes pour que vous puissiez voir Comment vos clients rencontrent des problèmes de performances. Peut-être 42% du temps qu'une transaction a un délai d'entrée de plus de 301 ms. Sentry montrerait ce problème et sa corrélation avec d'autres problèmes de performances.

je pense ce C'est la puissance de lier Core Web Vitals avec les données des utilisateurs – ou ce que Dora appelle les «données de terrain» – parce que certains de nos utilisateurs utilisent une application rapide! Ils ont un super wifi! Tous les wifis! C'est génial et tout, mais il y a encore des utilisateurs de l'autre côté qui supportent une expérience plus misérable, et avoir un visuel basé sur des données utilisateur réelles nous permet de voir quelles actions spécifiques ralentissent les choses. Ces informations nous donnent la confiance nécessaire pour accéder à la base de code et résoudre le problème, mais elles aident également à hiérarchiser ces problèmes en premier lieu. C'est quelque chose dont nous ne parlons pas vraiment en matière de performance.

Quel est le problème de performances le plus important avec votre application maintenant? C'est une question plus délicate que nous aimerions l'admettre. Peut-être qu'une première peinture de cinq secondes n'est pas un compromis sur la page des paramètres de votre application, mais trois secondes sur la page de paiement sont insupportables pour l'entreprise et les clients.

Alors, oui, les problèmes de performance sont bizarres comme ça; le même résultat d'une métrique peut signifier différentes choses en fonction du contexte. Et certaines mesures sont plus importantes que d'autres en fonction de ce contexte.

C’est vraiment pourquoi je suis si enthousiasmé par tous ces outils. Voir comment les utilisateurs vivent une application en temps réel, puis, par la suite, visualiser comment les statistiques changent au fil du temps – c'est tout simplement magique. Les partitions de Lighthouse sont bonnes et dandy, et, ne vous méprenez pas, elles sont très utiles. Il ne s'agit tout simplement pas d'une mesure extrêmement précise de la façon dont les utilisateurs utilisent réellement votre application basée sur votre Les données.

C'est là qu'une autre fonctionnalité de Sentry entre en jeu. Une fois que vous vous êtes inscrit et que vous avez tout configuré, accédez à la section Performances et vous verrez quelles transactions s'améliorent avec le temps et lesquelles ont régressé ou sont devenues plus lentes:

Tony Xiao est ingénieur chez Sentry et il a écrit sur la façon dont il a utilisé cette fonctionnalité pour enquêter sur un problème frontal. C'est vrai: nous utilisons Sentry pour mesurer notre travail Sentry (whoa, création). En regardant le rapport sur les transactions les plus régressées, Tony a pu creuser dans la transaction spécifique qui a déclenché un résultat négatif et identifier le problème sur-le-champ. Voici comment il l'a décrit:

Pour une faute, le code est fidèle à son auteur. C’est pourquoi il est essentiel de communiquer avec votre code. Et c'est pourquoi les tendances en matière de surveillance des performances sont si précieuses: non seulement elles vous aident à comprendre les hauts et les bas, mais elles peuvent également vous orienter dans la bonne direction.

Quoi qu'il en soit, je n'essaye pas vraiment de te vendre Sentry ici. Je suis plus intéressé par la manière dont le domaine du développement front-end évolue et je pense que c’est très excitant que tous ces outils de l’industrie se réunissent en ce moment. On a l'impression que notre compréhension des problèmes de performance s'améliore – le langage, les outils, les techniques évoluent tous et le vent tourne dans notre industrie.

Et c’est quelque chose à célébrer.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *