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 Chrome Speed Metrics ha condiviso alcuni dei idee che stavamo valutando per una la nuova metrica della reattività. Vogliamo progettare una metrica che catturi meglio latenza end-to-end dei singoli eventi e offre un quadro più olistico l'adattabilità complessiva di una pagina nel corso della sua durata.

Negli ultimi mesi abbiamo fatto grandi progressi su questa metrica e volevo condividere un aggiornamento su come intendiamo misurare anche la latenza dell'interazione alcune opzioni di aggregazione specifiche che stiamo considerando per quantificare la reattività complessiva di una pagina web.

Ci piacerebbe ricevere feedback da sviluppatori e proprietari di siti in merito quale di queste opzioni è la più rappresentativa dell'input complessivo la reattività delle loro pagine.

Misura la latenza dell'interazione

A titolo di revisione, la metrica First Input Delay (FID) acquisisce il parametro parte del ritardo della latenza di input. Vale a dire che il tempo che intercorre quando l'utente interagisce con la pagina fino al momento in cui i gestori di eventi vengono essere in grado di eseguire.

Con questa nuova metrica prevediamo di estenderla per acquisire l'evento completo media, da input utente iniziale fino a quando il frame successivo non viene visualizzato dopo che tutti i gestori di eventi sono state eseguite.

Prevediamo inoltre di misurare interazioni piuttosto che singoli eventi. Le interazioni sono gruppi di eventi inviato come parte dello stesso gesto logico dell'utente (ad esempio: pointerdown, click e pointerup).

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

• Durata massima dell'evento: la latenza dell'interazione è uguale alla durata massima durata di un singolo evento da qualsiasi evento nel gruppo di interazione.
• Durata totale degli eventi: la latenza dell'interazione è la somma di tutti gli eventi. e le durate, ignorando eventuali sovrapposizioni.

Ad esempio, il diagramma seguente mostra un'interazione con la pressione di un tasto che consiste di un evento keydown e keyup. In questo esempio c'è una sovrapposizione della durata tra questi 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:

Ci sono pro e contro di ogni approccio 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, passaggio è definire un punteggio aggregato per una visita a una pagina, che può contenere di un'interazione.

Dopo aver esaminato una serie di opzioni, abbiamo ristretto le opzioni a strategie descritte nella sezione seguente, ciascuna delle quali attualmente raccogliendo dati di utenti reali su Chrome. Prevediamo di pubblicare i risultati delle nostre risultati una volta che abbiamo avuto il tempo di raccogliere dati a sufficienza, ma stiamo anche cercando per ricevere feedback diretti da parte dei proprietari dei siti in merito alla strategia riflettere nel modo più preciso possibile i modelli di interazione sulle loro pagine.

Opzioni delle strategie di aggregazione

Per spiegare ciascuna delle seguenti strategie, considera un esempio di visita di pagina che consiste in quattro interazioni:

Latenza di interazione peggiore

La maggiore latenza individuale di un'interazione che si è verificata su una pagina. Dato il di interazioni di esempio sopra elencate, la latenza di interazione peggiore è 120 ms

Strategie di budget

Esperienza utente ricerca suggerisce che gli utenti potrebbero non percepire latenze al di sotto di determinate soglie negativo. In base a questa ricerca, stiamo valutando diverse strategie di budget utilizzando le seguenti soglie per ogni tipo di evento:

Ognuna di queste strategie prenderà in considerazione solo la latenza maggiore del la soglia di budget per interazione. Utilizzando la visita alla pagina di esempio sopra riportata, la macro importi superiori al budget sarebbe il seguente:

Latenza dell'interazione peggiore rispetto al budget

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

Latenza totale dell'interazione oltre il budget

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

Latenza media dell'interazione oltre il budget

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

Approssimazione dei quantili elevati

In alternativa al calcolo della maggiore latenza di interazione rispetto al budget, preso in considerazione anche l'utilizzo di un'approssimazione dei quantili elevata, che dovrebbe essere più equa pagine web che hanno molte interazioni e che hanno maggiori probabilità i valori anomali. Abbiamo identificato due potenziali strategie di approssimazione quantile ci piace:

• Opzione 1. Tieni traccia delle interazioni maggiori e secondarie su budget. Dopo ogni 50 nuove interazioni, elimina l'interazione più grande insieme precedente di 50 e aggiunge l'interazione maggiore dell'insieme attuale di 50. Il valore finale sarà l'interazione rimanente più ampia rispetto al budget.
• Opzione 2: calcola le 10 interazioni più numerose rispetto al budget e scegli una del valore di questo elenco in base al numero totale di interazioni. Data N interazioni totali, seleziona il valore più grande (N / 50 + 1) o il decimo per le pagine con più di 500 interazioni.

Misura queste opzioni in JavaScript

Il seguente esempio di codice può essere utilizzato per determinare i valori del primo le tre strategie illustrate sopra. Tieni presente che non è ancora possibile misurare numero totale di interazioni su una pagina in JavaScript, perciò questo esempio includi l'interazione media rispetto alla strategia di budget o il strategie di approssimazione dei quantili.

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 relative alla reattività nella i loro siti e non esitare a contattarci in caso di problemi.

Invia un'email di feedback generale sugli approcci qui descritti ai web-vitals-feedback Google gruppo con "[Metriche di reattività]" nella riga dell'oggetto. Stiamo davvero cercando impaziente di conoscere la vostra opinione.