Comience con la supervisión del rendimiento para la web

Antes de que empieces

Si aún no lo has hecho, visita Agregar Firebase a tu proyecto de JavaScript para aprender cómo:

  • Crear un proyecto de Firebase

  • Registre su aplicación web con Firebase

Tenga en cuenta que cuando agrega Firebase a su aplicación, puede completar algunos de los pasos que se describen más adelante en esta página (por ejemplo, agregar el SDK e inicializar Firebase).

Paso 1 : agregar e inicializar la supervisión del rendimiento

  1. Si aún no lo has hecho, instala el SDK de Firebase JS e inicializa Firebase .

  2. Agregue el SDK JS de Performance Monitoring e inicialice Performance Monitoring:

API modular web

import { initializeApp } from "firebase/app";
import { getPerformance } from "firebase/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = getPerformance(app);

API con espacio de nombres web

import firebase from "firebase/compat/app";
import "firebase/compat/performance";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Performance Monitoring and get a reference to the service
const perf = firebase.performance();

Paso 2 : agregue la primera biblioteca de relleno de retardo de entrada

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.

No es necesario agregar esta biblioteca polyfill para que Performance Monitoring informe las otras métricas de la aplicación web.

Paso 3 : generar eventos de rendimiento para la visualización de datos iniciales

Firebase comienza a procesar los eventos cuando agrega correctamente el SDK a su aplicación. Si todavía estás desarrollando localmente, interactúa con tu aplicación para generar eventos para la recopilación y el procesamiento de datos iniciales.

  1. Sirve y visualiza tu aplicación web en un entorno local.

  2. Genere eventos cargando subpáginas para su sitio, interactuando con su aplicación y/o activando solicitudes de red. Asegúrese de mantener abierta la pestaña del navegador durante al menos 10 segundos después de que se cargue la página.

  3. Vaya al panel de rendimiento de Firebase console. Deberías ver tus datos iniciales en unos minutos.

    Si no ve una visualización de sus datos iniciales, revise los consejos para la solución de problemas .

Paso 4 : (Opcional) Ver mensajes de registro para eventos de rendimiento

  1. Abra las herramientas de desarrollo de su navegador (por ejemplo, la pestaña Red para Chrome Dev Tools o en Network Monitor para Firefox ).

  2. Actualiza tu aplicación web en el navegador.

  3. Revise sus mensajes de registro para ver si hay mensajes de error.

  4. Después de unos segundos, busca una llamada de red a firebaselogging.googleapis.com en las herramientas de desarrollo de tu navegador. La presencia de esa llamada de red muestra que el navegador está enviando datos de rendimiento a Firebase.

Si su aplicación no registra eventos de rendimiento, revise las sugerencias para la solución de problemas .

Paso 5 : (Opcional) Agregue monitoreo personalizado para código específico

Para monitorear los datos de rendimiento asociados con un código específico en su aplicación, puede instrumentar seguimientos de código personalizados .

Con un seguimiento de código personalizado, puede medir cuánto tiempo le toma a su aplicación completar una tarea específica o un conjunto de tareas, como cargar un conjunto de imágenes o consultar su base de datos. La métrica predeterminada para un seguimiento de código personalizado es su duración, pero también puede agregar métricas personalizadas, como aciertos de caché y advertencias de memoria.

En su código, usted define el principio y el final de un seguimiento de código personalizado (y agrega las métricas personalizadas que desee) utilizando la API proporcionada por el SDK de Performance Monitoring.

Visite Agregar monitoreo para obtener código específico y obtener más información sobre estas funciones y cómo agregarlas a su aplicación.

Paso 6 : implemente su aplicación y luego revise los resultados

Una vez que haya validado la supervisión del rendimiento, puede implementar la versión actualizada de su aplicación para sus usuarios.

Puede monitorear los datos de rendimiento en el panel de rendimiento de Firebase console.

Próximos pasos