El eventoPageViewTiming de monitoreo de browser envía cada punto de datos como un evento separado tan pronto como esté disponible. Debido a que no restringimos el tiempo, puede recibir datos de la primera pintura o de la primera interacción independientemente de cuándo se active. Este documento describe por qué y cómo utilizar PageViewTiming y su atributo para consultar datos sobre su sitio, carga de componentes y métrica de rendimiento del usuario, tanto desde el punto de vista visual como de capacidad de respuesta.
¿Por qué utilizar PageViewTiming?
Si su aplicación utiliza páginas asincrónicas o dinámicas, es posible que necesite detalles adicionales sobre la carga del sitio o del componente. Pero las páginas pueden cargar contenido de muchas maneras diferentes y el usuario controla cuándo interactúa con ese contenido. Es por eso que algunas métricas de rendimiento centradas en el usuario ocurren fuera del tiempo de carga de la ventana estándar (tiempo de carga de la página) en el agente del navegador.
Por ejemplo, el usuario puede impacientarse y comenzar a hacer clic tan pronto como aparece el contenido en la página web. O bien, pueden esperar para usar la página hasta mucho después de que se cargue el contenido.
El evento PageViewTiming proporciona un mecanismo de entrega más en tiempo real que no depende de ningún otro evento. La métrica adicional puede ayudarle a comprender la experiencia del usuario en su sitio, tanto desde el punto de vista visual como de capacidad de respuesta.
Soporte para los principales web Métricas de Google
A partir de la versión 1177 del agente para monitoreo de navegador, tenemos soporte completo para Métricas web principales. Esta característica está disponible en todas las versiones del agente (Lite, Pro o Pro+SPA).
Tenga en cuenta que las métricas que componen Métricas web principales evolucionan con el tiempo. El conjunto actual se centra en tres aspectos de la experiencia del usuario: carga, interactividad y estabilidad visual. Incluye las siguientes métricas y su respectivo umbral:
Largest contentful paint (LCP)
: mide el rendimiento de carga. Para brindar una buena experiencia al usuario, LCP debe ocurrir
within 2.5 seconds
de cuando la página comienza a cargarse por primera vez.
Interaction to next paint (INP)
: mide la latencia de toda la interacción del usuario con una página. Para brindar una buena experiencia al usuario, las páginas deben tener un INP de
less than 200 milliseconds
.
: mide la estabilidad visual. Para brindar una buena experiencia al usuario, las páginas deben mantener un CLS de
less than 0.1
.
Para cada una de estas métricas, para asegurarse de alcanzar el objetivo recomendado para la mayoría de sus usuarios, un buen umbral para medir es el 75th percentile de cargas de página, segmentadas en dispositivos móviles y de escritorio.
Para obtener más información, vea nuestra charla de Nerd Days sobre el rendimiento percibido.
Visual detallada, interactividad y capacidad de respuesta métrica.
Los eventos BrowserInteraction y PageView finalizan sus informes cuando reciben el tiempo de carga de la ventana de la página (o carga de la ventana y AJAX). Sin embargo, la pintura y la interactividad métrica pueden ocurrir en cualquier momento. PageViewTiming entrega estas métricas como un evento separado a:
- Tenga en cuenta la variabilidad en este momento.
- Evite establecer un tiempo de espera arbitrario.
- Evite mantener
BrowserInteractionyPageVieweventos indefinidamente.
Datos adicionales | Comentarios |
|---|---|
| Los atributos El uso de |
| La métrica La investigación de Google encontró que observar cuándo se representó el elemento más grande era una forma más precisa de medir cuándo el contenido principal de una página está cargado y es útil. Para obtener más información sobre esta métrica, incluidas limitaciones y consideraciones, consulte el borrador del w3c. También informamos el atributo de puntuación de cambio de diseño acumulativo con LCP. Este atributo se informa como La pintura de mayor contenido es una de las tres métricas identificadas por Google como Métricas web principales. Los valores de LCP de hasta 2,5 segundos se consideran "buenos", entre 2,5 y 4 segundos se consideran "necesita mejorar" y por encima de 4 segundos se consideran "malos". |
| Con la adición de La métrica También informamos el atributo de puntuación del cambio de diseño acumulativo (CLS) en el momento de la primera interacción del usuario. Este atributo se informa como INP es una de las tres métricas identificadas por Google como core web vitals. Una puntuación INP de 200 ms o menos se considera "buena", entre 200 y 500 ms se considera "necesita mejorar" y por encima de 500 ms se considera "mala". |
| El cambio de diseño acumulativo (CLS) está disponible con el agente v1177 o superior. CLS es una métrica importante centrada en el usuario para medir la estabilidad visual porque ayuda a cuantificar la frecuencia con la que el diseño cambia inesperadamente. Un CLS bajo ayuda a garantizar que la página sea atractiva. El cambio de diseño acumulativo es una de las tres métricas identificadas por Google como Métricas web principales. Las puntuaciones CLS de hasta 0,1 se consideran "buenas", entre 0,1 y 0,25 se consideran "necesita mejorar" y por encima de 0,25 se consideran "malas". |
| La interacción con la siguiente pintura (INP) está disponible con el agente v1227 o superior. INP es una métrica más nueva para medir la capacidad de respuesta del tiempo de ejecución y el rendimiento percibido por el usuario. Mide la mayor latencia entre la interacción del usuario y la respuesta o repintado de la página. Esta es una métrica experimental pero identificada como significativa agregada en Web Vitals v3. Las puntuaciones INP de hasta 200 ms se consideran "buenas", entre 200 y 500 ms se consideran "necesita mejorar" y por encima de 500 ms se consideran "malas". |
| Puede revisar diferentes tipos de actividades con el atributo |
| Este es el |
| Este es el tamaño informado del elemento |
| Los informes de tareas largas están disponibles a partir del agente v1227. Este evento representa cada entrada observada por la API experimental PerformanceLongTaskTiming, que informa tareas que bloquean el subproceso principal de la UI durante >50 ms. NOTA: Aunque este evento está disponible como característica experimental, los datos correspondientes no se recopilan automáticamente. Debe estar habilitado en la configuración del agente del navegador usando una bandera en el objeto Generalmente se recomienda dividir y optimizar estas tareas para evitar retrasos en el procesamiento de la entrada o la interacción del usuario. Las tareas largas pueden afectar o estar estrechamente relacionadas con la métrica |
| El evento También informamos el atributo de puntuación de cambio de diseño acumulativo (CLS) con |
| El evento También informamos el atributo de puntuación de cambio de diseño acumulativo (CLS) con |
| El evento También informamos el atributo de puntuación de cambio de diseño acumulativo (CLS) con |
Compatibilidad y requisitos
Requisitos:
- Cumple con los requisitos de instalación.
- Para informar este evento se requiere agente del navegador versión 1153 o superior.
Siga nuestras notas de la versión del agente del navegador para saber cuándo se lanzan nuevas métricas.
Estas métricas son compatibles con las siguientes versiones browser . Para navegadores no compatibles, no se registrará ningún evento PageViewTiming .
Métrica | Versiones browser compatibles |
|---|---|
|
|
|
|
|
|
|
|
|
|
| Actualmente, este evento es compatible con la mayoría de las versiones browser modernos, excepto Safari inferior a 14.1 (escritorio) o 14.5 (iOS). Matriz de compatibilidad vía documentación de MDN. |
| Actualmente, este evento es compatible con todos los navegadores de escritorio y móviles. Matriz de compatibilidad vía documentación de MDN. |
| Actualmente, este evento es compatible con todos los navegadores de escritorio y móviles. Matriz de compatibilidad vía documentación de MDN. |
Cambio de diseño acumulativo
El cambio de diseño acumulativo (CLS) es una métrica que mide la estabilidad del contenido de una página web. Para obtener una descripción completa, consulte web.dev/cls.
¿Cómo se captura CLS en New Relic?
Los cambios en el diseño de la página según lo informado por la API Layout Instability se agregan a lo largo de la vida de la página y se informan como un atributo en todos los eventos PageViewTiming , lo que representa el valor CLS cuando ocurrió ese evento.
Usando este modelo, el usuario puede ver su valor CLS en diferentes puntos de la vida de la página; por ejemplo, CLS valora hasta que el usuario por primera vez interactúe con la página u oculte la página.
Aproximación de otras fuentes CLS
Lighthouse captura el valor CLS solo hasta el momento en que se carga una página, lo cual es útil en un entorno de desarrollo o de laboratorio. Puede aproximar los valores de Lighthouse observando el evento windowLoad PageViewTiming .
El informe CrUX utiliza valores capturados durante la vida útil de la página, lo que es útil para analizar los peores cambios en un entorno RUM. Puede aproximar los valores de CrUX observando el atributo CLS en el evento windowUnload PageViewTiming . Estos valores no serán exactamente iguales debido a diferentes conjuntos de muestras y a una diferencia en cómo se incluyen los valores de las páginas web de larga duración. El agente de monitoreo de navegador New Relic captura CLS cuando se descarga la página, mientras que CrUX recopila y actualiza la métrica durante la vida útil de la página.
Cómo se agrega CLS
A partir de julio de 2021, Google actualizó la forma en que se agregan los valores CLS. Las versiones v12xx del agente de monitoreo del navegador utilizan el método descrito en Evolución de la métrica CLS.
Browser monitoring agent v12xx or higher:
Los valores de cambio de diseño se capturan en ventanas. Los cambios de diseño que ocurrieron con un intervalo de 1 segundo entre sí, pero con no más de 5 segundos entre el primer y el último cambio, son parte de la misma ventana. Una puntuación CLS representa la suma de los valores de cambio de diseño de la ventana con la suma más alta de valores de cambio de diseño.
Prior to Browser agent v12xx:
Una puntuación CLS representa la suma de todos los cambios de diseño que ocurrieron hasta ese momento de la vida de la página.
Consulta los datos de tu evento
Aquí hay algunos ejemplos de consultas sobre los datos del evento para ayudarlo a comenzar.