Busque interacciones lentas en el campo

Obtén información para encontrar interacciones lentas en los datos de campo de tu sitio web y oportunidades de mejorar su interacción con el siguiente procesamiento de imagen.

Jeremy Wagner

Los datos de campo son la fuente autorizada sobre la experiencia de los usuarios reales en tu sitio web. Muestra avances de problemas que tal vez no veas solo en los datos de lab. Si bien las interacciones se pueden simular con herramientas basadas en labs, no podrás reproducir cada interacción en el lab como lo experimentan los usuarios en el campo. Recopilar datos de campo para Interaction to Next Paint (INP) es fundamental para comprender qué tan responsiva es tu página para los usuarios reales, y contiene las pistas para mejorar aún más su experiencia.

Qué información debes recopilar en el campo y por qué

Al recopilar datos de INP en el campo, debe capturar lo siguiente para explicar por qué las interacciones fueron lentas:

• El valor del INP. Estos son los datos clave que deberás recopilar. La distribución de estos valores determinará si la página cumple con los umbrales del INP.
• La cadena de selector de elementos responsable del INP de la página Conocer el INP de una página es bueno, pero no lo suficientemente bueno por sí solo. Si no sabes qué elemento fue responsable de él, estarás en la oscuridad. Mediante el registro de las cadenas del selector de elementos, sabrás exactamente qué elementos son responsables de las interacciones.
• Es el estado de carga de la página para la interacción que es el INP de la página. Cuando se carga una página, es razonable suponer que hay más actividad del subproceso principal que podría generar una mayor latencia de interacción. Durante la carga de la página, se ejecutan el análisis de HTML, el análisis de la hoja de estilo y la evaluación y ejecución de JavaScript. Saber si una interacción ocurrió durante la carga de la página o después te ayuda a determinar si necesitas optimizar para que el inicio sea más rápido, de manera que las interacciones tengan más espacio en el subproceso principal para ejecutarse rápidamente, o si la interacción responsable del INP de la página en sí es lenta.
• El startTime de la interacción. Registrar el elemento startTime de la interacción te permite saber con exactitud cuándo ocurrió la interacción en el cronograma de rendimiento.
• El tipo de evento Es bueno conocer el tipo de evento, ya que te indicará si la interacción fue el resultado de una click, una keypress o algún otro tipo de evento apto. Una interacción del usuario puede contener varias devoluciones de llamada y puede ayudarte a identificar con exactitud qué devolución de llamada de evento de la interacción tardó más en ejecutarse.

Si bien todo esto parece mucho para tener en cuenta, no hace falta que reinventes la rueda para conseguirlo. Afortunadamente, estos datos se exponen en la biblioteca JavaScript web-vitals y aprenderás a recopilarlos en la siguiente sección.

Mide las interacciones en el campo con la biblioteca de JavaScript web-vitals

La biblioteca de JavaScript web-vitals es una excelente manera de encontrar interacciones lentas en el campo gracias, en gran medida, a su capacidad de proporcionar atribución por lo que las causa. El INP se puede recopilar en navegadores compatibles con la API de Event Timing y su propiedad interactionId.

El uso de un proveedor de monitoreo de usuario real (RUM) para obtener INP es lo más conveniente, pero no siempre es una opción. Si ese es tu caso, por ejemplo, puedes usar la biblioteca JavaScript web-vitals para recopilar y transmitir datos de INP a Google Analytics para una evaluación posterior:

// Be sure to import from the attribution build:
import {onINP} from 'web-vitals/attribution';

