La página de optimización ayuda a identificar la causa de origen de los problemas de rendimiento del navegador utilizando datos reales del tráfico de usuarios. Soluciona las causas de la lentitud de las páginas utilizando métricas del navegador como Core Web Vitals (CWV) y la métrica personalizada Loading Time de Datadog, que evalúa el tiempo de carga de página completa completa desde la perspectiva del usuario.
Para un análisis más profundo, la página de optimización proporciona desgloses granulares de Core Web Vitals por datos demográficos de usuario, como navegador, región y versión de la aplicación. Puedes utilizar esta información para realizar un seguimiento de las tendencias de rendimiento a lo largo del tiempo, comprender qué grupos de usuarios se ven más afectados y priorizar las optimizaciones con precisión.
Requisitos previos
Para optimizar tu aplicación, asegúrate de que estás utilizando:
Seleccionar un vital
Ve a la página de optimización, que se encuentra en la pestaña Experiencia digital > Monitorización del rendimiento.
Desde esta vista, hay dos formas de seleccionar una página o un vital:
- Elegir en un mapa de árbol de las páginas más visitadas
- Introducir un nombre de vista en el cuadro de entrada y seleccionar la página
Los vitales disponibles incluyen:
- Loading Time (LT): Métrica personalizada de Datadog que mide el tiempo que tarda una página en cargarse desde la perspectiva de un usuario.
- Largest Contentful Paint (LCP): Mide la rapidez con la que se carga el elemento visual más grande de tu página, que es un factor crítico tanto para la experiencia del usuario como para las clasificaciones SEO. Un LCP lento puede frustrar a los usuarios, aumentar las tasas de rebote y perjudicar la visibilidad en las búsquedas.
- First Contentful Paint (FCP): Mide el tiempo que transcurre desde que el usuario navega por primera vez a la hasta que cualquier parte del contenido de la página se representa en la pantalla. Un FCP rápido ayuda a tranquilizar al usuario de que algo está sucediendo.
- Cumulative Layout Shift (CLS): Mide el mayor número de cambios de diseño inesperados que se producen durante el ciclo de vida de una página. Un cambio de diseño se produce cuando un elemento visible se desplaza de un fotograma representado al siguiente sin ninguna interacción del usuario, lo que altera la estabilidad visual de la página. Se trata de una métrica importante para medir la estabilidad visual, ya que ayuda a cuantificar la frecuencia con la que los usuarios experimentan cambios de diseño inesperados. Un CLS bajo ayuda a garantizar que la página sea agradable.
- Interaction to Next Paint (INP): Mide el tiempo que tarda una página en responder visualmente después de que un usuario interactúa con la página.
Filtrar y evaluar
Después de seleccionar una página y un vital, analiza los datos de rendimiento:
- Ajustar el intervalo de tiempo en la esquina superior derecha
- Utilizar desplegables para filtrar por atributos
- Seleccionar un grupo en “Mostrar desglose de filtros”
- Evaluar los vitales en diferentes percentiles
Por ejemplo, una evaluación pc75 representa el valor del percentil 75, utilizado habitualmente para CWV.
Visualizar la experiencia del usuario
La siguiente parte de la página te ayuda a visualizar exactamente lo que experimentan tus usuarios.
Basándose en el periodo de tiempo y el tráfico seleccionados, la página de optimización destaca el ejemplo más típico de lo que los usuarios ven en la página cuando se captura el vital seleccionado. Si utilizas Session Replay, es aquí donde ves una imagen de la página.
Para algunos vitales, también puedes seleccionar otras versiones de la página para investigar haciendo clic en “See a different element” (Ver un elemento diferente).
Solucionar problemas de recursos y errores
En la sección de resolución de problemas, puedes ver los recursos y errores que los usuarios encontraron en la página y que pueden haber afectado al rendimiento del vital. Por ejemplo, para Largest Contentful Paint (LCP), puedes ver los recursos que se cargaron antes de que se activara el LCP. Debido a que LCP es un indicador de cuánto tarda en cargarse el elemento más grande de la página, podrías investigar lo siguiente:
- Cualquier cosa que ocurra antes y podría causar lentitud o problemas de representación.
- Los recursos que son particularmente lentos o grandes podrían estar contribuyendo a los problemas de rendimiento.
- Errores recurrentes que podrían estar causando problemas.
Ver ejemplos de eventos
Para verlo todo en contexto con el resto de la actividad de la página, desplázate hasta la cascada y la cronología de los eventos. La cascada muestra la cronología de eventos hasta el momento en que se capturó el vital.
Puedes seleccionar otro evento de ejemplo utilizando el menú desplegable de la parte superior izquierda, y ampliar cualquier evento de la cascada haciendo clic en él para ver el panel lateral, como se muestra a continuación.
Creación de perfiles de navegador en ejemplos de eventos
Para un análisis más profundo de la causa de origen, utiliza la creación de perfiles de navegador junto con RUM para identificar qué actividad de JavaScript o de representación está generando experiencias lentas o que no responden. La creación de perfiles revela problemas de rendimiento que no siempre son visibles únicamente a través de Core Web Vitals. Para empezar, asegúrate de que la creación de perfiles de navegador está activada en la configuración del SDK RUM.
Referencias adicionales
Más enlaces, artículos y documentación útiles:
