Solicitação de feedback: uma métrica experimental de capacidade de resposta

Atualização sobre nossos planos para medir a capacidade de resposta na Web.

Hongbo Song

No início deste ano, a Equipe de métricas de velocidade do Chrome compartilhou algumas das ideias que estávamos considerando para uma nova métrica de capacidade de resposta. Queremos projetar uma métrica que capture melhor a latência completa de eventos individuais e ofereça uma visão mais holística da capacidade de resposta geral de uma página durante todo o ciclo de vida dela.

Fizemos muito progresso nessa métrica nos últimos meses e gostaríamos de compartilhar uma atualização sobre como planejamos medir a latência de interação, bem como introduzir algumas opções de agregação específicas que estamos considerando para quantificar a capacidade geral de resposta de uma página da Web.

Gostaríamos de receber feedback de desenvolvedores e proprietários de sites sobre qual dessas opções seria mais representativa da capacidade geral de resposta de entrada das páginas.

Medir a latência da interação

Como revisão, a métrica Latência na primeira entrada (FID, na sigla em inglês) captura a parte de atraso da latência de entrada. Ou seja, o tempo entre o momento em que o usuário interage com a página e o momento em que os manipuladores de eventos podem ser executados.

Com essa nova métrica, planejamos expandi-la para capturar a duração completa do evento, desde a entrada inicial do usuário até o próximo frame ser pintado depois de todos os manipuladores de eventos serem executados.

Também planejamos medir interações em vez de eventos individuais. As interações são grupos de eventos enviados como parte do mesmo gesto lógico do usuário (por exemplo: pointerdown, click, pointerup).

Para medir a latência total da interação de um grupo de durações de eventos individuais, estamos considerando duas abordagens possíveis:

• Duração máxima do evento:a latência da interação é igual à maior duração única de qualquer evento no grupo de interação.
• Duração total do evento:a latência da interação é a soma de todas as durações dos eventos, ignorando qualquer sobreposição.

Como exemplo, o diagrama abaixo mostra uma interação de pressionamento de tecla que consiste em um evento keydown e keyup. Neste exemplo, há uma sobreposição de duração entre esses dois eventos. Para medir a latência da interação de pressionamento de tecla, poderíamos usar max(keydown duration, keyup duration) ou sum(keydown duration, keyup duration) - duration overlap:

Há prós e contras de cada abordagem, e queremos coletar mais dados e feedback antes de finalizar uma definição de latência.

Agregar todas as interações por página

Quando conseguirmos medir a latência de ponta a ponta de todas as interações, a próxima etapa é definir uma pontuação agregada para uma visita à página, que pode conter mais de uma interação.

Depois de analisar várias opções, restringimos nossas escolhas às estratégias descritas na seção a seguir. Cada uma delas coleta dados reais de usuários no Chrome. Pretendemos publicar os resultados das nossas descobertas assim que tivermos tempo de coletar dados suficientes, mas também estamos aguardando o feedback direto dos proprietários dos sites sobre qual estratégia refletiria com mais precisão os padrões de interação nas páginas deles.

Opções de estratégias de agregação

Para ajudar a explicar cada uma das estratégias a seguir, considere um exemplo de visita à página que consiste em quatro interações:

Pior latência de interação

A maior latência de interação individual que ocorreu em uma página. Considerando os exemplos de interações listados acima, a pior latência de interação seria de 120 ms.

Estratégias de orçamento

A pesquisa de experiência do usuário sugere que os usuários podem não perceber latências abaixo de determinados limites como negativas. Com base nessa pesquisa, estamos considerando várias estratégias de orçamento usando os seguintes limites para cada tipo de evento:

Cada uma dessas estratégias considera apenas a latência que é maior do que o limite do orçamento por interação. Usando o exemplo de visita à página acima, os valores acima do orçamento seriam:

Pior latência de interação acima do orçamento

A maior latência de interação única acima do orçamento. Usando o exemplo acima, a pontuação seria max(20, 0, 10, 30) = 30 ms.

Latência total de interação acima do orçamento

A soma de todas as latências de interação em relação ao orçamento. Usando o exemplo acima, a pontuação seria (20 + 0 + 10 + 30) = 60 ms.

Latência média de interação acima do orçamento

A latência total de interação acima do orçamento dividido pelo número total de interações. Usando o exemplo acima, a pontuação seria (20 + 0 + 10 + 30) / 4 = 15 ms.

Aproximação de alta quantil

Como alternativa para calcular a maior latência de interação acima do orçamento, também consideramos usar uma aproximação de alto quantil, que deve ser mais justa para páginas da Web que têm muitas interações e podem ter mais probabilidades de ter grandes outliers. Identificamos duas estratégias potenciais de aproximação de alto quantil das quais gostamos:

• Opção 1:acompanhar as maiores e a segunda maior interações acima do orçamento. A cada 50 novas interações, remova a maior interação do conjunto anterior de 50 e adicione a maior interação do conjunto atual de 50. O valor final será a maior interação restante acima do orçamento.
• Opção 2:calcule as 10 maiores interações acima do orçamento e escolha um valor dessa lista dependendo do número total de interações. Considerando N interações totais, selecione o maior valor (N / 50 + 1) ou o décimo valor para páginas com mais de 500 interações.

Medir essas opções em JavaScript

O exemplo de código a seguir pode ser usado para determinar os valores das três primeiras estratégias apresentadas acima. Ainda não é possível medir o número total de interações em uma página em JavaScript. Por isso, esse exemplo não inclui a interação média em relação à estratégia de orçamento ou as estratégias de aproximação de alto 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

Queremos incentivar os desenvolvedores a testar essas novas métricas de capacidade de resposta nos sites e nos informar se encontrar algum problema.

Envie um e-mail com feedback geral sobre as abordagens descritas aqui para o grupo do Google web-vitals-feedback com "[Métricas de responsividade]" na linha de assunto. Estamos ansiosos para saber sua opinião.