Ir a la consola

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 la app a tu proyecto de Firebase, también puedes completar algunos pasos de la guía siguiente (por ejemplo, agregar los SDK de Firebase y, luego, inicializar Firebase).

Paso 1: Agrega Performance Monitoring y, luego, inicializa Firebase

Si aún no lo has hecho, agrega el SDK de Performance Monitoring y, luego, inicializa Firebase en tu app con una de las siguientes opciones. Ten en cuenta lo siguiente a fin de decidir entre estas opciones (consulta cada pestaña para obtener información más detallada):

  • Desde la CDN (SDK independiente): Si Performance Monitoring es el único producto de Firebase que usas en tu app, con esta opción se carga un solo SDK más liviano desde la CDN.

  • Desde la CDN (SDK estándar): Si usas otros productos de Firebase en tu app, con esta opción se carga el SDK de Performance Monitoring junto con otras bibliotecas de Firebase desde la CDN.

  • Desde las URL de Hosting: Si usas Firebase Hosting, esta opción es conveniente para administrar la configuración cuando inicializas Firebase.

  • Con agrupadores de módulos: Si usas un agrupador (como Browserify o webpack), usa esta opción para importar módulos individuales cuando los necesites.

Después de agregar el SDK, Firebase comienza a supervisar de inmediato los seguimientos automáticos y las solicitudes de red HTTP/S.

Desde la CDN

Puedes configurar una importación parcial del SDK de Firebase JavaScript y cargar solo las bibliotecas de Firebase que necesitas. Firebase almacena cada biblioteca del SDK de Firebase JavaScript en nuestra CDN (red de distribución de contenidos) global.

Para incluir el SDK de Performance Monitoring desde la CDN, tienes estas dos opciones:

  • SDK independiente: Performance Monitoring es el único producto de Firebase que usas en tu app.
  • SDK estándar: Usas Performance Monitoring junto con otros productos de Firebase en tu app.

SDK independiente

Si Performance Monitoring es el único producto de Firebase en tu app, usa el SDK independiente de Performance Monitoring (y la secuencia de comandos del encabezado recomendada que se indica más abajo) si te interesa realizar alguna de las siguientes acciones:

  • reducir el tamaño del paquete de tu SDK
  • retrasar la inicialización del SDK hasta que tu página cargue

Para incluir el SDK independiente de Performance Monitoring en tu app y retrasar su inicialización hasta que la página cargue, sigue estos pasos:

  1. Agrega la siguiente secuencia de comandos al encabezado de tu archivo de índice.
  2. Asegúrate de agregar el objeto de configuración de proyectos de Firebase a tu app.
(function(sa,fbc){function load(f,c){var a=document.createElement('script');
a.async=1;a.src=f;var s=document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(a,s);}load(sa);window.onload = function() {firebase.initializeApp(fbc).performance();};
})(performance_standalone, firebaseConfig);

En este:

La secuencia de comandos anterior carga el SDK independiente de forma asíncrona y, luego, inicializa Firebase después de que se activa el evento onload de la ventana. Con esta estrategia, se reduce el impacto que el SDK podría tener en las métricas de carga de la página, ya que el navegador ya informó sus métricas de carga cuando inicializas el SDK.

SDK estándar

