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 creando una app de chat, primero sigue el codelab web de Firebase. 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ágina 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 un archivo ZIP.

El repositorio 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: 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

Con tu IDE, abre o importa el directorio Resultado performance-monitoring-start desde el 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 al proyecto de Firebase.

Recuerda el ID del 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.

Agregar 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 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, localiza la sección Desarrollar en el panel izquierdo.
2. Haz clic en Authentication y, luego, en la pestaña Sign-in method ( ir a la consola).
3. Habilita el proveedor de acceso de Google y, luego, haz clic en Guardar.

Habilitar Cloud Firestore

La aplicación web usa Cloud Firestore para guardar los mensajes de chat y recibir mensajes nuevos.

Deberás habilitar Cloud Firestore:

1. En la sección Desarrollar de Firebase console, haz clic en Base de datos.
2. Haz clic en Crear base de datos en el panel de Cloud Firestore.
3. Selecciona la opción Comenzar en modo de prueba y, luego, haz clic en Habilitar después de leer la renuncia de responsabilidad sobre las reglas de seguridad.

El código de partida de este codelab incluye reglas más seguras. Los implementaremos más adelante en el codelab.

Habilita Cloud Storage

La aplicación web usa Cloud Storage para Firebase para almacenar, subir y compartir imágenes.

Deberás habilitar Cloud Storage:

1. En la sección Desarrollar de Firebase console, haz clic en Almacenamiento.
2. Haz clic en Comenzar.
3. Lee la renuncia de responsabilidad sobre las reglas de seguridad para tu proyecto de Firebase y, luego, haz clic en Entendido.

El código de partida incluye una regla de seguridad básica, que implementaremos más adelante en el codelab.

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 manera 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 extraer 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 local performance-monitoring-start de tu 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 del proyecto y asígnale un alias a tu proyecto de Firebase.

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 tu 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 de rendimiento y, luego, inicializa Firebase

1. Abre el archivo src/index.js y agrega la siguiente línea debajo del 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 sobre el 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. En este codelab, ya agregamos la siguiente línea al final del archivo public/index.html, pero verificamos dos veces 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 del 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 automáticos de carga de página.

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 una 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 polyfill es opcional para la integración de la supervisión del 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 existen 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 registrar un seguimiento personalizado, debes especificar el punto de partida y el punto de detención. Los registros se pueden considerar 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 del mundo real en enviar imágenes en tu app de chat.

7. Agregar una métrica personalizada a tu aplicación

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. Localiza el seguimiento 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

A partir de los pasos anteriores, también puedes recopilar atributos personalizados en tus seguimientos personalizados. Los atributos personalizados pueden ayudar 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 podría afectar el rendimiento el tipo de MIME.

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 de MIME de la imagen subida.

index.js

 ...

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

 ...

Este atributo habilita la supervisión del rendimiento para categorizar la duración del seguimiento personalizado según el tipo de imagen subida.

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. La API de Firebase Performance Monitoring no está disponible antes de que se cargue el SDK. En este caso, aún puedes agregar seguimientos personalizados con la API de User Timing. El SDK de rendimiento de Firebase recopilará las duraciones de measure() y las registrará como seguimientos personalizados.

Mediremos la duración de la carga de las secuencias de comandos de diseño de la app 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í. Podrás encontrar un seguimiento personalizado llamado loadStyling en Firebase Performance Console más adelante.

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 local performance-monitoring-start de tu app.
2. Implementa los archivos en tu proyecto de Firebase. Para ello, ejecuta el siguiente comando:

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.appspot.com
✔  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 muestra “SDK detected”, significa que realizaste la integración correctamente con Firebase Performance Monitoring.

Enviar mensaje de imagen

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

1. Después de acceder a la 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 (algunas muestras se almacenan en public/images/) para probar la distribución de las métricas personalizadas y los atributos personalizados.

Los mensajes nuevos deberían aparecer en la IU de la app junto con las imágenes seleccionadas.

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 control de rendimiento (en Firebase console).

Nota: Los datos de rendimiento suelen aparecer en un plazo de 12 horas. Asegúrate de volver a revisar 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

Una vez que la supervisión del rendimiento haya procesado los datos de tu app, verás pestañas en la parte superior del panel. Asegúrate de volver más tarde si aún no ves ningún dato ni pestaña.

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 Aggregate para revisar la distribución de los tamaños de las imágenes. Puedes ver la métrica que agregaste para medir el tamaño de la imagen para este seguimiento personalizado.

4. Haz clic en En el tiempo, junto a Total 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. Para ello, haz 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 Red para ver una lista de entradas de solicitud de red de tu aplicación web.
3. Explóralos para identificar las solicitudes lentas y comenzar a trabajar en una solución para mejorar el rendimiento de tu app.

12. ¡Felicitaciones!

Habilitaste el SDK de Firebase para supervisar el rendimiento y recopilaste registros 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
• Agregar seguimientos personalizados a tu código
• Registrar 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/