Firebase Performance Monitoring para la Web

1. Descripción general

En este codelab, aprenderás a usar Firebase Performance Monitoring para medir el rendimiento de una app web de chat. Visita https://fireperf-friendlychat.web.app/ para ver una demostración en vivo.

Qué aprenderás

• Cómo agregar Firebase Performance Monitoring a tu app web para obtener métricas listas para usar (carga de páginas y solicitudes de red)
• Cómo medir un fragmento de código específico con seguimientos personalizados
• Cómo registrar métricas personalizadas adicionales vinculadas a un seguimiento personalizado
• Cómo segmentar aún más tus datos de rendimiento con atributos personalizados
• Cómo usar el panel de supervisión del rendimiento para comprender el rendimiento de tu app web

Requisitos

• El IDE o editor de texto que prefieras, como WebStorm, Atom, Sublime o VS Code
• Una terminal o consola
• El navegador que elijas, como Chrome
• El código de muestra del codelab (consulta la siguiente sección de este codelab para obtener el código)

2. Obtén el código de muestra

Clona el repositorio de GitHub del codelab desde la línea de comandos:

git clone https://github.com/firebase/codelab-friendlychat-web

Como alternativa, si no tienes git instalado, puedes descargar el repositorio como archivo ZIP.

Importa la app de partida

En tu IDE, abre o importa el directorio 📁 performance-monitoring-start del repositorio clonado. Este directorio 📁 performance-monitoring-start contiene el código inicial del codelab, que es una app web de chat.

3. Crea y configura un proyecto de Firebase

Crea un proyecto de Firebase

1. En Firebase console, haz clic en Agregar proyecto.
2. Asigna el nombre FriendlyChat a tu proyecto de Firebase.

Recuerda el ID de tu proyecto de Firebase.

3. Haz clic en Crear proyecto.

Actualiza tu plan de precios de Firebase

Para usar Cloud Storage para Firebase, tu proyecto de Firebase debe tener el plan de precios de pago por uso (Blaze), lo que significa que está vinculado a una cuenta de Facturación de Cloud.

• Una cuenta de Facturación de Cloud requiere una forma de pago, como una tarjeta de crédito.
• Si es la primera vez que usas Firebase y Google Cloud, verifica si cumples con los requisitos para obtener un crédito de USD 300 y una cuenta de Facturación de Cloud de prueba gratuita.
• Si realizas este codelab como parte de un evento, pregúntale al organizador si hay créditos de Cloud disponibles.

Para actualizar tu proyecto al plan Blaze, sigue estos pasos:

1. En Firebase console, selecciona la opción para actualizar tu plan.
2. Selecciona el plan Blaze. Sigue las instrucciones en pantalla para vincular una cuenta de Facturación de Cloud a tu proyecto.
   Si necesitas crear una cuenta de Facturación de Cloud como parte de esta actualización, es posible que debas volver al flujo de actualización en Firebase console para completarla.

Agrega una app web de Firebase al proyecto

1. Haz clic en el ícono de Web para crear una nueva app web de Firebase.
2. Registra la app con el sobrenombre Friendly Chat y, luego, marca la casilla junto a Configurar Firebase Hosting para esta app también.
3. Haz clic en Registrar app.
4. Haga clic para avanzar por los pasos restantes. No es necesario que sigas las instrucciones en pantalla ahora. Las veremos en los pasos posteriores de este codelab.

Habilita el Acceso con Google para la autenticación de Firebase

Para permitir que los usuarios accedan a la app de chat con sus Cuentas de Google, usaremos el método de acceso de Google.

Deberás habilitar el acceso con Google:

1. En Firebase console, busca la sección Desarrollo en el panel izquierdo.
2. Haz clic en Autenticación y, luego, en la pestaña Método de acceso ( ve a la consola).
3. Habilita el proveedor de acceso de Google y, luego, haz clic en Guardar.

Configura Cloud Firestore

La app web usa Cloud Firestore para guardar mensajes de chat y recibir mensajes nuevos.

Sigue estos pasos para configurar Cloud Firestore en tu proyecto de Firebase:

