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

Du nouveau sur nos projets de mesure de la réactivité sur le Web.

Hongbo Song

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

Nous avons beaucoup progressé sur cette métrique au cours des derniers mois. Nous souhaitons vous informer sur la manière dont nous prévoyons de mesurer la latence d'interaction et vous présenter quelques options d'agrégation spécifiques que nous envisageons de quantifier la réactivité globale d'une page Web.

Nous aimerions recueillir les commentaires des développeurs et des propriétaires de sites pour nous indiquer quelles options sont les plus représentatives de la réactivité globale aux entrées de leurs pages.

Mesurer la latence des interactions

Pour rappel, la métrique First Input Delay (FID) capture la partie délai de la latence d'entrée. C'est-à-dire le délai entre l'interaction de l'utilisateur avec la page et le moment où les gestionnaires d'événements peuvent s'exécuter.

Avec cette nouvelle métrique, nous prévoyons de l'étendre pour capturer la durée complète de l'événement, de l'entrée utilisateur initiale jusqu'à la peinture du frame suivant une fois que tous les gestionnaires d'événements ont été exécutés.

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

Pour mesurer la latence d'interaction totale à partir d'un groupe de durées d'événements individuels, nous envisageons deux approches possibles:

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

À titre d'exemple, le schéma ci-dessous illustre une interaction d'appui sur une touche composée d'un événement keydown et d'un événement keyup. Dans cet exemple, il y a un chevauchement de durée entre ces deux événements. Pour mesurer la latence de l'interaction lorsque l'utilisateur appuie sur une touche, nous pouvons utiliser max(keydown duration, keyup duration) ou sum(keydown duration, keyup duration) - duration overlap:

Chaque approche présente des avantages et des inconvénients, et nous aimerions recueillir davantage de données et de commentaires avant de finaliser une définition de 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, qui peut contenir plusieurs interactions.

Après avoir exploré plusieurs options, nous avons restreint nos choix aux stratégies décrites dans la section suivante, pour lesquelles nous collectons actuellement des données utilisateur réelles dans Chrome. Nous prévoyons de publier les résultats de nos conclusions une fois que nous aurons eu le temps de recueillir suffisamment de données. Toutefois, nous attendons également les commentaires directs des propriétaires de sites pour savoir quelle stratégie refléterait le mieux les schémas d'interaction sur leurs pages.

Options des stratégies d'agrégation

Pour vous aider à comprendre chacune des stratégies suivantes, prenons un exemple de visite de page composée de quatre interactions:

Latence d'interaction la plus faible

Latence la plus importante des interactions individuelles qui se sont produites sur une page. Pour les exemples d'interactions répertoriés ci-dessus, la pire latence d'interaction est de 120 ms.

Stratégies budgétaires

Des recherches sur l'expérience utilisateur suggèrent que les utilisateurs ne perçoivent peut-être pas les latences inférieures à certains seuils comme négatives. Sur la base de cette étude, nous envisageons plusieurs stratégies budgétaires basées sur les seuils suivants pour chaque type d'événement:

Chacune de ces stratégies ne prend en compte que la latence supérieure au seuil budgétaire par interaction. Pour l'exemple de visite de page ci-dessus, les montants hors budget seraient les suivants:

Latence d'interaction la plus faible par rapport au budget

La latence d'interaction unique la plus élevée au-delà du budget. Dans l'exemple ci-dessus, le score est de max(20, 0, 10, 30) = 30 ms.

Latence totale des interactions au-delà du 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 d'interaction moyenne par rapport au budget

Latence totale des interactions hors budget divisée par le nombre total d'interactions. En utilisant l'exemple ci-dessus, le score serait (20 + 0 + 10 + 30) / 4 = 15 ms.

Approximation en quantiles élevé

Au lieu de calculer la plus grande latence d'interaction par rapport au budget, nous avons également envisagé d'utiliser une approximation en quantiles élevée, qui devrait être plus juste avec les pages Web qui ont de nombreuses interactions et qui sont plus susceptibles de présenter des anomalies importantes. Nous avons identifié deux stratégies d'approximation en quantiles élevées qui pourraient nous intéresser:

• Option 1:effectuez le suivi des interactions les plus importantes et les plus importantes par rapport au budget. Au bout de 50 nouvelles interactions, abandonnez la plus grande interaction de l'ensemble précédent (50) et ajoutez la plus grande de l'ensemble actuel (50). La valeur finale correspond à la plus grande interaction restante au-delà du budget.
• Option 2:calculez les 10 interactions les plus importantes par rapport au budget et choisissez une valeur dans cette liste en fonction du nombre total d'interactions. Sur un total de N interactions, sélectionnez la plus grande valeur (N / 50 + 1) ou la 10e valeur pour les pages comptant plus de 500 interactions.

Mesurer ces options dans JavaScript

L'exemple de code suivant permet de déterminer les valeurs des trois premières stratégies présentées ci-dessus. Notez qu'il n'est pas encore possible de mesurer le nombre total d'interactions sur une page en JavaScript. Cet exemple n'inclut donc pas la stratégie d'interaction moyenne par rapport au budget ni les stratégies 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é sur leurs sites et nous contacter si vous découvrez un problème.

Envoyez tout commentaire général sur les approches décrites ici au groupe Google web-vitals-feedback en indiquant "[Métriques de réactivité]" en objet. Nous avons hâte de savoir ce que vous en pensez !