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ó algunos de los ideas que estuvimos considerando para una nueva métrica de capacidad de respuesta. Queremos diseñar una métrica que capture mejor latencia de extremo a extremo de los eventos individuales y ofrece un panorama más integral la capacidad de respuesta general de una página a lo largo de su vida útil.
Avanzamos mucho en esta métrica en los últimos meses también quería compartir una actualización sobre cómo planeamos medir la latencia de interacción. introducimos algunas opciones de agregación específicas que consideramos la capacidad de respuesta general de una página web.
Nos encantaría recibir comentarios de los desarrolladores y los propietarios de los sitios sobre cuál de estas opciones sería la más representativa de la información de entrada general la capacidad de respuesta de sus páginas.
Cómo medir la latencia de interacción
A modo de repaso, la métrica Retraso de primera entrada (FID) capta el de retraso de la latencia de entrada. Es decir, el tiempo entre cuando el usuario interactúa con la página hasta el momento en que los controladores de eventos puedan ejecutarse.
Con esta nueva métrica, planeamos expandirla para captar el evento completo. duración, desde la entrada inicial del usuario hasta que se pinte el siguiente fotograma después de que todos los controladores de eventos que se hayan ejecutado.
También planeamos medir
interacciones
en lugar de eventos individuales. Las interacciones son grupos de eventos que se
se envían como parte del mismo gesto lógico del usuario (por ejemplo:
pointerdown, click y pointerup).
Para medir la latencia total de interacción de un grupo de eventos individuales duraciones de videos, estamos considerando dos posibles enfoques:
- Duración máxima del evento: la latencia de la interacción es igual al valor máximo la duración de un solo evento de cualquier evento del grupo de interacción.
- Duración total de los eventos: La latencia de la interacción es la suma de todos los eventos. sin tener en cuenta las superposiciones.
A modo de ejemplo, en el siguiente diagrama se muestra una interacción presionar una tecla que consiste en
de un evento de keydown y uno de keyup. En este ejemplo, hay una superposición de duración
entre estos dos eventos. Para medir la latencia de la interacción al presionar la tecla,
podemos usar max(keydown duration, keyup duration) o sum(keydown duration, keyup duration) - duration overlap:
Cada enfoque tiene ventajas y desventajas, y quisiéramos recopilar más datos feedback antes de finalizar una definición de latencia.
Agrega todas las interacciones por página.
Una vez que podamos medir la latencia de extremo a extremo de todas las interacciones, la siguiente es definir una puntuación total para una visita a la página, que puede contener más de una interacción.
Después de explorar una serie de opciones, redujimos nuestras opciones a estrategias que se describen en la siguiente sección, cada una de las cuales actualmente recopilando datos de usuarios reales en Chrome. Planeamos publicar los resultados de nuestra una vez que hemos tenido tiempo de recopilar datos suficientes, pero también estamos buscando para recibir comentarios directos de los propietarios de los sitios acerca de la estrategia reflejan con mayor precisión los patrones de interacción en sus páginas.
Opciones de estrategias de agregación
Para poder explicar cada una de las siguientes estrategias, considere usar un ejemplo de visita a la página. que consta de cuatro interacciones:
| Interacción | Latencia |
|---|---|
| Haz clic en | 120 ms |
| Haz clic en | 20 ms |
| Presión de teclas | 60 ms |
| Presión de teclas | 80 ms |
Peor latencia de interacción
La mayor latencia de interacción individual que ocurrió en una página. Dado el de interacciones de ejemplo anteriores, la peor latencia de interacción sería 120 ms
Estrategias de presupuesto
Experiencia del usuario investigación sugiere que los usuarios podrían no percibir latencias por debajo de ciertos umbrales como negativo. 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/presionar | 100 ms |
| Arrastrar | 100 ms |
| Teclado | 50 ms |
Cada una de estas estrategias solo considerará la latencia superior a la el umbral de presupuesto por interacción. Con la visita a la página de ejemplo anterior, la los importes excedentes serían los siguientes:
| Interacción | Latencia | Latencia excedida del presupuesto |
|---|---|---|
| Haz clic en | 120 ms | 20 ms |
| Haz clic en | 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 por sobre el presupuesto
La mayor latencia de interacción única por sobre el presupuesto. Con el ejemplo anterior, la
la puntuación sería de max(20, 0, 10, 30) = 30 ms.
Latencia de interacción total excedida el presupuesto
Es la suma de todas las latencias de interacción por sobre el presupuesto. Con el ejemplo anterior, la
la puntuación sería de (20 + 0 + 10 + 30) = 60 ms.
Latencia promedio de interacción por encima del presupuesto
La latencia total de interacción sobre el presupuesto dividida por la cantidad total de
interacciones. Si usas el ejemplo anterior, la puntuación sería (20 + 0 + 10 + 30) / 4 = 15 ms.
Aproximación de cuantil alto
Como alternativa al cálculo de la mayor latencia de interacción sobre el presupuesto, también se considera usar una aproximación de cuantil alto, que debería ser más justo páginas web que tienen muchas interacciones y es más probable que tengan grandes los valores atípicos. Hemos identificado dos posibles estrategias de aproximación de cuantiles altos nos gusta:
- Opción 1: Haz un seguimiento de las interacciones más grandes y las segundas más grandes durante presupuesto. Después de cada 50 interacciones nuevas, descarta la interacción más grande del conjunto anterior de 50 y agrega la mayor interacción del conjunto actual de 50. El valor final será el máximo de interacciones restantes sobre el presupuesto.
- Opción 2: Calcula las 10 interacciones más altas que el presupuesto y elige una de esa lista según la cantidad total de interacciones. Dado N interacciones totales, seleccione el (N / 50 + 1) valor mayor o el décimo valor para páginas con más de 500 interacciones.
Mide estas opciones en JavaScript
Puedes usar el siguiente ejemplo de código para determinar los valores de las primeras de las tres estrategias que mencionamos. Ten en cuenta que aún no es posible medir la cantidad total de interacciones en una página en JavaScript, por lo que incluyen la interacción promedio por sobre la estrategia de presupuesto o el aumento estrategias de aproximación de cuantiles.
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 alentar a los desarrolladores a probar estas nuevas métricas de capacidad de respuesta en sus sitios y avísenos si descubre algún problema.
Envía por correo electrónico cualquier comentario general sobre los enfoques descritos aquí al web-vitals-feedback Google grupo con “[Métricas de capacidad de respuesta]” en la línea del asunto. Realmente buscamos ¡con ganas de escuchar lo que piensas!