Commentaires demandés: une métrique expérimentale de réactivité

Des nouvelles de notre intention concernant la mesure de la réactivité sur le Web.

Hongbo Song

Plus tôt cette année, l'équipe Chrome chargée des métriques de vitesse a présenté certaines des d'idées que nous avions envisagées nouvelle métrique de réactivité. Nous voulons concevoir une métrique qui reflète mieux la latence de bout en bout des événements individuels et offre une vue plus holistique de la réactivité globale d'une page tout au long de sa durée de vie.

Ces derniers mois, nous avons fait de gros progrès concernant cette métrique. je souhaitais vous parler de la façon dont nous prévoyons de mesurer la latence des interactions présentant quelques options d'agrégation spécifiques que nous envisageons d'utiliser pour quantifier la réactivité globale d'une page Web.

Nous aimerions recevoir des commentaires de la part des développeurs et des propriétaires de sites Laquelle de ces options représente le mieux la réactivité de leurs pages.

Mesurer la latence des interactions

Pour rappel, la métrique FID (First Input Delay) capture le la partie retard de la latence d'entrée. C'est-à-dire le temps entre lorsque l'utilisateur interagit avec la page jusqu'au moment où les gestionnaires d'événements sont s'exécuter.

Nous prévoyons de l'étendre à cette nouvelle statistique pour capturer l'intégralité de l'événement durée, de l'entrée utilisateur initiale jusqu'à ce que le cadre suivant soit peint après tous les gestionnaires d'événements ont été exécutées.

Nous prévoyons aussi de mesurer vos interactions plutôt que sur des événements individuels. Les interactions sont des groupes d'événements envoyé dans le cadre d'un même geste logique de l'utilisateur (par exemple: pointerdown, click et pointerup).

Pour mesurer la latence totale de l'interaction d'un groupe d'événements individuels nous envisageons deux approches possibles:

• Durée maximale des événements:la latence d'interaction est égale à la latence la plus élevée. la durée d'un seul événement à partir de n'importe quel événement du groupe d'interaction.
• Durée totale des événements:la latence d'interaction correspond à la somme de tous les événements. des durées, en ignorant tout chevauchement.

À titre d'exemple, le schéma ci-dessous illustre une interaction appui d'une touche qui consiste en d'un événement keydown et d'un événement keyup. Cet exemple présente un chevauchement de durée entre ces deux événements. Pour mesurer la latence de l'interaction en appuyant sur une touche, nous pouvons utiliser max(keydown duration, keyup duration) ou sum(keydown duration, keyup duration) - duration overlap:

Chaque approche a des avantages et des inconvénients, et nous aimerions collecter plus de données et commentaires avant de finaliser la définition de la latence.

Agréger toutes les interactions par page

Une fois que nous sommes en mesure de mesurer la latence de bout en bout de toutes les interactions, l'étape suivante consiste à définir un score global pour une visite de page, ce qui peut contenir plus plusieurs interactions.

Après avoir exploré plusieurs options, nous avons limité notre sélection aux stratégies décrites dans la section suivante, que nous utilisons en collectant des données utilisateur réelles dans Chrome. Nous prévoyons de publier les résultats les résultats une fois que nous avons eu le temps de collecter suffisamment de données, mais nous cherchons également afin d'obtenir des commentaires directs de la part des propriétaires de sites qui reflètent le plus précisément les schémas d'interaction sur leurs pages.

Options des stratégies d'agrégation

Pour mieux comprendre chacune des stratégies suivantes, prenons un exemple de visite de page. qui comprend quatre interactions:

Latence d'interaction la plus faible

La plus grande latence d'interaction individuelle qui s'est produite sur une page. Étant donné le exemples d'interactions listés ci-dessus, la latence d'interaction la pire est de 120 ms.

Stratégies budgétaires

Expérience utilisateur recherche suggère que les utilisateurs ne perçoivent peut-être pas les latences inférieures à certains seuils comme négative. Sur la base de cette étude, nous envisageons plusieurs stratégies budgétaires. selon les seuils suivants pour chaque type d'événement:

Chacune de ces stratégies ne tiendra compte que de la latence supérieure à la latence par interaction. Reprenons l'exemple de visite de page ci-dessus. les montants dépassant le budget se présenteraient comme suit:

