Feedback gewünscht: ein experimenteller Messwert für die Reaktionsfähigkeit

Neuigkeiten zu unseren Plänen zur Messung der Reaktionsfähigkeit im Web

Hongbo Song

Anfang des Jahres hat das Chrome-Team für Geschwindigkeitsmessungen einige der Ideen, die wir für ein neuen Messwert für die Reaktionsfähigkeit. Wir möchten einen Messwert entwickeln, der einzelner Ereignisse zu Ende-zu-Ende-Latenz und bietet ein ganzheitlicheres Bild der die Reaktionsfähigkeit einer Seite während ihrer gesamten Lebensdauer.

Wir haben bei diesem Messwert in den letzten Monaten große Fortschritte gemacht möchte Sie darüber informieren, wie wir die Interaktionslatenz messen möchten. Wir möchten einige spezifische Aggregationsoptionen einführen, wie schnell eine Webseite responsiv ist.

Wir freuen uns auf Feedback von Entwicklern und Websiteinhabern welche dieser Optionen für die Gesamtdaten am repräsentativsten wäre die Reaktionszeit ihrer Seiten zu verbessern.

Interaktionslatenz messen

Zur Erinnerung: Der Messwert First Input Delay (FID) erfasst die Verzögerungsanteil der Eingabelatenz. Das heißt, die Zeit zwischen Der Nutzer interagiert mit der Seite bis zu dem Zeitpunkt, an dem die Event-Handler ausgeführt werden kann.

Mit diesem neuen Messwert möchten wir diesen Messwert erweitern, um alle Ereignisse zu erfassen. Dauer, ab Nutzereingabe beginnen, bis der nächste Frame nach allen Ereignis-Handlern dargestellt wird. ausgeführt wurden.

Außerdem planen wir, Interaktionen statt auf einzelne Ereignisse. Interaktionen sind Gruppen von Ereignissen, ausgelöst als Teil derselben logischen Nutzergeste (z. B. pointerdown, click, pointerup).

Zum Messen der gesamten Interaktionslatenz einer Gruppe einzelner Ereignisse werden zwei mögliche Ansätze in Betracht gezogen:

• Maximale Ereignisdauer:Die Interaktionslatenz ist gleich der größten die Dauer eines einzelnen Ereignisses aus einem beliebigen Ereignis in der Interaktionsgruppe.
• Gesamtdauer des Ereignisses:Die Interaktionslatenz ist die Summe aller Ereignisse. Dauer und ohne Überschneidungen.

Das folgende Diagramm zeigt beispielhaft eine Interaktion beim Tastendrücken, bei der eines keydown- und eines keyup-Ereignisses. In diesem Beispiel überschneidet sich die Dauer. zwischen diesen beiden Ereignissen. Um die Latenz beim Drücken der Taste zu messen, können wir max(keydown duration, keyup duration) oder sum(keydown duration, keyup duration) - duration overlap verwenden:

Beide Ansätze haben Vor- und Nachteile. Wir möchten mehr Daten sammeln und Feedback, bevor Sie die Latenzdefinition festlegen.

Alle Interaktionen pro Seite aggregieren

Sobald wir die End-to-End-Latenz aller Interaktionen messen können, definieren Sie einen Gesamtwert für einen Seitenaufruf, der mehr als eine Interaktion.

Nachdem wir uns verschiedene Optionen angesehen haben, haben wir unsere Auswahl auf die die im folgenden Abschnitt beschrieben werden. mit denen echte Nutzerdaten in Chrome erhoben werden. Wir planen, die Ergebnisse unserer nachdem wir genügend Daten gesammelt haben, aber auch die Ergebnisse um direktes Feedback von Websiteinhabern dazu zu erhalten, Interaktionsmuster auf ihren Seiten am genauesten.

Optionen für Aggregationsstrategien

Die folgenden Strategien werden anhand eines Beispiels für einen Seitenaufruf erklärt. die aus vier Interaktionen besteht:

Schlechteste Interaktionslatenz

Die größte individuelle Interaktionslatenz auf einer Seite. In Anbetracht der der oben aufgeführten Interaktionen wäre die niedrigste Interaktionslatenz 120 ms

Budgetstrategien

Nutzererfahrung Recherche dass Nutzer Latenzen unter bestimmten Grenzwerten nicht als negativ sein. Basierend auf diesen Studien erwägen wir mehrere Budgetstrategien die folgenden Schwellenwerte für jeden Ereignistyp verwenden:

Bei jeder dieser Strategien wird nur die Latenz berücksichtigt, die größer als die Grenzwert pro Interaktion. Beim obigen Beispiel für einen Seitenbesuch über Budgetüberschreitungen wie folgt:

Schlechteste Interaktionslatenz im Budget

Die größte Latenz einer einzelnen Interaktion innerhalb des Budgets. Im obigen Beispiel würde der wäre max(20, 0, 10, 30) = 30 ms.

Gesamt-Interaktionslatenz im Rahmen des Budgets

Die Summe aller Interaktionslatenzen über dem Budget. Im obigen Beispiel würde der wäre (20 + 0 + 10 + 30) = 60 ms.

Durchschnittliche Interaktionslatenz im Verhältnis zum Budget

Die gesamte über das Budget überschrittene Interaktionslatenz dividiert durch die Gesamtzahl der Interaktionen. Im obigen Beispiel wäre der Wert (20 + 0 + 10 + 30) / 4 = 15 ms.

Hohe Quantilannäherung

Als Alternative zur Berechnung der größten Interaktionslatenz im Rahmen des Budgets wird auch die Verwendung einer hohen Quantilannäherung in Betracht gezogen, die fairer für mit vielen Interaktionen und mit größerer Wahrscheinlichkeit und Ausreißer. Wir haben zwei mögliche Strategien zur Näherung mit hohem Quantil identifiziert. gefällt uns:

• Option 1: Die größten und zweitgrößten Interaktionen im Budget. Nach jeweils 50 neuen Interaktionen wird die größte Interaktion aus der vorherige Gruppe von 50 und addieren die größte Interaktion aus der aktuellen Gruppe von 50. Der endgültige Wert ist die größte verbleibende Interaktion über dem Budget.
• Option 2: Berechnen Sie die zehn größten Interaktionen über das Budget hinaus und wählen Sie der Gesamtzahl der Interaktionen einen Wert aus dieser Liste. Angegebener N Interaktionen insgesamt haben, wählen Sie den (N / 50 + 1)-größten Wert oder den 10. Wert für Seiten mit mehr als 500 Interaktionen.

Diese Optionen in JavaScript messen

Mit dem folgenden Codebeispiel können die Werte der ersten drei oben vorgestellten Strategien. Es ist noch nicht möglich, die Conversion-Rate der Gesamtzahl der Interaktionen auf einer Seite in JavaScript. die durchschnittliche Interaktion über der Budget-Strategie oder Quantilannäherungsstrategien.

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});

Feedback

Wir möchten Entwickler ermutigen, diese neuen Messwerte für die Reaktionszeit und lass uns wissen, wenn du ein Problem feststellst.

Senden Sie allgemeines Feedback zu den hier beschriebenen Ansätzen per E-Mail an die web-vitals-feedback Google mit „[Responsiveness Metrics]“ gruppieren in der Betreffzeile ein. Wir suchen wirklich Ich freue mich auf Ihre Rückmeldung!