Más información sobre los datos de rendimiento de carga de la página (aplicaciones web)

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 puntos en el tiempo en su aplicación.

Para las aplicaciones web, Performance Monitoring recopila automáticamente un seguimiento de cada página de su aplicación, denominado 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 cuando ocurre cualquier cambio visual

  • primera pintura con contenido: una métrica que mide el tiempo entre que un usuario navega a una página y cuando 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 en 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 llegar a los puntos de carga comunes, como una aplicación receptiva.

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 con contenido.

Métricas recopiladas para seguimientos de carga de página

Estos seguimientos son seguimientos listos para usar, por lo que no puede agregarles métricas personalizadas o atributos personalizados.

Primera pintura

Esta métrica mide el tiempo entre el momento en que el usuario navega a una página y cuando ocurre cualquier cambio visual.

Esta métrica es útil ya que la primera pintura les indica a sus usuarios que la página está comenzando a cargarse.

  • Comienza cuando el usuario navega a una página.

  • Se detiene cuando ocurre cualquier cambio visual, incluido un cambio de color de fondo o una carga de encabezado.

Primera pintura con contenido

Esta métrica mide el tiempo entre el momento en que un usuario navega a una página y cuando se muestra contenido significativo, como una imagen o texto.

Esta métrica es útil para conocer qué tan pronto los 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 las 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 conocer qué tan pronto sus usuarios pueden interactuar con los elementos de su aplicación, como botones e hipervínculos, en lugar de solo 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 seguimiento del primer retraso de entrada ).

  • Comienza cuando el usuario navega a una página.

  • Se detiene inmediatamente antes de que el agente de usuario establezca la disponibilidad del documento HTML actual en "interactivo".

domContentLoadedEventEnd

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 haya cargado y analizado por completo ( DOMContentLoaded ), pero esto no significa que las hojas de estilo, las imágenes y los submarcos hayan terminado de cargarse.

cargarEventoEnd

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 su 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 finaliza el evento de carga del documento HTML actual.

Primer retardo 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 de un usuario les brinda a sus 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 un 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 de relleno múltiple para esta métrica. Para obtener instrucciones de instalación, consulte la documentación de la biblioteca.

Seguimiento, visualización y filtrado de datos de rendimiento

Para ver los datos de rendimiento en tiempo real, asegúrese de que su aplicación utilice una versión del SDK de supervisión del rendimiento que sea compatible con el procesamiento de datos en tiempo real. Más información

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 las regresiones al ver los cambios semana tras semana o verificar que los cambios recientes en su código están mejorando el rendimiento.

una imagen del tablero de métricas en el panel de Firebase Performance Monitoring

Para agregar una métrica a su tablero de métricas, vaya al panel Rendimiento en la consola de Firebase, luego haga clic en la pestaña Panel . Haga clic en una tarjeta de métrica vacía, luego seleccione una métrica existente para agregar a su tablero. Haga clic en en una tarjeta de métrica completa para obtener más opciones, como reemplazar o eliminar una métrica.

El tablero de métricas muestra los datos métricos recopilados a lo largo del tiempo, tanto en forma gráfica como en forma de cambio de porcentaje numérico.

Obtenga más información sobre el uso del tablero .

Ver rastros y sus datos

Para ver sus seguimientos, vaya al panel de rendimiento en la consola de Firebase, 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.

Si hace clic en un nombre de seguimiento en la tabla de seguimientos, puede hacer clic en varias pantallas para explorar el seguimiento y profundizar en las métricas de interés. En la mayoría de las páginas, puede usar el botón filtro (parte superior izquierda de la pantalla) para filtrar los datos por atributo, por ejemplo:

una imagen de los datos de Firebase Performance Monitoring filtrados por atributo
  • Filtre por URL de página para ver los 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 los datos de sus seguimientos .

Próximos pasos

  • Obtenga más información sobre el uso de atributos para examinar los datos de rendimiento.

  • Obtén más información sobre cómo realizar un seguimiento de los problemas de rendimiento en Firebase console.

  • Configure alertas para las cargas de página que degradan el rendimiento de su aplicación. Por ejemplo, puede configurar una alerta de correo electrónico para su equipo si el primer retraso de entrada para una página específica supera el umbral que usted establece.