function sendToGoogleAnalytics ({name, value, id, attribution}) {
  // Destructure the attribution object:
  const {eventEntry, eventTarget, eventType, loadState} = attribution;

  // Get timings from the event timing entry:
  const {startTime, processingStart, processingEnd, duration, interactionId} = eventEntry;

  const eventParams = {
    // The page's INP value:
    metric_inp_value: value,
    // A unique ID for the page session, which is useful
    // for computing totals when you group by the ID.
    metric_id: id,
    // The event target (a CSS selector string pointing
    // to the element responsible for the interaction):
    metric_inp_event_target: eventTarget,
    // The type of event that triggered the interaction:
    metric_inp_event_type: eventType,
    // Whether the page was loaded when the interaction
    // took place. Useful for identifying startup versus
    // post-load interactions:
    metric_inp_load_state: loadState,
    // The time (in milliseconds) after page load when
    // the interaction took place:
    metric_inp_start_time: startTime,
    // When processing of the event callbacks in the
    // interaction started to run:
    metric_inp_processing_start: processingStart,
    // When processing of the event callbacks in the
    // interaction finished:
    metric_inp_processing_end: processingEnd,
    // The total duration of the interaction. Note: this
    // value is rounded to 8 milliseconds of granularity:
    metric_inp_duration: duration,
    // The interaction ID assigned to the interaction by
    // the Event Timing API. This could be useful in cases
    // where you might want to aggregate related events:
    metric_inp_interaction_id: interactionId
  };

  // Send to Google Analytics
  gtag('event', name, eventParams);
}

// Pass the reporting function to the web-vitals INP reporter:
onINP(sendToGoogleAnalytics);

Si tienes Google Analytics y ejecutas el código anterior en tu sitio web, no solo obtendrás un informe detallado del INP de la página, sino también información contextual útil que puede darte una mejor idea de dónde comenzar a optimizar las interacciones lentas.

Supervisa la duración completa de la sesión, no solo hasta onload

Si usas la biblioteca de JavaScript web-vitals, como se mencionó anteriormente, es posible que se envíen varios eventos de estadísticas a Google Analytics. No hay problema, ya que el ID que web-vitals genera para la página actual seguirá siendo el mismo, y Google Analytics te permitirá reemplazar los datos anteriores.

Sin embargo, no todos los proveedores de RUM funcionan de esta manera, por lo que si estás creando tu propia solución de recopilación de RUM, deberás tener esto en cuenta. Si tu proveedor de estadísticas actual no permite el reemplazo de registros existentes, deberás registrar todos los valores delta (es decir, la diferencia entre los estados pasado y actual de una métrica) para una métrica y transmitirlos con el mismo ID proporcionado por la biblioteca web-vitals. Luego, podrás sumar esos cambios agrupando el ID. Para obtener más información, consulta la sección sobre el manejo de deltas en la documentación de web-vitals.

Obtén datos de campo rápidamente con CrUX

El Informe de UX de Chrome (CrUX) es el conjunto de datos oficial del programa de Métricas web. Si bien los datos de CrUX por sí solos no proporcionan toda la información que necesitas para solucionar problemas específicos de INP, te permiten saber si tienes un problema en primer lugar. Incluso si ya recopilas datos de campo a través de un proveedor de RUM, considera contrastarlos con los datos de CrUX para tu sitio web (si están disponibles), ya que existen diferencias en las metodologías que utilizan.

Puedes evaluar el INP de tu sitio web y ver sus datos de CrUX con PageSpeed Insights (PSI). PageSpeed Insights puede proporcionar datos de campo a nivel de página para sitios web que se incluyen en el conjunto de datos de CrUX. Para auditar una URL con PageSpeed Insights, ve a https://pagespeed.web.dev/, ingresa la URL que quieras probar y haz clic en el botón Analizar.

Una vez que comience la evaluación, los datos de CrUX estarán disponibles al instante a medida que se ejecute Lighthouse (una herramienta de lab).

Cuando Lighthouse termine de ejecutar su evaluación, PSI completará la evaluación con las auditorías de Lighthouse.

¿Qué sucede si no tengo datos de campo?

Es posible que te encuentres en una situación en la que no tengas o ni siquiera puedas recopilar datos de campo. Si esto describe tu situación, dependerás por completo de las herramientas del lab para encontrar interacciones lentas. Para obtener más información sobre las pruebas de laboratorio, consulta Cómo diagnosticar de forma manual la causa de un INP deficiente en el lab.

Conclusión

Los datos de campo son la mejor fuente de información que puedes utilizar cuando se trata de comprender qué interacciones son problemáticas para los usuarios reales en el campo. Si aprovechas la información disponible en PageSpeed Insights o usas herramientas de recopilación de datos de campo, como la biblioteca JavaScript web-vitals (o tu proveedor de RUM), puedes tener más seguridad sobre qué interacciones son más problemáticas y, luego, reproducir interacciones problemáticas en el lab y corregirlas.

Hero image de Unsplash, de Federico Respini.