1. En el panel izquierdo de Firebase console, expande Compilación y, luego, selecciona Base de datos de Firestore.
2. Haz clic en Crear base de datos.
3. Deja el ID de la base de datos establecido en (default).
4. Selecciona una ubicación para tu base de datos y, luego, haz clic en Siguiente.
   Para una app real, debes elegir una ubicación que esté cerca de tus usuarios.
5. Haz clic en Iniciar en modo de prueba. Lee la renuncia de responsabilidad sobre las reglas de seguridad.
   Más adelante en este codelab, agregarás reglas de seguridad para proteger tus datos. No distribuyas ni expongas una app públicamente sin agregar reglas de seguridad para tu base de datos.
6. Haz clic en Crear.

Configura Cloud Storage para Firebase

La app web usa Cloud Storage para Firebase para almacenar, subir y compartir fotos.

Sigue estos pasos para configurar Cloud Storage para Firebase en tu proyecto de Firebase:

1. En el panel izquierdo de Firebase console, expande Compilación y, luego, selecciona Almacenamiento.
2. Haz clic en Comenzar.
3. Selecciona una ubicación para tu bucket de Storage predeterminado.
   Los buckets de US-WEST1, US-CENTRAL1 y US-EAST1 pueden aprovechar el nivel “Siempre gratis” de Google Cloud Storage. Los buckets de todas las demás ubicaciones siguen los precios y el uso de Google Cloud Storage.
4. Haz clic en Iniciar en modo de prueba. Lee la renuncia de responsabilidad sobre las reglas de seguridad.
   Más adelante en este codelab, agregarás reglas de seguridad para proteger tus datos. No distribuyas ni expongas una app públicamente sin agregar reglas de seguridad para tu bucket de almacenamiento.
5. Haz clic en Crear.

4. Instala la interfaz de línea de comandos de Firebase

La interfaz de línea de comandos (CLI) de Firebase te permite usar Firebase Hosting para entregar tu app web de forma local y, también, implementarla en tu proyecto de Firebase.

1. Para instalar la CLI, sigue estas instrucciones en la documentación de Firebase.
2. Ejecuta el siguiente comando en una terminal para verificar que la CLI se haya instalado de forma correcta:

firebase --version

Asegúrate de que tu versión de Firebase CLI sea la 8.0.0 o una posterior.

3. Ejecuta el siguiente comando para autorizar Firebase CLI:

firebase login

Configuramos la plantilla de aplicación web para extraer la configuración de tu app para Firebase Hosting desde el directorio local de tu app (el repositorio que clonaste antes en el codelab). Sin embargo, para extraer la configuración, debemos asociar tu app con tu proyecto de Firebase.

4. Asegúrate de que la línea de comandos acceda al directorio performance-monitoring-start local de la app.
5. Ejecuta el siguiente comando para asociar tu app con el proyecto de Firebase:

firebase use --add

6. Cuando se te solicite, selecciona el ID de tu proyecto y, luego, asígnale un alias.

Un alias es útil si tienes varios entornos (producción, etapa de pruebas, etcétera). Sin embargo, en este codelab, solo usaremos el alias de default.

7. Sigue las instrucciones restantes en la línea de comandos.

5. Cómo realizar la integración con Firebase Performance Monitoring

Existen varias formas de realizar la integración con el SDK de Firebase Performance Monitoring para la Web (consulta la documentación para obtener más información). En este codelab, habilitaremos la supervisión del rendimiento desde las URLs de hosting.

Agrega la supervisión del rendimiento y, luego, inicializa Firebase

1. Abre el archivo src/index.js y, luego, agrega la siguiente línea debajo de TODO para incluir el SDK de Firebase Performance Monitoring.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';

2. También debemos inicializar el SDK de Firebase con un objeto de configuración que contenga información sobre el proyecto de Firebase y la app web que queremos usar. Como usamos Firebase Hosting, puedes importar una secuencia de comandos especial que realizará esta configuración por ti. Para este codelab, ya agregamos la siguiente línea al final del archivo public/index.html, pero asegúrate de que esté allí.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>

3. En el archivo src/index.js, agrega la siguiente línea debajo de TODO para inicializar la supervisión de rendimiento.

index.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

Performance Monitoring ahora recopilará automáticamente las métricas de carga de página y solicitud de red cuando los usuarios usen tu sitio. Consulta la documentación para obtener más información sobre los seguimientos de carga de página automática.

