Atualização sobre nossos planos para medir a capacidade de resposta na Web.
No início deste ano, a equipe de Métricas de velocidade do Chrome compartilhou algumas das ideias que estávamos considerando para um nova métrica de capacidade de resposta. Queremos projetar uma métrica que capture melhor latência de ponta a ponta de eventos individuais e oferece uma visão mais holística dos a capacidade de resposta geral de uma página ao longo de sua vida útil.
Avançamos bastante nessa métrica nos últimos meses e quero compartilhar uma atualização sobre como planejamos medir a latência de interação também apresentar algumas opções específicas de agregação que estamos considerando quantificar a capacidade de resposta geral de uma página da Web.
Adoraríamos receber comentários de desenvolvedores e proprietários de sites qual das opções a seguir é a mais representativa da contribuição geral a capacidade de resposta das páginas.
Medir a latência de interação
Resumindo, a métrica First Input Delay (FID) captura os ou parte de atraso da latência de entrada. Ou seja, o tempo entre quando o usuário interage com a página até o momento em que os manipuladores de eventos possam ser executados.
Com essa nova métrica, planejamos expandi-la para capturar o evento completo duração, de entrada inicial do usuário até que o próximo frame seja pintado após todos os manipuladores de eventos foram executados.
Também planejamos medir
interações
em vez de eventos individuais. As interações são grupos de eventos que são
enviados como parte do mesmo gesto lógico do usuário (por exemplo:
pointerdown, click e pointerup).
Medir a latência total de interação de um grupo de eventos individuais durações, estamos considerando duas possíveis abordagens:
- Duração máxima do evento: a latência de interação é igual ao maior da duração de qualquer evento no grupo de interação.
- Duração total do evento: a latência de interação é a soma de todos os valores durações, ignorando qualquer sobreposição.
Como exemplo, o diagrama abaixo mostra uma interação de pressionamento de tecla que consiste
de um evento keydown e um 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:
Cada abordagem tem prós e contras, e nós gostaríamos de coletar mais dados e feedback antes de finalizar uma definição de latência.
.Agregar todas as interações por página
Quando for possível medir a latência de ponta a ponta de todas as interações, é definir uma pontuação agregada para uma visita à página, que pode conter mais de uma interação.
Depois de explorar várias opções, nós limitamos as opções estratégias descritas na seção a seguir, cada uma das quais estamos coletando dados de usuários reais no Chrome. Planejamos publicar os resultados da nossa descobertas uma vez que tenhamos tempo de coletar dados suficientes, mas também estamos procurando para receber feedback direto dos proprietários de sites sobre qual estratégia reflitam com mais precisão os padrões de interação em suas páginas.
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:
| Interação | Latência |
|---|---|
| Clique | 120 ms |
| Clique | 20 ms |
| Toque nas teclas | 60 ms |
| Toque nas teclas | 80 ms |
Pior latência de interação
A maior latência de interação individual que ocorreu em uma página. Considerando de interações de exemplo listadas acima, a pior latência de interação seria de 120 ms.
Estratégias de orçamentos
Experiência do usuário pesquisa sugere que os usuários podem não perceber latências abaixo de certos limites como negativa. Com base nessa pesquisa, estamos considerando várias estratégias de orçamento usando os seguintes limites para cada tipo de evento:
| Tipo de interação | Limite de orçamento |
|---|---|
| Clique/toque | 100 ms |
| Arrasto | 100 ms |
| Teclado | 50 ms |
Cada uma dessas estratégias vai considerar apenas a latência que é maior do que a limite de orçamento por interação. Usando o exemplo de visita à página acima, a valores que excedem o orçamento são:
| Interação | Latência | Latência acima do orçamento |
|---|---|---|
| Clique | 120 ms | 20 ms |
| Clique | 20 ms | 0 ms |
| Toque nas teclas | 60 ms | 10 ms |
| Toque nas teclas | 80 ms | 30 ms |
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
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 acima do orçamento. Usando o exemplo acima, a
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 da interação acima do orçamento dividida pelo número total de
e interações. Usando o exemplo acima, a pontuação seria (20 + 0 + 10 + 30) / 4 = 15 ms.
Aproximação de quantil alto
Como alternativa ao cálculo da maior latência de interação sobre o orçamento, vamos também considerou o uso de uma aproximação de quantil alto, que deveria ser mais imparcial páginas da Web com muitas interações e que têm mais probabilidade de os outliers. Identificamos duas possíveis estratégias de aproximação de alto quantil gostamos:
- Opção 1: acompanhar as maiores e a segunda maior interações durante orçamento. A cada 50 novas interações, remover a maior interação da conjunto anterior de 50 e soma 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. Dado N total de interações, selecione o (N / 50 + 1) o maior valor ou o 10o 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 do primeiro três estratégias apresentadas acima. Ainda não é possível medir número total de interações em uma página em JavaScript, portanto, este exemplo não incluem a interação média sobre a estratégia de orçamento ou a estratégias de aproximação de 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 seus sites e nos informe se encontrar algum problema.
Envie por e-mail comentários gerais sobre as abordagens descritas aqui para web-vitals-feedback Google grupo com "[Métricas de capacidade de resposta]" na linha de assunto. Estamos realmente procurando Quero saber sua opinião!