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 de duración automáticos y las solicitudes de red HTTP/S automáticas.

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 de 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.addEventListener('load',function(){firebase.initializeApp(fbc).performance()});
})(performance_standalone, firebaseConfig);

En este ejemplo:

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 la 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="https://www.gstatic.com/firebasejs/7.15.1/firebase-app.js"></script>
    
      <!-- Add the standard Performance Monitoring library -->
      <script src="https://www.gstatic.com/firebasejs/7.15.1/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 la 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/7.15.1/firebase-app.js"></script>
    
      <!-- Add the Performance Monitoring library -->
      <script src="/__/firebase/7.15.1/firebase-performance.js"></script>
    </body>
    
  2. Inicializa Firebase y Performance Monitoring en la 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 el archivo package.json. Para ello, ejecuta el siguiente comando:

    npm install --save firebase
  2. Para incluir el SDK de Performance Monitoring, usa import para importar 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 de 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 a fin de 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 puede detectar si agregaste correctamente el SDK a tu app cuando recibe información de eventos (como las interacciones de la app). Si todavía desarrollas de manera local, interactúa con la app para generar eventos a fin de detectar el SDK y realizar una recopilación y procesamiento iniciales de los datos.

  1. Entrega y visualiza tu aplicación 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 a la sección Rendimiento de Firebase console para ver si Firebase detectó el SDK.

    Si no ves el mensaje “SDK detectado”, revisa las sugerencias para solucionar problemas.

  4. Performance Monitoring procesa los datos de eventos de rendimiento antes de mostrarlos en el panel Rendimiento. Deberías ver los datos iniciales en un plazo de 24 horas después de ver el mensaje de detección del SDK.

    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)

Puedes crear seguimientos personalizados para supervisar los datos de rendimiento asociados con código específico de tu app.

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

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

Visita Agrega supervisión personalizada para código específico de tu app a fin de obtener más información sobre estas funciones y descubrir 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 para los usuarios.

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

Pasos siguientes