Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

Supervisión del rendimiento de los usos a los datos de las huellas a cobro revertido sobre los procesos supervisados en su aplicación. Un seguimiento es un informe que contiene datos capturados entre dos puntos en el tiempo en su aplicación.

Para aplicaciones web, Supervisión del rendimiento automáticamente recoge una traza para cada página de su aplicación llamada huella carga de la página. Cada seguimiento de carga de página recopila las siguientes métricas predeterminadas:

  • primera pintura - A medida que nos indica el tiempo transcurrido desde que los navega usuario a una página y cuando cualquier cambio visual ocurre

  • primera pintura contentful - A medida que nos indica el tiempo entre cuando un usuario navega a una página y cuando aparezca un contenido significativo, como una imagen o texto

  • DOMInteractive - A medida que nos indica el tiempo entre cuando se navega los usuarios a una página y cuando la página se considera interactiva para el usuario

  • domContentLoadedEventEnd - A medida que nos indica el tiempo transcurrido desde que la navega usuario a una página y cuando el documento HTML inicial está completamente cargada y analizada

  • loadEventEnd - A medida que nos indica el tiempo transcurrido desde que la navega usuario a la página y cuando se complete el evento Load del documento actual

  • retraso primera entrada - A medida que nos indica el tiempo transcurrido desde que el usuario interactúa con una página y cuando el navegador es capaz de responder a esa entrada

Puede consultar los datos de estos rastros en la página subpestaña de carga de la mesa de huellas, que se encuentra en la parte inferior del panel de rendimiento (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 se tarda en llegar a puntos de carga comunes, como una aplicación receptiva.

Rastros de carga de página ayudan a realizar un seguimiento de su aplicación signos vitales banda de núcleo , como primera pintura contentful.

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

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 cuando cualquier cambio visual ocurre.

Esta métrica es útil ya que las primeras señales de pintura a sus usuarios que la página está empezando a carga.

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

  • Se detiene cuando cualquier cambio visual ocurre, incluyendo un fondo de color o un cambio de carga cabecera.

Primera pintura con contenido

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 un texto.

Esta métrica es útil para obtener información sobre la rapidez con la que 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 procesa el primer contenido del DOM, incluido cualquier texto, imagen (incluidas las imágenes de fondo), lienzo no blanco o SVG.

domInteractive

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 la rapidez con la que los 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 va a responder a la interacción (para esta métrica, consulte la primera traza de retardo 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 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 está completamente cargada y analizada ( DOMContentLoaded ), pero esto no significa que hojas de estilo, imágenes y subtramas están terminado de cargar.

loadEventEnd

Esta métrica mide el tiempo entre el momento en que el usuario navega a la página y cuando se complete el evento Load del documento actual.

Esta métrica es útil para obtener información sobre cuánto tiempo se tarda en 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 se completa el evento de carga del documento HTML actual.

Retardo de la primera 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 los usuarios sus primeras impresiones sobre la capacidad de respuesta de su aplicación.

  • Comienza cuando el primer usuario interactúa 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 retardo de entrada, debe agregar la biblioteca polyfill para esta métrica. Para obtener instrucciones de instalación, consulte la biblioteca de documentación .

Seguimiento, visualización y filtrado de datos de rendimiento

Para ver datos de rendimiento en tiempo real, asegúrese de que su aplicación use una versión del SDK de Performance Monitoring 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 aprender cómo sus métricas clave están en tendencia, añadirlos a su tablero de indicadores en la parte superior del panel de rendimiento. Puede identificar rápidamente las regresiones al ver los cambios semanales o verificar que los cambios recientes en su código estén mejorando el rendimiento.

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

Para añadir una métrica para su tablero métricas, vaya al panel de rendimiento en la consola Firebase, a continuación, 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 una tarjeta métrica poblada para más opciones, como para 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 como un cambio porcentual numérico.

Más información sobre el uso del panel de control .

Ver trazas y sus datos

Para ver sus huellas, vaya al panel de rendimiento en la consola Firebase, desplácese hacia abajo a la mesa de huellas, a continuación, en la subficha apropiado. La tabla muestra algunas métricas principales para cada seguimiento, e incluso puede ordenar la lista por el porcentaje de cambio para una métrica específica.

Si hace clic en el nombre de un 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 utilizar el filtro de botón (parte superior izquierda de la pantalla) para filtrar los datos por atributos, por ejemplo:

una imagen de los datos de Firebase Performance Monitoring que se filtran por atributo
  • Filtrar por URL de la página para ver los datos de una página específica de su sitio
  • Filtrar por tipo de conexión efectiva de aprender cómo una conexión 3G afecta a su app
  • Filtrar por país para asegurarse de su ubicación base de datos no está afectando a una región específica

Más información sobre la visualización de datos para sus rastros .

Próximos pasos