Si usas otros productos de Firebase (como Authentication o Cloud Firestore en tu app, incluye el SDK estándar de Performance Monitoring.

Ten en cuenta que este SDK requiere que incluyas el SDK estándar principal de Firebase y que inicialices Firebase y Performance Monitoring en una secuencia de comandos distinta.

  1. Para incluir el SDK estándar de Performance Monitoring, agrega las siguientes secuencias de comandos al final de tu etiqueta <body>, pero primero debes usar cualquier servicio de Firebase:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-performance.js"></script>
    <body>
    
  2. Inicializa Firebase y Performance Monitoring en tu app de la siguiente manera:

    <body>
    <!-- Previously loaded Firebase SDKs -->
    
    <script>
      // TODO: Replace the following with your app's Firebase project configuration
      var firebaseConfig = {
        // ...
      };
    
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    
      // Initialize Performance Monitoring and get a reference to the service
      var perf = firebase.performance();
    </script>
    </body>
    

Desde las URL de Hosting

Cuando usas Firebase Hosting, puedes configurar tu app para cargar las bibliotecas del SDK de Firebase JavaScript de manera dinámica desde las URL reservadas. Obtén más información sobre cómo agregar los SDK mediante las URL de Hosting reservadas.

Con esta opción de configuración, después de que realices la implementación en Firebase, la app extrae automáticamente el objeto de configuración de Firebase del proyecto de Firebase en el que realizaste la implementación. Puedes implementar la misma base de código en varios proyectos de Firebase, pero no tienes que realizar un seguimiento de la configuración de Firebase que utilizas para firebase.initializeApp().

  1. Para incluir el SDK de Performance Monitoring, agrega las siguientes secuencias de comandos al final de tu etiqueta <body> antes de usar cualquier servicio de Firebase:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/6.2.4/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/6.2.4/firebase-performance.js"></script>
    </body>
    
  2. Inicializa Firebase y Performance Monitoring en tu app (no es necesario que incluyas el objeto de configuración de Firebase cuando usas las URL de Hosting reservadas) de la siguiente manera:

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    
      <!-- Initialize Performance Monitoring and get a reference to the service -->
      <script>
        var perf = firebase.performance();
        // ...
      </script>
    </body>
    

Con agrupadores de módulos

Puedes configurar la importación parcial del SDK de Firebase JavaScript y cargar solo los productos de Firebase que necesitas. Si utilizas un agrupador (como Browserify o webpack), puedes usar import para importar productos individuales de Firebase cuando los necesites.

  1. Instala el paquete npm de firebase y guárdalo en tu archivo package.json. Para ello, ejecuta el siguiente comando:

    npm install --save firebase
  2. Para incluir el SDK de Performance Monitoring, import los módulos de Firebase de la siguiente manera:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import * as firebase from "firebase/app";
    
    // Add the Performance Monitoring library
    import "firebase/performance";
    
  3. Inicializa Firebase y Performance Monitoring en tu app de la siguiente manera:

    // TODO: Replace the following with your app's Firebase project configuration
    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 primer retraso de entrada

Para obtener la métrica del primer retraso de entrada, debes agregar la biblioteca de polyfills de esa métrica. Consulta la documentación de la biblioteca a fin de revisar las instrucciones de instalación.

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

Paso 3: Verifica que Performance Monitoring esté registrando datos

  1. Actualiza tu app web en el navegador.

  2. Después de unos segundos, busca una llamada de red a firebaselogging.googleapis.com en la pestaña Red de las Herramientas para desarrolladores de Chrome o en el Monitor de red de Firefox.

    La presencia de esta llamada de red indica que el navegador está enviando datos de rendimiento a Firebase.

  3. Comprueba que los resultados de Performance Monitoring aparezcan en Firebase console.

    Por lo general, los resultados aparecen en un plazo de 12 horas.

Paso 4: Agrega métricas y seguimientos personalizados (opcional)

Un seguimiento personalizado es un informe de los datos de rendimiento asociados con parte del código de la app. Para obtener más información sobre los seguimientos personalizados, consulta la descripción general de Performance Monitoring.

Puedes configurar varios seguimientos personalizados en la app y es posible ejecutar más de uno al mismo tiempo. Cada seguimiento personalizado puede tener una o más métricas para contar eventos relacionados con el rendimiento en la app. Estas métricas están asociadas con los seguimientos que las crean.

Ten en cuenta que los nombres de las métricas y de los seguimientos personalizados deben cumplir con los siguientes requisitos: no tener espacios en blanco al inicio ni al final, no comenzar con guion bajo (_) y no exceder los 32 caracteres.

  1. Para iniciar o detener un seguimiento personalizado, une el código que quieres seguir con líneas de código similares a la siguiente:

    const trace = perf.trace('customTraceName');
    trace.start();
    
    // code that you want to trace
    
    trace.stop();
    
  2. Para agregar una métrica personalizada, agrega líneas de código similares a la siguiente cada vez que ocurra el evento. Por ejemplo, esta métrica personalizada cuenta los eventos relacionados con el rendimiento que ocurren en tu app.

    async function getInventory(inventoryIds) {
      const trace = perf.trace('inventoryRetrieval');
    
      // Tracks the number of IDs fetched (the metric could help you to optimize in the future)
      trace.incrementMetric('numberOfIds', inventoryIds.length);
    
      // Measures the time it takes to request inventory based on the amount of inventory
      trace.start();
      const inventoryData = await retrieveInventory(inventoryIds);
      trace.stop();
    
      return inventoryData;
    }
    

Paso 5: Implementa tu app y revisa los resultados

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

Puedes supervisar los datos de rendimiento en Firebase console.

Pasos siguientes