Ir a la consola

Seguimientos automáticos para apps web

Un seguimiento es un informe de datos de rendimiento que se capturan entre dos períodos de tiempo en tu app. En el caso de las apps web, Performance Monitoring proporciona automáticamente un seguimiento para la carga de página.

El seguimiento de la carga de página se desglosa en las siguientes métricas predeterminadas:

Definiciones de las métricas de carga de página

Primer procesamiento de imagen

Esta métrica determina el tiempo que transcurre desde que un usuario navega a una página hasta que ocurre cualquier cambio visual.

Esta métrica es útil, ya que el primer procesamiento de imagen les indica a los usuarios que la página comenzó a cargarse.

  • Se inicia cuando el usuario navega a una página.

  • Se detiene cuando ocurre cualquier cambio visual, como un cambio de color del fondo o la carga de un encabezado.

Primer procesamiento de imagen con contenido

Esta métrica determina el tiempo que transcurre desde que un usuario navega a una página hasta que se muestra contenido significativo, como una imagen o texto.

Esta métrica es útil para obtener estadísticas sobre qué tan pronto los usuarios ven cualquier contenido real de tu app, en lugar de solo un encabezado o un color de fondo nuevo.

  • Se inicia cuando el usuario navega a una página.

  • Se detiene inmediatamente después de que el navegador procesa el primer contenido del DOM, como texto, imágenes (incluidas las de fondo), lienzos no blancos o SVG.

domInteractive

Esta métrica determina el tiempo que transcurre desde que un usuario navega a una página hasta que este considere que la página es interactiva.

Esta métrica es útil para obtener estadísticas sobre qué tan pronto los usuarios pueden interactuar con los elementos de tu app, como los botones y los hipervínculos, en lugar de solo verlos en la pantalla. Ten en cuenta que esto no significa que el navegador responde a la interacción (para esta métrica, consulta el seguimiento del retraso de primera entrada).

  • Se inicia cuando el usuario navega a una página.

  • Se detiene inmediatamente antes de que el usuario-agente configure la disposición del documento HTML actual como “interactiva”.

domContentLoadedEventEnd

Esta métrica determina el tiempo que transcurre desde que un usuario navega a una página hasta que se completa la carga y el análisis del documento HTML inicial.

  • Se inicia cuando el usuario navega a una página.

  • Se detiene inmediatamente después de que se completan la carga y el análisis del documento HTML inicial (DOMContentLoaded). Sin embargo, no indica que finalizó la carga de las hojas de estilo, las imágenes y los marcos secundarios.

loadEventEnd

Esta métrica determina el tiempo que transcurre desde que el usuario navega a una página hasta que se completa el evento de carga del documento actual.

Esta métrica es útil para obtener estadísticas sobre cuánto tarda en cargar todo tu contenido, incluidas las hojas de estilo y las imágenes.

  • Se inicia 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.

Retraso de primera entrada

Esta métrica determina el tiempo desde que el usuario interactúa con una página hasta que el navegador puede responder a esa entrada.

Esta métrica es útil, ya que cuando el navegador responde a la interacción de los usuarios, les da las primeras impresiones sobre la capacidad de respuesta de tu app.

  • Se inicia cuando el usuario interactúa por primera vez con un elemento de la página, como cuando hace clic en un botón o un hipervínculo.

  • Se detiene inmediatamente después de que el navegador puede responder a la interacción, lo que significa que ya no está ocupado cargando ni analizando tu contenido.

Ten en cuenta que, para determinar la métrica del retraso de primera entrada, debes agregar la biblioteca de polyfills de la misma. Consulta la documentación de la biblioteca a fin de revisar las instrucciones de instalación.

Supervisa los seguimientos automáticos de la carga de página en la consola

  1. En Firebase console, dirígete al Panel de rendimiento.

  2. Haz clic en la pestaña En el dispositivo y, a continuación, podrás hacer lo siguiente:

    • Ver un informe rápido de los datos recopilados de todos los seguimientos de la carga de página (y de cualquier seguimiento personalizado que hayas agregado)

    • Hacer clic en un seguimiento específico para revisar sus datos con más detalle

    • Usar el botón Filtro add de la esquina superior izquierda del panel para filtrar de forma básica los datos por atributo

  3. Si haces clic en un seguimiento específico, se mostrará en la consola una descripción general de los datos recopilados en las tarjetas de las métricas.

    • Con las opciones de la esquina superior derecha del panel, podrás ver datos agregados o en el tiempo.

    • Con el botón Filtro add de la esquina superior izquierda del panel, podrás filtrar de forma básica los datos por atributo.

  4. En cualquier métrica, haz clic en Ver más para obtener información más detallada sobre los datos recopilados y usar funciones de análisis más completas. Por ejemplo, puedes filtrar y segmentar los datos por atributo.