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

Es gibt Neuigkeiten zu unseren Plänen zum Messen der Reaktionsgeschwindigkeit im Web.

Hongbo Song

Anfang des Jahres hat das Chrome-Team für Geschwindigkeitsmesswerte einige der Ideen vorgestellt, die wir für einen neuen Messwert für die Reaktionszeit in Betracht gezogen haben. Wir möchten einen Messwert entwerfen, der die End-to-End-Latenz einzelner Ereignisse besser erfasst und ein umfassenderes Bild der Reaktionsfähigkeit einer Seite während ihrer gesamten Lebensdauer bietet.

Wir haben in den letzten Monaten große Fortschritte bei diesem Messwert gemacht. Heute möchten wir euch ein Update zur Messung der Interaktionslatenz und einige konkrete Aggregationsoptionen geben, mit denen wir die allgemeine Reaktionsfähigkeit einer Webseite quantifizieren.

Wir freuen uns auf Feedback von Entwicklern und Websiteinhabern dazu, welche dieser Optionen für die allgemeine Eingabereaktionszeit ihrer Seiten am repräsentativsten wäre.

Interaktionslatenz messen

Zur Erinnerung: Der Messwert First Input Delay (FID) erfasst den verzögerten Anteil der Eingabelatenz. Das ist die Zeit zwischen der Interaktion des Nutzers mit der Seite und der Zeit, in der die Event-Handler ausgeführt werden können.

Wir planen, diesen neuen Messwert zu erweitern, um die gesamte Ereignisdauer von der ersten Nutzereingabe bis zur Darstellung des nächsten Frames zu erfassen, nachdem alle Event-Handler ausgeführt wurden.

Außerdem planen wir, statt einzelner Ereignisse Interaktionen zu messen. Interaktionen sind Gruppen von Ereignissen, die im Rahmen derselben logischen Nutzergeste ausgelöst werden (z. B. pointerdown, click, pointerup).

Um die Gesamtinteraktionslatenz einer Gruppe einzelner Ereignisdauern zu messen, kommen zwei mögliche Ansätze in Betracht:

• Maximale Ereignisdauer:Die Interaktionslatenz entspricht der längsten Einzelereignisdauer eines beliebigen Ereignisses in der Interaktionsgruppe.
• Gesamte Ereignisdauer:Die Interaktionslatenz ist die Summe aller Ereignisdauern, wobei Überschneidungen ignoriert werden.

Das folgende Diagramm zeigt beispielsweise eine Tastenbetätigung, die aus einem keydown- und einem keyup-Ereignis besteht. In diesem Beispiel gibt es eine Überlappung der Dauer zwischen diesen beiden Ereignissen. Zum Messen der Latenz der Tastenbetätigung können Sie max(keydown duration, keyup duration) oder sum(keydown duration, keyup duration) - duration overlap verwenden:

Jeder Ansatz hat Vor- und Nachteile. Wir möchten mehr Daten und Feedback sammeln, bevor wir eine Latenzdefinition festlegen.

Alle Interaktionen pro Seite aggregieren

Sobald wir die End-to-End-Latenz aller Interaktionen messen können, besteht der nächste Schritt darin, eine Gesamtpunktzahl für einen Seitenaufruf zu definieren, die mehrere Interaktionen umfassen kann.

Nachdem wir einige Optionen untersucht haben, haben wir unsere Auswahl auf die im folgenden Abschnitt beschriebenen Strategien beschränkt, für die wir derzeit echte Nutzerdaten in Chrome erfassen. Wir planen, die Ergebnisse unserer Ergebnisse zu veröffentlichen, sobald genügend Daten erhoben wurden. Wir bitten aber auch um direktes Feedback von Websiteinhabern dazu, welche Strategie die Interaktionsmuster auf ihren Seiten am genauesten widerspiegeln würde.

Optionen für Aggregationsstrategien

Zur Erläuterung der folgenden Strategien sehen Sie sich ein Beispiel für einen Seitenbesuch an, der aus vier Interaktionen besteht:

Schlechteste Interaktionslatenz

Die größte, einzelne Interaktionslatenz, die auf einer Seite aufgetreten ist. In den oben aufgeführten Beispielinteraktionen beträgt die schlechteste Interaktionslatenz 120 ms.

Budgetstrategien

Studien zur Nutzererfahrung deuten darauf hin, dass Nutzer Latenzen unter bestimmten Schwellenwerten möglicherweise nicht als negativ empfinden. Basierend auf dieser Studie erwägen wir mehrere Budgetstrategien mit den folgenden Grenzwerten für jeden Ereignistyp:

Bei jeder dieser Strategien wird nur die Latenz berücksichtigt, die über dem Budgetgrenzwert pro Interaktion liegt. Im Beispiel oben für einen Seitenbesuch sähen die Überschreitungen so aus:

Schlechteste Interaktionslatenz im Vergleich zum Budget

Die größte Latenz einer einzelnen Interaktion im Vergleich zum Budget. Im obigen Beispiel wäre der Wert max(20, 0, 10, 30) = 30 ms.

Gesamtinteraktionslatenz über dem Budget

Die Summe aller Interaktionslatenzen im Budget. Im obigen Beispiel wäre der Wert (20 + 0 + 10 + 30) = 60 ms.

Durchschnittliche Interaktionslatenz über dem Budget

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

Hohe Quantil-Näherung

Als Alternative zur Berechnung der höchsten Interaktionslatenz im Rahmen des Budgets haben wir auch eine hohe Quantil Näherung in Betracht gezogen. Diese sollte fairer für Webseiten sein, die viele Interaktionen haben und wahrscheinlich größere Ausreißer aufweisen. Wir haben zwei potenzielle Strategien für hochquantile Approximation identifiziert, die uns gefallen:

• Option 1: Behalten Sie die größten und zweitgrößten Interaktionen über dem Budget im Blick. Löschen Sie nach jeweils 50 neuen Interaktionen die größte Interaktion der vorherigen 50 Interaktionen und fügen Sie die größte Interaktion der aktuellen 50 Interaktionen hinzu. Der endgültige Wert ist die größte verbleibende Interaktion im Vergleich zum Budget.
• Option 2: Berechnen Sie die zehn größten Interaktionen über das Budget und wählen Sie je nach der Gesamtzahl der Interaktionen einen Wert aus dieser Liste aus. Wählen Sie für n Interaktionen insgesamt den (N / 50 + 1)-höchsten Wert oder bei Seiten mit mehr als 500 Interaktionen den 10. Wert.

Diese Optionen in JavaScript messen

Mit dem folgenden Codebeispiel können die Werte der ersten drei oben vorgestellten Strategien ermittelt werden. Es ist noch nicht möglich, die Gesamtzahl der Interaktionen auf einer Seite in JavaScript zu messen. Daher enthält dieses Beispiel weder die durchschnittliche Interaktion im Hinblick auf die Budgetstrategie noch die Strategien zur Näherung mit hohem Quantil.

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 auf ihren Websites auszuprobieren und uns Bescheid zu geben, wenn du ein Problem feststellst.

Senden Sie allgemeines Feedback zu den hier beschriebenen Ansätzen per E-Mail an die Google-Gruppe web-vitals-feedback mit dem Betreff „[Responsiveness Metrics]“. Wir freuen uns auf Ihr Feedback!