Latence la plus élevée des interactions par rapport au budget

Latence la plus élevée d'une interaction unique par rapport au budget. Dans l'exemple ci-dessus, le score est de max(20, 0, 10, 30) = 30 ms.

Latence totale de l'interaction par rapport au budget

Somme de toutes les latences d'interaction au-delà du budget. Dans l'exemple ci-dessus, le score est de (20 + 0 + 10 + 30) = 60 ms.

Latence moyenne des interactions par rapport au budget

La latence totale de l'interaction au-dessus du budget divisée par le nombre total des interactions. Dans l'exemple ci-dessus, le score serait (20 + 0 + 10 + 30) / 4 = 15 ms.

Approximation des quantiles élevés

Au lieu de calculer la latence d'interaction la plus élevée par rapport au budget, nous utilisons également considéré comme utilisant une approximation des quantiles élevées, ce qui devrait être plus les pages Web qui ont de nombreuses interactions et qui sont plus susceptibles d'avoir de grandes les valeurs aberrantes. Nous avons identifié deux stratégies d'approximation potentielles pour un quantile élevé. nous aimons:

• Option 1:Effectuez le suivi des interactions les plus importantes et les deuxième plus importantes du budget. Au bout de 50 nouvelles interactions, supprimez la plus grande interaction de la l'ensemble précédent (50) et d'ajouter la plus grande interaction de l'ensemble actuel (50). La valeur finale correspondra à l'interaction restante la plus importante au-delà du budget.
• Option 2:calculer les 10 interactions les plus importantes au-delà du budget et choisir un de cette liste en fonction du nombre total d'interactions. N donné nombre total d'interactions, sélectionnez la valeur (N / 50 + 1) la plus grande ou la 10e pour les pages avec plus de 500 interactions.

Mesurer ces options en JavaScript

L'exemple de code suivant peut être utilisé pour déterminer les valeurs les trois stratégies présentées ci-dessus. Notez qu'il n'est pas encore possible de mesurer nombre total d'interactions sur une page en JavaScript, cet exemple ne l'interaction moyenne par rapport à la stratégie budgétaire d'approximation de quantiles.

const interactionMap = new Map();

let worstLatency = 0;
let worstLatencyOverBudget = 0;
let totalLatencyOverBudget = 0;

new PerformanceObserver((entries) => {
  for (const entry of entries.getEntries()) {
    // Ignore entries without an interaction ID.
    if (entry.interactionId > 0) {
      // Get the interaction for this entry, or create one if it doesn't exist.
      let interaction = interactionMap.get(entry.interactionId);
      if (!interaction) {
        interaction = {latency: 0, entries: []};
        interactionMap.set(entry.interactionId, interaction);
      }
      interaction.entries.push(entry);

      const latency = Math.max(entry.duration, interaction.latency);
      worstLatency = Math.max(worstLatency, latency);

      const budget = entry.name.includes('key') ? 50 : 100;
      const latencyOverBudget = Math.max(latency - budget, 0);
      worstLatencyOverBudget = Math.max(
        latencyOverBudget,
        worstLatencyOverBudget,
      );

      if (latencyOverBudget) {
        const oldLatencyOverBudget = Math.max(interaction.latency - budget, 0);
        totalLatencyOverBudget += latencyOverBudget - oldLatencyOverBudget;
      }

      // Set the latency on the interaction so future events can reference.
      interaction.latency = latency;

      // Log the updated metric values.
      console.log({
        worstLatency,
        worstLatencyOverBudget,
        totalLatencyOverBudget,
      });
    }
  }
  // Set the `durationThreshold` to 50 to capture keyboard interactions
  // that are over-budget (the default `durationThreshold` is 100).
}).observe({type: 'event', buffered: true, durationThreshold: 50});

Commentaires

Nous souhaitons encourager les développeurs à tester ces nouvelles métriques de réactivité leurs sites et faites-nous savoir si vous constatez un problème.

Envoyez par e-mail à l'équipe d'assistance tout commentaire général sur les approches décrites ici web-vitals-feedback Google par "[Métriques de réactivité]" dans la ligne d'objet. Nous cherchons vraiment Nous avons hâte de connaître votre avis.