Google se compromete a impulsar la igualdad racial para las comunidades afrodescendientes. Obtén información al respecto.

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 las aplicaciones web, Performance Monitoring recopila automáticamente un seguimiento para cada página de su aplicación llamado seguimiento de carga de la 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 un 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 la finalización del 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 se tarda en llegar a puntos de carga comunes, como una aplicación receptiva.

Los seguimientos de carga de la página lo ayudan a rastrear los elementos básicos de la web de su aplicación, como la primera pintura con contenido.

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 el momento en que ocurre cualquier cambio visual.

Esta métrica es útil ya que la primera pintura 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 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 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 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 DOMContentLoaded ( DOMContentLoaded ), pero esto no significa que las hojas de estilo, las imágenes y los subcuadros hayan terminado de cargarse.

loadEventEnd

Esta métrica mide el tiempo entre el momento en que el usuario navega a la página y la finalización del evento de carga 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 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 retardo de entrada, debe agregar la biblioteca polyfill 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 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. Obtenga más información .

Realice un seguimiento de las métricas clave en su panel de control

Para saber cómo sus métricas clave están en tendencia, agréguelas a su tablero de métricas en la parte superior del tablero 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 agregar una métrica a su tablero de métricas, vaya al tablero de Rendimiento en Firebase console, luego haga clic en la pestaña Tablero . 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 ver 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 como un cambio porcentual numérico.

Obtenga más información sobre cómo usar el 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 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 usar el botón filtro (arriba a la izquierda de la pantalla) para filtrar los datos por atributo, por ejemplo:

una imagen de los datos de Firebase Performance Monitoring que se filtran por atributo
  • Filtrar 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 trazas .

Próximos pasos