Información general

En los eventos de vistas de RUM se recopilan métricas amplias del rendimiento de cada vista de página. Monitoriza las vistas de página de tu aplicación y explora las métricas del rendimiento en los dashboards y el RUM Explorer.

Puedes acceder a las métricas del rendimiento de tus vistas en:

• Los dashboards predefinidos de RUM, que proporcionan una vista muy clara del rendimiento de tu aplicación. Por ejemplo, puedes filtrar los atributos por defecto recopilados por RUM para sacar a la luz los problemas que afectan a un subconjunto de usuarios en el dashboard de Información general del rendimiento. También puedes clonar este dashboard, personalizarlo según tus necesidades y utilizar cualquier métrica de rendimiento de RUM en la consulta del dashboard.
• Una cascada de rendimiento, accesible para cada evento de vista de RUM en el RUM Explorer, que te permite solucionar problemas de rendimiento de una vista de página específica. Muestra cómo los activos y recursos de tu sitio web, las tareas largas y los errores de frontend afectan al rendimiento a nivel de la página para tus usuarios finales.

Tiempos de eventos y métricas de core web vitals

Las métricas de Core Web Vitals de Google son un conjunto de tres métricas diseñados para monitorizar la experiencia de usuario de un sitio. Estas métricas se centran en ofrecer una visión del rendimiento de carga, la interactividad y la estabilidad visual. Cada métrica viene acompañada de orientaciones sobre el rango de valores que se traducen en una buena experiencia de usuario. Datadog recomienda la monitorización del percentil 75 para estas métricas.

• La interacción con la siguiente pintura y la pintura de mayor contenido no se recopilan para las páginas abiertas en segundo plano (por ejemplo, en una nueva pestaña o en una ventana sin foco).
• Las métricas recopiladas de las páginas de vistas de tus usuarios reales pueden diferir de las calculadas para páginas cargadas en un entorno fijo y controlado, como un test de navegador Sintético. La monitorización Sintético muestra la pintura de mayor contenido y el desplazamiento de diseño acumulativo como métricas de laboratorio, no como métricas reales.

Elementos objetivo de Core Web Vitals

Identificar qué elemento desencadenó una instancia alta de la métrica de Core Web Vitals es el primer paso para comprender la causa raíz y poder mejorar el rendimiento. RUM informa del elemento asociado a cada instancia de Core Web Vitals:

• Para la pintura de mayor contenido, RUM informa del selector CSS del elemento correspondiente a la pintura de mayor contenido.
• Para la Interacción hasta la siguiente pintura, RUM informa del selector CSS del elemento asociado con la interacción más larga hasta la siguiente pintura.
• Para el retardo de la primera entrada, RUM informa del selector CSS del primer elemento con el que interactuó el usuario.
• Para el Desplazamiento de diseño acumulativo, RUM informa del selector CSS del elemento más desplazado que contribuye al CLS.

Todas las métricas del rendimiento

Monitorización de aplicaciones de página única (SPA)

Para las aplicaciones de página única (SPA), el SDK del RUM Browser diferencia entre la navegación initial_load y route_change con el atributo loading_type. Si una interacción en tu página web conduce a una URL diferente sin una actualización completa de la página, el SDK de RUM inicia un nuevo evento de vista con loading_type:route_change. RUM realiza un rastreo de los cambios de URL mediante la API del historial.

Datadog proporciona una métrica de rendimiento única, loading_time, que calcula el tiempo necesario para que se cargue una página. Este métrica funciona tanto para la navegación en initial_load como en route_change.

Cómo se calcula el tiempo de carga

Para tener en cuenta las aplicaciones web modernas, el tiempo de carga vigila las solicitudes de red y las mutaciones del DOM.

• Carga inicial: El tiempo de carga es igual a lo que sea más largo:

  • La diferencia entre navigationStart y loadEventEnd o
  • La diferencia entre navigationStart y la primera vez que la página no tiene actividad. Lee Cómo se calcula la actividad de la página para más detalles.

• Cambio de ruta SPA: el tiempo de carga es igual a la diferencia entre el cambio de URL y la primera vez que la página no tiene actividad. Lee Cómo se calcula la actividad de la página para más detalles.

Cómo se calcula la actividad de la página

El SDK del RUM Browser realiza un rastreo de la actividad de la página para estimar el tiempo que transcurrirá hasta que la interfaz vuelva a ser estable. Se considera que la página tiene actividad cuando:

• xhr o fetch solicitudes están en curso.
• El navegador emite entradas de tiempo de recursos de rendimiento (fin de carga de JS, CSS, etc.).
• El navegador emite mutaciones del DOM.

Se considera que la actividad de la página ha terminado cuando no ha tenido ninguna actividad durante 100 ms.

Nota: Solo se tiene en cuenta la actividad que se produce después de la inicialización del SDK.

Caveats:

El criterio de 100 ms desde la última solicitud o mutación del DOM podría no ser una determinación precisa de la actividad en los siguientes escenarios:

• La aplicación recopila datos analíticos enviando solicitudes a una API periódicamente o después de cada clic.
• La aplicación utiliza técnicas “cometa” (es decir, streaming o sondeo largo) y la solicitud permanece en espera durante un tiempo indefinido.

