Primeros pasos con Performance Monitoring para la Web

Antes de comenzar

Si aún no lo has hecho, visita Agrega Firebase a tu proyecto de JavaScript para obtener información sobre lo siguiente:

  • Crea un proyecto de Firebase.

  • Registra tu app web con Firebase.

Ten en cuenta que, cuando agregas Firebase a tu app, es posible que completes algunos de los pasos que se describen más adelante en esta página (por ejemplo, agregar el SDK y también inicializar Firebase).

Paso 1: Agrega e inicializa Performance Monitoring

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

  2. Agrega el SDK de Performance Monitoring JS y, luego, inicializa Performance Monitoring:

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);

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: Agrega la biblioteca de polyfills del retraso de primera entrada

Para medir la métrica de retraso de primera entrada, debes agregar la biblioteca de polyfills de esa métrica. Consulta la documentación de la biblioteca para revisar las instrucciones de instalación.

No es obligatorio agregar la biblioteca de polyfills para que Performance Monitoring informe las otras métricas de la app web.

Paso 3: Genera eventos de rendimiento para obtener una visualización inicial de los datos

Firebase comienza a procesar los eventos cuando agregas correctamente el SDK a tu app. Si aún estás desarrollando de manera local, interactúa con la app a fin de generar eventos para la recopilación y el procesamiento iniciales de los datos.

  1. Entrega y visualiza tu app web en un entorno local.

  2. Genera eventos mediante la carga de páginas secundarias para el sitio, la interacción con la app o la activación de solicitudes de red. Asegúrate de mantener abierta la pestaña del navegador durante al menos 10 segundos después de cargar la página.

  3. Ve al panel Rendimiento de Firebase console. Deberías ver tus datos iniciales en pocos minutos.

    Si no ves los datos iniciales, revisa las sugerencias para solucionar problemas.

Paso 4: Revisa los mensajes de registro de los eventos de rendimiento (opcional)

  1. Abre las herramientas para desarrolladores de tu navegador (por ejemplo, la pestaña Red de las Herramientas para desarrolladores de Chrome o el Monitor de red de Firefox).

  2. Actualiza la app web en el navegador.

  3. Revisa si hay mensajes de error en los mensajes de registro.

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

Si tu app no registra eventos de rendimiento, revisa las sugerencias para solucionar problemas.

Paso 5: Agrega supervisión personalizada para código específico (opcional)

Para supervisar los datos de rendimiento asociados con una parte específica del código de tu app, puedes instrumentar el seguimiento de código personalizado.

Con un seguimiento de código personalizado, puedes medir cuánto tiempo tarda la app en completar una tarea o un conjunto de tareas en específico, como cargar un conjunto de imágenes o consultar la base de datos. La métrica predeterminada de un seguimiento de código personalizado es su duración, pero también puedes agregar métricas personalizadas, como aciertos de caché y advertencias de memoria.

En el código, tú defines el inicio y el final de un seguimiento de código personalizado (y agregas cualquier métrica personalizada que desees) con la API que proporciona el SDK de Performance Monitoring.

Consulta cómo agregar supervisión personalizada para código específico si necesitas más información sobre estas funciones y cómo agregarlas a tu app.

Paso 6: Implementa tu app y revisa los resultados

Después de validar Performance Monitoring, puedes implementar la versión actualizada de tu app a los usuarios.

Puedes supervisar los datos de rendimiento en el panel Rendimiento de Firebase console.

Próximos pasos