Agrega la biblioteca de polyfills del retraso de primera entrada

El retraso de primera entrada 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.

El retraso de primera entrada comienza 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.

Esta biblioteca de polyfills es opcional para la integración de la supervisión de rendimiento.

Abre el archivo public/index.html y, luego, quita el comentario de la siguiente línea.

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

En este punto, ya terminaste la integración con Firebase Performance Monitoring en tu código.

En los siguientes pasos, aprenderás a agregar seguimientos personalizados con Firebase Performance Monitoring. Si solo quieres recopilar los registros automáticos, ve a la sección "Implementa y comienza a enviar imágenes".

6. Agrega un registro personalizado a tu app

Performance Monitoring te permite crear seguimientos personalizados. Un seguimiento personalizado es un informe de la duración de un bloque de ejecución en tu app. Tú defines el inicio y el final de un seguimiento personalizado con las APIs que proporciona el SDK.

1. En el archivo src/index.js, obtén un objeto de rendimiento y, luego, crea un registro personalizado para subir un mensaje de imagen.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");

2. Para grabar un seguimiento personalizado, debes especificar el punto de inicio y el punto de detención del seguimiento. Puedes considerar un seguimiento como un temporizador.

index.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

Definiste correctamente un seguimiento personalizado. Después de implementar el código, se registrará la duración del seguimiento personalizado si un usuario envía un mensaje con imagen. Esto te dará una idea de cuánto tiempo tardan los usuarios reales en enviar imágenes en tu app de chat.

7. Agrega una métrica personalizada a tu app.

Además, puedes configurar un seguimiento personalizado para que registre métricas personalizadas de los eventos relacionados con el rendimiento que ocurren dentro de su alcance. Por ejemplo, puedes usar una métrica para investigar si el tiempo de carga se ve afectado por el tamaño de una imagen para el seguimiento personalizado que definimos en el último paso.

1. Busca el registro personalizado del paso anterior (definido en tu archivo src/index.js).
2. Agrega la siguiente línea debajo de TODO para registrar el tamaño de la imagen subida.

index.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

Esta métrica permite que la supervisión del rendimiento registre la duración del registro personalizado, así como el tamaño de la imagen subida.

8. Agrega un atributo personalizado a tu app

En función de los pasos anteriores, también puedes recopilar atributos personalizados en tus seguimientos personalizados. Los atributos personalizados pueden ayudarte a segmentar los datos por categorías específicas de tu app. Por ejemplo, puedes recopilar el tipo de MIME del archivo de imagen para investigar cómo este puede afectar el rendimiento.

1. Usa el seguimiento personalizado definido en tu archivo src/index.js.
2. Agrega la siguiente línea debajo de TODO para registrar el tipo MIME de la imagen subida.

index.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

Este atributo permite que la supervisión del rendimiento categorice la duración del seguimiento personalizado según el tipo de imagen que se subió.

9. [Extensión] Agrega un seguimiento personalizado con la API de User Timing

El SDK de Firebase Performance Monitoring se diseñó para que se pudiera cargar de forma asíncrona y no afectara negativamente el rendimiento de las apps web durante la carga de la página. Antes de que se cargue el SDK, la API de Firebase Performance Monitoring no está disponible. En este caso, puedes agregar seguimientos personalizados con la API de User Timing. El SDK de rendimiento de Firebase detectará las duraciones de measure() y las registrará como seguimientos personalizados.

Vamos a medir la duración de la carga de secuencias de comandos de diseño de apps con la API de User Timing.

1. En el archivo public/index.html, agrega la siguiente línea para marcar el inicio de la carga de las secuencias de comandos de diseño de la app.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>

2. Agrega las siguientes líneas para marcar el final de la carga de las secuencias de comandos de diseño de la app y medir la duración entre el inicio y el final.

index.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

Firebase Performance Monitoring recopilará automáticamente la entrada que creaste aquí. Más adelante, podrás encontrar un seguimiento personalizado llamado loadStyling en la consola de Firebase Performance.

10. Implementa y comienza a enviar imágenes

Realiza la implementación en Firebase Hosting

