Feedback desiderato: una metrica sperimentale di reattività

Aggiornamento sui nostri piani per la misurazione della reattività sul web.

Hongbo Song

All'inizio di quest'anno, il team per le metriche relative alla velocità di Chrome ha condiviso alcune delle idee che stavamo prendendo in considerazione per una nuova metrica relativa alla reattività. Vogliamo progettare una metrica che acquisisca meglio la latenza end-to-end dei singoli eventi e che offra un quadro più olistico della reattività complessiva di una pagina per tutta la sua durata.

Negli ultimi mesi abbiamo fatto notevoli progressi su questa metrica e vorremmo condividere un aggiornamento su come prevediamo di misurare la latenza dell'interazione e introdurre alcune opzioni di aggregazione specifiche che stiamo prendendo in considerazione per quantificare l'adattabilità complessiva di una pagina web.

Ci piacerebbe ricevere un feedback da parte di sviluppatori e proprietari di siti in merito a quale di queste opzioni sarebbe più rappresentativa della reattività complessiva all'input delle loro pagine.

Misurare la latenza dell'interazione

Nell'ambito di una revisione, la metrica First Input Delay (FID) acquisisce la parte di ritardo della latenza di input. ovvero il tempo che intercorre tra l'interazione dell'utente con la pagina e il momento in cui possono essere eseguiti i gestori di eventi.

Con questa nuova metrica intendiamo espanderla in modo da acquisire l'intera durata dell'evento, dall'input iniziale dell'utente fino al completamento del frame successivo dopo l'esecuzione di tutti i gestori di eventi.

Prevediamo inoltre di misurare le interazioni anziché i singoli eventi. Le interazioni sono gruppi di eventi che vengono inviati come parte dello stesso gesto logico dell'utente (ad esempio: pointerdown, click, pointerup).

Per misurare la latenza totale dell'interazione da un gruppo di singole durate di eventi, stiamo prendendo in considerazione due potenziali approcci:

• Durata massima dell'evento:la latenza dell'interazione è uguale alla più grande durata del singolo evento di qualsiasi evento nel gruppo di interazione.
• Durata totale dell'evento: la latenza dell'interazione è la somma di tutte le durate dell'evento, ignorando eventuali sovrapposizioni.

Ad esempio, il diagramma seguente mostra un'interazione di pressione dei tasti composta da un evento keydown e un evento keyup. In questo esempio c'è una sovrapposizione della durata tra i due eventi. Per misurare la latenza dell'interazione con la pressione dei tasti, potremmo utilizzare max(keydown duration, keyup duration) o sum(keydown duration, keyup duration) - duration overlap:

Ogni approccio presenta pro e contro e vorremmo raccogliere più dati e feedback prima di finalizzare una definizione di latenza.

Aggrega tutte le interazioni per pagina

Una volta che siamo in grado di misurare la latenza end-to-end di tutte le interazioni, il passaggio successivo è definire un punteggio aggregato per una visita a una pagina, che può contenere più di un'interazione.

Dopo aver esaminato una serie di opzioni, abbiamo ristretto le nostre scelte alle strategie descritte nella seguente sezione, ognuna delle quali al momento raccogliamo dati di utenti reali in Chrome. Prevediamo di pubblicare i risultati dei nostri risultati quando avremo raccolto dati sufficienti, ma vorremmo anche ricevere feedback diretti dai proprietari dei siti in merito alla strategia che rispecchia nel modo più preciso i modelli di interazione sulle loro pagine.

Opzioni delle strategie di aggregazione

Per spiegare ognuna delle seguenti strategie, considera una visita alla pagina di esempio composta da quattro interazioni:

Latenza di interazione peggiore

La più grande latenza di interazione singola che si è verificata su una pagina. Considerate le interazioni di esempio elencate sopra, la latenza di interazione peggiore sarebbe di 120 ms.

Strategie di budget

Le ricerche sull'esperienza utente indicano che gli utenti potrebbero non percepire come negative le latenze al di sotto di determinate soglie. In base a questa ricerca stiamo prendendo in considerazione diverse strategie di budget che utilizzano le seguenti soglie per ogni tipo di evento:

Ognuna di queste strategie prenderà in considerazione solo la latenza superiore alla soglia del budget per interazione. Utilizzando la visita alla pagina di esempio sopra riportata, gli importi oltre il budget sarebbero i seguenti:

Latenza di interazione peggiore rispetto al budget

La maggiore latenza di una singola interazione oltre il budget. Utilizzando l'esempio precedente, il punteggio sarà max(20, 0, 10, 30) = 30 ms.

Latenza totale interazione oltre il budget

La somma di tutte le latenze di interazione rispetto al budget. Utilizzando l'esempio precedente, il punteggio sarà (20 + 0 + 10 + 30) = 60 ms.

Latenza media interazione oltre il budget

La latenza totale delle interazioni oltre il budget divisa per il numero totale di interazioni. Utilizzando l'esempio precedente, il punteggio sarà (20 + 0 + 10 + 30) / 4 = 15 ms.

Approssimazione dei quantili elevati

In alternativa al calcolo della massima latenza di interazione rispetto al budget, abbiamo anche considerato l'utilizzo di un'approssimazione dei quantili elevata, che dovrebbe essere più equa per le pagine web con molte interazioni e che potrebbero avere maggiori probabilità di presentare anomalie. Abbiamo identificato due potenziali strategie di approssimazione molto quantile che ci piacciono:

• Opzione 1: monitora le interazioni di maggior entità e della seconda più grande rispetto al budget. Dopo ogni 50 nuove interazioni, elimina l'interazione maggiore dall'insieme di 50 precedenti e aggiungi l'interazione maggiore dall'insieme corrente di 50. Il valore finale corrisponderà all'interazione rimanente più grande rispetto al budget.
• Opzione 2: calcola le 10 interazioni maggiori rispetto al budget e scegli un valore da questo elenco in base al numero totale di interazioni. Date N interazioni totali, seleziona il (N / 50 + 1)° valore più grande o il 10° valore per le pagine con più di 500 interazioni.

Misura queste opzioni in JavaScript

L'esempio di codice riportato di seguito può essere utilizzato per determinare i valori delle prime tre strategie presentate in precedenza. Tieni presente che non è ancora possibile misurare il numero totale di interazioni su una pagina in JavaScript, perciò questo esempio non include l'interazione media rispetto alla strategia di budget o le strategie di approssimazione quantile elevata.

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

Vogliamo incoraggiare gli sviluppatori a provare queste nuove metriche di reattività sui loro siti e farci sapere se riscontrano problemi.

Invia un'email al gruppo di Google web-vitals-feedback con "[Metriche di reattività]" nella riga dell'oggetto di qualsiasi feedback generale sugli approcci descritti qui. Non vediamo l'ora di sapere cosa ne pensi.