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.

Este codelab está diseñado como una secuela del codelab web de Firebase, en el que aprenderás a compilar una app de chat con el SDK web de Firebase. Si quieres aprender a usar la plataforma de Firebase en la Web mediante la compilación de una app de chat, primero sigue el codelab de Firebase Web. Si ya sabes cómo usar la plataforma de Firebase y la CLI, y quieres obtener información sobre Firebase Performance Monitoring, estás en el lugar correcto.

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/consola
• Un navegador de tu elección, como Chrome
• El código de muestra del codelab (consulta la siguiente sección de este codelab para descubrir cómo 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.

El repositorio de friendlychat-web contiene proyectos de muestra para varias plataformas.

En este codelab, solo se usan estos dos repositorios:

• ⁕ performance-monitoring-start: El código inicial que usarás como base durante este codelab
• 📁 performance-monitoring: Incluye el código completo de la app de ejemplo finalizada.

Nota: Si quieres ejecutar la app finalizada, deberás crear un proyecto de Firebase en Firebase console.

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 de inicio para el 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.

Importante: Tu proyecto de Firebase se llamará FriendlyChat,, pero Firebase le asignará automáticamente un ID de proyecto único con el formato friendlychat-1234. Este identificador único es la forma en que se identifica realmente tu proyecto (incluido en la CLI), mientras que FriendlyChat es simplemente un nombre visible.

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 estás realizando este codelab como parte de un evento, pregúntale a tu 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 necesitabas 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.

Nota: Puedes cambiar tu proyecto al plan de precios sin costo (Spark) después de completar este codelab.

Agrega una app web de Firebase al proyecto

1. Haz clic en el ícono web para crear una nueva aplicación web de Firebase.
2. Registra la app con el sobrenombre Friendly Chat y, luego, marca la casilla junto a Configurar también Firebase Hosting para esta app.
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 de forma pública 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.

A continuación, te mostramos cómo 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 Comenzar 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 8.0.0 o posterior.

3. Ejecuta el siguiente comando para autorizar Firebase CLI:

firebase login

Configuramos la plantilla de la aplicación web para que extraiga la configuración de Firebase Hosting de tu app desde el directorio local de la 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 la 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, para este codelab, solo usaremos el alias de default.

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

5. Integración en 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 detalles). En este codelab, habilitaremos la supervisión del rendimiento desde 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 necesitamos inicializar el SDK de Firebase con un objeto de configuración que contenga información acerca del proyecto de Firebase y la aplicación web que queremos usar. Dado que estamos usando 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();

Ahora Performance Monitoring recopilará automáticamente las métricas de carga de página y solicitud de red por ti 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.

Cómo agregar la biblioteca de polyfills del retraso de primera entrada

El retraso de primera entrada es útil, ya que el navegador que responde a la interacción del usuario le brinda sus primeras impresiones sobre la capacidad de respuesta de la app.

El retraso de primera entrada comienza cuando el usuario interactúa por primera vez con un elemento de la página, como hacer clic en un botón o un hipervínculo. Se detiene inmediatamente después de que el navegador puede responder a la entrada, lo que significa que ya no está ocupado cargando ni analizando el contenido.

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

Abre el archivo public/index.html y 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, terminaste la integración con Firebase Performance Monitoring en tu código.

También hay otras formas de realizar la integración con el SDK de Firebase Performance Monitoring para la Web. Para obtener más información, consulta Primeros pasos con Performance Monitoring para la Web.

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

6. Agrega un seguimiento 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 seguimiento 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, si un usuario envía un mensaje de imagen, se registrará la duración del seguimiento personalizado. 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 ocurran 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 seguimiento 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 registro personalizado definido en tu archivo src/index.js.
2. Agrega la siguiente línea debajo de TODO para registrar el tipo de 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. [Extiende] 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 app y medir la duración entre el inicio y la finalización.

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 implementaciones 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 local performance-monitoring-start de tu 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 la app web que ahora está completamente alojada 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 a 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).

Nota: Los datos de rendimiento suelen aparecer en un plazo de 12 horas. Asegúrate de volver a consultar más tarde si no ves ningún resultado en Firebase console.

Accede al 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 distintas métricas de rendimiento que recopila automáticamente la supervisión de rendimiento mientras se carga la página.
• En la tabla Duraciones, se muestran los seguimientos personalizados que definiste en el código de la app.

2. Haz clic en saveImageMessage en la tabla Duraciones para revisar las 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 en 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:

• Agregar 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.
• Segmentación de los datos de rendimiento mediante 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/