Para mejorar la precisión de la determinación de la actividad en estos casos, especifica excludedActivityUrls, una lista de recursos para que el SDK del RUM Browser los excluya al calcular la actividad de la página:

window.DD_RUM.init({
    ...
    excludedActivityUrls: [
        // Excluir URL exactas
        'https://third-party-analytics-provider.com/endpoint',

        // Excluir cualquier URL que termine en /comet
        /\/comet$/,

        // Excluir cualquier URL para la cual la función devuelva true
        (url) => url === 'https://third-party-analytics-provider.com/endpoint',
    ]
})

Navegación en Hash SPA

El SDK del RUM monitoriza automáticamente los marcos que dependen de la navegación hash (#). El SDK busca HashChangeEvent y emite una nueva vista. Los eventos procedentes de una etiqueta (tag) de ancla HTML que no afectan al contexto de la vista actual se ignoran.

Crear métricas de rendimiento personalizadas

Medir el rendimiento de los componentes con indicadores vitales personalizados

Utiliza la API customVital para medir el rendimiento de tu aplicación a nivel de componente. Por ejemplo, puedes medir cuánto tarda una parte de la página en renderizarse o cuánto tarda un componente en responder a una interacción del usuario. Nota: Los nombres de los indicadores vitales personalizados no pueden contener espacios ni caracteres especiales.

Mediciones de la duración de inicio y parada

Inicia una medición de duración llamando a startDurationVital y detén una medición con stopDurationVital:

window.DD_RUM.startDurationVital("dropdownRendering")
window.DD_RUM.stopDurationVital("dropdownRendering")

Una vez que se llama al método stopDurationVital, la duración del indicador vital personalizado se envía a Datadog y puede consultarse mediante @vital.name:dropdownRendering. También se puede filtrar por duración, por ejemplo con @vital.duration:>10.

Utilizar referencias y descripciones

Utiliza la referencia devuelta por startDurationVital y especifica una cadena description para diferenciar entre instancias del mismo indicador vital personalizado en varias páginas. Por ejemplo, para realizar un seguimiento de la duración de dropdownRendering en la página login:

const reference = window.DD_RUM.startDurationVital("dropdownRendering", { description: "login" })
window.DD_RUM.stopDurationVital(reference)

Este código agrupa por @vital.description para que puedas realizar un seguimiento del comportamiento de renderización del mismo componente en diferentes páginas.

También puedes añadir contexto a tu indicador vital personalizado con la propiedad context:

window.DD_RUM.startDurationVital("dropdownRendering", {context: { clientId: "xxx" }})
window.DD_RUM.stopDurationVital("dropdownRendering")

Informar un indicador vital personalizado con addDurationVital

En lugar de establecer variables de indicadores vitales personalizados individualmente, puedes informar de un indicador vital personalizado en una sola operación mediante addDurationVital:

window.DD_RUM.addDurationVital("dropdownRendering", {startTime: 1707755888000, duration: 10000})

Rastreo de los tiempos de rendimiento adicionales

Además del tiempo de rendimiento por defecto de RUM, puedes medir dónde pasa el tiempo tu aplicación con mayor flexibilidad. La API addTiming te proporciona una forma sencilla de añadir un tiempo de rendimiento adicional.

Por ejemplo, puedes añadir un tiempo cuando tu imagen principal haya aparecido:

``html

O cuando los usuarios se desplazan por primera vez:

document.addEventListener("scroll", function handler() {
    //Eliminar el evento de escucha para que solo se active una vez
    document.removeEventListener("scroll", handler);
    window.DD_RUM.addTiming('first_scroll');
});

Una vez enviado el tiempo, este es accesible en nanosegundos como @view.custom_timings.<timing_name>, por ejemplo: @view.custom_timings.first_scroll. Debes crear una medida antes de crear una visualización en el RUM Explorer o en tus dashboards.

Para aplicaciones de página única, la API addTiming emite un tiempo relativo al inicio de la vista de RUM actual. Por ejemplo, si un usuario llega a tu aplicación (carga inicial), luego pasa a una página diferente después de 5 segundos (cambio de ruta) y finalmente activa addTiming después de 8 segundos, el tiempo es igual a 8-5 = 3 segundos.

Si estás utilizando una configuración asíncrona, puedes proporcionar tu propio tiempo (como una marca de tiempo de época UNIX) como segundo parámetro.

Por ejemplo:

document.addEventListener("scroll", function handler() {
    //Eliminar el evento de escucha para que solo se active una vez
    document.removeEventListener("scroll", handler);

    const timing = Date.now()
    window.DD_RUM.onReady(function() {
      window.DD_RUM.addTiming('first_scroll', timing);
    });
});

Referencias adicionales

Más enlaces, artículos y documentación útiles:

Laboratorio interactivo: métricas de Core Web VitalsCENTRO DE APRENDIZAJE Real User Monitoring (RUM)BLOG Monitor de métricas de Core Web Vitals con Datadog RUM y Monitorización SintéticoBLOG Explorar tus vistas en DatadogDOCUMENTACIÓN Aplicar visualizaciones a tus eventosDOCUMENTACIÓN Información sobre los dashboards de RUMDOCUMENTACIÓN