Performance Monitoring utiliza seguimientos para recopilar datos sobre los procesos monitoreados en su aplicación. Un seguimiento es un informe que contiene datos capturados entre dos momentos en el tiempo en su aplicación.
Para las aplicaciones web, Performance Monitoring recopila automáticamente un seguimiento para cada página de su aplicación llamado seguimiento de carga de página . Cada seguimiento de carga de página recopila las siguientes métricas predeterminadas:
Primera pintura : una métrica que mide el tiempo entre el momento en que el usuario navega a una página y el momento en que ocurre cualquier cambio visual.
primera pintura con contenido : una métrica que mide el tiempo entre el momento en que un usuario navega a una página y el momento en que se muestra contenido significativo, como una imagen o texto.
domInteractive : una métrica que mide el tiempo entre el momento en que el usuario navega a una página y el momento en que la página se considera interactiva para el usuario.
domContentLoadedEventEnd : una métrica que mide el tiempo entre el momento en que el usuario navega a una página y el momento en que el documento HTML inicial se carga y analiza por completo.
loadEventEnd : una métrica que mide el tiempo entre el momento en que el usuario navega a la página y el momento en que se completa el evento de carga del documento actual.
retraso de la primera entrada : una métrica que mide el tiempo entre el momento en que el usuario interactúa con una página y el momento en que el navegador puede responder a esa entrada.
Puede ver los datos de estos seguimientos en la subpestaña Carga de página de la tabla de seguimientos, que se encuentra en la parte inferior del panel de Rendimiento (obtenga más información sobre el uso de la consola más adelante en esta página).
Definición de un seguimiento de carga de página
Este seguimiento mide varias métricas sobre cómo se cargan las páginas de su aplicación, específicamente cuánto tiempo lleva alcanzar puntos de carga comunes, como una aplicación responsiva.
Los seguimientos de carga de la página lo ayudan a realizar un seguimiento de los elementos vitales web principales de su aplicación, como la primera pintura de contenido.
Métricas recopiladas para seguimientos de carga de páginas
Estos seguimientos son seguimientos listos para usar, por lo que no puede agregarles métricas o atributos personalizados.
Primera pintura
Esta métrica mide el tiempo entre el momento en que el usuario navega a una página y el momento en que ocurre cualquier cambio visual.
Esta métrica es útil ya que la primera pintura indica a los usuarios que la página está comenzando a cargarse.
Comienza cuando el usuario navega a una página.
Se detiene cuando ocurre algún cambio visual, incluido un cambio de color de fondo o la carga de un encabezado.
Primera pintura contenta
Esta métrica mide el tiempo entre el momento en que un usuario navega a una página y el momento en que se muestra contenido significativo, como una imagen o texto.
Esta métrica es útil para obtener información sobre qué tan pronto sus usuarios ven el contenido real de su aplicación en lugar de solo un nuevo color de fondo o encabezado.
Comienza cuando el usuario navega a una página.
Se detiene inmediatamente después de que el navegador muestra el primer contenido del DOM, incluido cualquier texto, imagen (incluidas imágenes de fondo), lienzo que no sea blanco o SVG.
domInteractivo
Esta métrica mide el tiempo entre el momento en que el usuario navega a una página y el momento en que la página se considera interactiva para el usuario.
Esta métrica es útil para obtener información sobre qué tan pronto los usuarios pueden interactuar con elementos de su aplicación, como botones e hipervínculos, en lugar de simplemente verlos en la pantalla. Tenga en cuenta que esto no significa que el navegador responderá a la interacción (para esta métrica, consulte el primer seguimiento del retraso de entrada ).
Comienza cuando el usuario navega a una página.
Se detiene inmediatamente antes de que el agente de usuario establezca la preparación del documento HTML actual como "interactivo".
domContenidoLoadedEventEnd
Esta métrica mide el tiempo entre el momento en que el usuario navega a una página y el momento en que el documento HTML inicial se carga y analiza por completo.
Comienza cuando el usuario navega a una página.
Se detiene inmediatamente después de que el documento HTML inicial se carga y analiza por completo (
DOMContentLoaded), pero esto no significa que las hojas de estilo, las imágenes y los submarcos hayan terminado de cargarse.
cargarEventEnd
Esta métrica mide el tiempo entre el momento en que el usuario navega a la página y el momento en que se completa el evento de carga del documento actual.
Esta métrica es útil para obtener información sobre cuánto tiempo lleva cargar todo el contenido, incluidas las hojas de estilo y las imágenes.
Comienza cuando el usuario navega a una página.
Se detiene inmediatamente después de que se completa el evento de carga del documento HTML actual.
Primer retraso de entrada
Esta métrica mide el tiempo entre el momento en que el usuario interactúa con una página y el momento en que el navegador puede responder a esa entrada.
Esta métrica es útil ya que el navegador que responde a la interacción del usuario les brinda a los usuarios sus primeras impresiones sobre la capacidad de respuesta de su aplicación.
Comienza cuando el usuario interactúa por primera vez con un elemento de la página, como hacer clic en un botón o hipervínculo.
Se detiene inmediatamente después de que el navegador puede responder a la entrada, lo que significa que el navegador no está ocupado cargando o analizando su contenido.
Tenga en cuenta que para medir la primera métrica de retraso de entrada, debe agregar la biblioteca polyfill para esta métrica. Para obtener instrucciones de instalación, consulte la documentación de la biblioteca.
Realice un seguimiento, vea y filtre datos de rendimiento
Para ver datos de rendimiento en tiempo real, asegúrese de que su aplicación utilice una versión del SDK de monitoreo de rendimiento que sea compatible con el procesamiento de datos en tiempo real. Obtenga más información sobre los datos de rendimiento en tiempo real .
Realice un seguimiento de las métricas clave en su panel de control
Para conocer las tendencias de sus métricas clave, agréguelas a su tablero de métricas en la parte superior del panel de Rendimiento . Puede identificar rápidamente regresiones al ver los cambios semana tras semana o verificar que los cambios recientes en su código estén mejorando el rendimiento.
Para agregar una métrica a su tablero de métricas, siga estos pasos:
- Vaya al panel de rendimiento en Firebase console.
- Haga clic en una tarjeta de métrica vacía, luego seleccione una métrica existente para agregarla a su tablero.
- Haga clic en en una tarjeta de métrica completa para obtener más opciones, por ejemplo, para reemplazar o eliminar una métrica.
El tablero de métricas muestra los datos de métricas recopilados a lo largo del tiempo, tanto en forma gráfica como como un cambio porcentual numérico.
Obtenga más información sobre el uso del panel .
Ver trazas y sus datos.
Para ver sus seguimientos, vaya al panel de rendimiento en Firebase console, desplácese hacia abajo hasta la tabla de seguimientos y luego haga clic en la subpestaña correspondiente. La tabla muestra algunas métricas principales para cada seguimiento e incluso puede ordenar la lista por el cambio porcentual de una métrica específica.
Performance Monitoring proporciona una página de solución de problemas en Firebase console que resalta los cambios en las métricas, lo que facilita abordar y minimizar rápidamente el impacto de los problemas de rendimiento en sus aplicaciones y usuarios. Puede utilizar la página de solución de problemas cuando conozca posibles problemas de rendimiento, por ejemplo, en los siguientes escenarios:
- Seleccionas métricas relevantes en el panel y notas un gran delta.
- En la tabla de seguimientos, ordena para mostrar los deltas más grandes en la parte superior y ve un cambio porcentual significativo.
- Recibe una alerta por correo electrónico que le notifica sobre un problema de rendimiento.
Puede acceder a la página de solución de problemas de las siguientes maneras:
- En el panel de métricas, haga clic en el botón Ver detalles de métricas .
- En cualquier tarjeta métrica, seleccione
=> Ver detalles . La página de solución de problemas muestra información sobre la métrica que seleccionó. - En la tabla de seguimientos, haga clic en el nombre de un seguimiento o en cualquier valor de métrica en la fila asociada con ese seguimiento.
- En una alerta por correo electrónico, haga clic en Investigar ahora .
Cuando hace clic en el nombre de un seguimiento en la tabla de seguimientos, puede profundizar en las métricas de interés. Haga clic en el
- Filtre por URL de página para ver datos de una página específica de su sitio
- Filtre por tipo de conexión efectiva para saber cómo una conexión 3G afecta su aplicación
- Filtre por país para asegurarse de que la ubicación de su base de datos no afecte a una región específica
Obtenga más información sobre cómo ver datos de sus seguimientos .
Próximos pasos
Obtenga más información sobre el uso de atributos para examinar los datos de rendimiento.
Obtenga más información sobre cómo realizar un seguimiento de los problemas de rendimiento en Firebase console.
Configure alertas para cargas de páginas que estén degradando el rendimiento de su aplicación. Por ejemplo, puede configurar una alerta por correo electrónico para su equipo si el primer retraso de entrada para una página específica excede un umbral que usted establezca.