Una actualización sobre nuestros planes para medir la capacidad de respuesta en la Web.
A principios de este año, el equipo de métricas de velocidad de Chrome compartió algunas de las ideas que pensábamos para una nueva métrica de capacidad de respuesta. Queremos diseñar una métrica que capture mejor la latencia de extremo a extremo de los eventos individuales y ofrezca un panorama más integral de la capacidad de respuesta general de una página a lo largo de su vida útil.
Hicimos un gran progreso en esta métrica en los últimos meses y queremos compartir una actualización sobre cómo planeamos medir la latencia de interacción y presentar algunas opciones de agregación específicas que estamos considerando para cuantificar la capacidad de respuesta general de una página web.
Nos encantaría recibir comentarios de los desarrolladores y propietarios de sitios sobre cuál de estas opciones sería la más representativa de la capacidad de respuesta general de las entradas de sus páginas.
Mide la latencia de las interacciones
A modo de revisión, la métrica Retraso de primera entrada (FID) captura la parte del retraso de la latencia de entrada. Es decir, el tiempo que transcurre desde que el usuario interactúa con la página hasta que se pueden ejecutar los controladores del evento.
Con esta nueva métrica, planeamos expandir eso para capturar la duración completa del evento, desde la entrada inicial del usuario hasta que se pinte el siguiente fotograma después de que se ejecuten todos los controladores de eventos.
También planeamos medir las interacciones en lugar de eventos individuales. Las interacciones son grupos de eventos que se envían como parte del mismo gesto lógico del usuario (por ejemplo: pointerdown, click, pointerup).
Para medir la latencia de interacción total de un grupo de duraciones de eventos individuales, consideramos dos enfoques posibles:
- Duración máxima de evento: La latencia de interacción es igual a la mayor duración de un evento único de cualquier evento en el grupo de interacción.
- Duración total del evento: la latencia de interacción es la suma de todas las duraciones de los eventos, sin tener en cuenta cualquier superposición.
A modo de ejemplo, en el siguiente diagrama, se muestra una interacción de presionar una tecla que consiste en un evento keydown y un evento keyup. En este ejemplo, hay una superposición de duración entre estos dos eventos. Para medir la latencia de la interacción cuando se presiona la tecla, podríamos usar max(keydown duration, keyup duration) o sum(keydown duration, keyup duration) - duration overlap:
Cada enfoque tiene ventajas y desventajas, y nos gustaría recopilar más datos y comentarios antes de finalizar una definición de latencia.
Agregar todas las interacciones por página
Una vez que podamos medir la latencia de extremo a extremo de todas las interacciones, el siguiente paso es definir una puntuación agregada para una visita a página, que puede contener más de una interacción.
Después de explorar una serie de opciones, redujimos las opciones a las estrategias que se describen en la siguiente sección, en cada una de las cuales recopilamos datos de usuarios reales en Chrome. Planeamos publicar los resultados de nuestros hallazgos una vez que hayamos tenido tiempo de recopilar datos suficientes, pero también buscamos comentarios directos de los propietarios de sitios sobre qué estrategia reflejaría con mayor precisión los patrones de interacción de sus páginas.
Opciones de estrategias de agregación
Para explicar mejor cada una de las siguientes estrategias, considera un ejemplo de visita a una página que consta de cuatro interacciones:
| Interacción | Latencia |
|---|---|
| Clic | 120 ms |
| Clic | 20 ms |
| Presión de teclas | 60 ms |
| Presión de teclas | 80 ms |
Latencia de interacción más grave
Es la latencia de interacción individual más grande que se produjo en una página. Dadas las interacciones de ejemplo enumeradas anteriormente, la peor latencia de interacción sería de 120 ms.
Estrategias presupuestarias
La investigación sobre la experiencia del usuario sugiere que es posible que los usuarios no perciban latencias por debajo de ciertos umbrales como negativas. En función de esta investigación, estamos considerando varias estrategias de presupuesto que usan los siguientes umbrales para cada tipo de evento:
| Tipo de interacción | Umbral del presupuesto |
|---|---|
| Hacer clic o presionar | 100 ms |
| Arrastrar | 100 ms |
| Teclado | 50 ms |
Cada una de estas estrategias solo considerará la latencia que supere el límite del presupuesto por interacción. Si utiliza el ejemplo anterior de visita a la página, los importes superiores al presupuesto serían los siguientes:
| Interacción | Latencia | Latencia por encima del presupuesto |
|---|---|---|
| Clic | 120 ms | 20 ms |
| Clic | 20 ms | 0 ms |
| Presión de teclas | 60 ms | 10 ms |
| Presión de teclas | 80 ms | 30 ms |
Peor latencia de interacción sobre el presupuesto
La mayor latencia de interacción única por encima del presupuesto. Si usamos el ejemplo anterior, la puntuación sería max(20, 0, 10, 30) = 30 ms.
Latencia total de las interacciones que supera el presupuesto
Es la suma de todas las latencias de interacción que superan el presupuesto. Si usamos el ejemplo anterior, la puntuación sería (20 + 0 + 10 + 30) = 60 ms.
Latencia de interacción promedio superior al presupuesto
Es la latencia total de interacciones con un presupuesto superior dividido por la cantidad total de interacciones. Si usamos el ejemplo anterior, la puntuación sería (20 + 0 + 10 + 30) / 4 = 15 ms.
Aproximación de cuantil alto
Como alternativa para calcular la mayor latencia de interacción por sobre el presupuesto, también consideramos usar una aproximación de cuantiles altos, que debería ser más justo para las páginas web que tienen muchas interacciones y es más probable que tengan valores atípicos grandes. Identificamos dos posibles estrategias de aproximación de cuantiles altos que nos gustan:
- Opción 1: Realiza un seguimiento de las interacciones más grandes y de la segunda mayor por encima del presupuesto. Después de cada 50 interacciones nuevas, descarta la interacción más grande del conjunto anterior de 50 y agrega la interacción más grande del conjunto actual de 50. El valor final será la mayor interacción restante que supere el presupuesto.
- Opción 2: Calcula las 10 interacciones más grandes con el presupuesto y elige un valor de esa lista según la cantidad total de interacciones. Dadas N interacciones totales, selecciona el valor (N / 50 + 1) más grande o el décimo valor para páginas con más de 500 interacciones.
Mide estas opciones en JavaScript
El siguiente ejemplo de código se puede usar para determinar los valores de las tres primeras estrategias que se presentaron anteriormente. Ten en cuenta que aún no es posible medir la cantidad total de interacciones en una página en JavaScript, por lo que este ejemplo no incluye la interacción promedio por encima de la estrategia de presupuesto ni las estrategias de aproximación de cuantiles altos.
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});
Comentarios
Queremos incentivar a los desarrolladores a que prueben estas nuevas métricas de capacidad de respuesta en sus sitios y que nos informen si descubren algún problema.
Envía un correo electrónico al Grupo de Google web-vitals-feedback con comentarios generales sobre los enfoques que se describen aquí con el asunto “[Responseness Metrics]”. ¡Estamos ansiosos por escuchar qué piensas!