Después de agregar Firebase Performance Monitoring a tu código, sigue estos pasos para implementarlo en Firebase Hosting:

1. Asegúrate de que la línea de comandos acceda al directorio performance-monitoring-start local de la app.
2. Ejecuta el siguiente comando para implementar tus archivos en tu proyecto de Firebase:

firebase deploy

3. La consola debería mostrar lo siguiente:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.firebasestorage.app
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

4. Visita tu app web que ahora se aloja por completo con Firebase Hosting en dos de tus propios subdominios de Firebase: https://<projectId>.firebaseapp.com y https://<projectId>.web.app.

Verifica que la supervisión del rendimiento esté habilitada

Abre Firebase console y ve a la pestaña Rendimiento. Si ves un mensaje de bienvenida que indica “Se detectó el SDK”, significa que realizaste la integración correctamente con Firebase Performance Monitoring.

Cómo enviar un mensaje con imagen

Envía imágenes en tu app de chat para generar algunos datos de rendimiento.

1. Después de acceder a tu app de chat, haz clic en el botón de carga de imágenes .
2. Selecciona un archivo de imagen con el selector de archivos.
3. Intenta enviar varias imágenes (algunos ejemplos se almacenan en public/images/) para probar la distribución de las métricas y los atributos personalizados.

Los mensajes nuevos deberían mostrarse en la IU de la app junto con las imágenes que seleccionaste.

11. Supervisa el panel

Después de implementar tu app web y enviar mensajes de imagen como usuario, puedes revisar los datos de rendimiento en el panel de supervisión de rendimiento (en Firebase console).

Cómo acceder a tu panel

1. En Firebase console, selecciona el proyecto que tiene tu app de Friendly Chat.
2. En el panel izquierdo, busca la sección Calidad y haz clic en Rendimiento.

Revisa los datos en el dispositivo

Después de que la supervisión del rendimiento procese los datos de tu app, verás pestañas en la parte superior del panel. Si aún no ves datos ni pestañas, vuelve a consultar más tarde.

1. Haz clic en la pestaña En el dispositivo.

• En la tabla Cargas de página, se muestran las diferentes métricas de rendimiento que la supervisión del rendimiento recopila automáticamente mientras se carga tu página.
• En la tabla Duración, se muestran los seguimientos personalizados que definiste en el código de tu app.

2. Haz clic en saveImageMessage en la tabla Durations para revisar métricas específicas del seguimiento.

3. Haz clic en Agregado para revisar la distribución de los tamaños de imagen. Puedes ver la métrica que agregaste para medir el tamaño de la imagen de este seguimiento personalizado.

4. Haz clic en A lo largo del tiempo, que se encuentra junto a Agrupar en el paso anterior. También puedes ver la duración del seguimiento personalizado. Haz clic en Ver más para revisar los datos recopilados con más detalle.

5. En la página que se abre, puedes segmentar los datos de duración por tipo de MIME de imagen haciendo clic en imageType. Estos datos específicos se registraron debido al atributo imageType que agregaste a tu seguimiento personalizado.

Revisa los datos de red

Una solicitud de red HTTP/S es un informe que captura el tiempo de respuesta y el tamaño de la carga útil de las llamadas de red.

1. Regresa a la pantalla principal del panel de supervisión del rendimiento.
2. Haz clic en la pestaña Network para ver una lista de las entradas de solicitud de red de tu app web.
3. Explora las solicitudes lentas para identificarlas y comienza a trabajar en una solución para mejorar el rendimiento de tu app.

12. ¡Felicitaciones!

Habilitaste el SDK de Firebase para la supervisión del rendimiento y recopilaste seguimientos automáticos y personalizados para medir el rendimiento real de tu app de chat.

Temas abordados:

• Agrega el SDK de Firebase Performance Monitoring a tu app web.
• Agrega seguimientos personalizados a tu código.
• Graba métricas personalizadas vinculadas al seguimiento personalizado.
• Segmentar los datos de rendimiento con atributos personalizados
• Comprender cómo usar el panel de supervisión del rendimiento para obtener estadísticas sobre el rendimiento de tu app

Más información:

• firebase.google.com
• firebase.google.com/docs/perf-mon/get-started-web
• web.dev/fast/