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 es 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 web de Firebase. Si ya sabes cómo usar la plataforma de Firebase y la CLI, y quieres obtener más información sobre Firebase Performance Monitoring, estás en el lugar indicado.

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: Es el código inicial en el que te basarás durante este codelab.
• ## performance-monitoring: El código completo para la app de ejemplo finalizada.

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

Importa la app de partida

Con el IDE, abre o importa el directorio HOWMANY performance-monitoring-start del repositorio clonado. Este directorio targetSdkVersion 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 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 la que se identifica tu proyecto (incluso en la CLI), mientras que FriendlyChat es solo un nombre visible.

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 Firebase Hosting también 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, ya que se tratarán en los pasos posteriores de este codelab.

Habilita el Acceso con Google para Firebase Authentication

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, ubica 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.

Habilita Cloud Firestore

La aplicación web usa Cloud Firestore para guardar 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 para este codelab incluye reglas más seguras. Las implementaremos más adelante en el codelab.

Habilita Cloud Storage

La aplicación web usa Cloud Storage para Firebase con el objetivo de almacenar, subir y compartir fotos.

Deberás habilitar Cloud Storage:

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

El código inicial 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 forma local y, también, implementar la app web en tu proyecto de Firebase.

1. Para instalar la CLI, sigue estas instrucciones en los documentos 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 app 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). Pero 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 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, 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 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 de la 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 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 en la parte inferior del archivo public/index.html, pero vuelve a verificar 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áginas y solicitudes de red cuando los usuarios usen tu sitio. Consulta la documentación para obtener más información sobre los seguimientos automáticos de la carga de página.

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

La opción Retraso de primera entrada es útil, ya que la respuesta del navegador a la interacción del usuario les brinda a los usuarios sus 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 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 tu contenido.

Esta biblioteca de polyfills 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 de tu código con Firebase Performance Monitoring.

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. Cómo agregar un seguimiento personalizado a tu app

Performance Monitoring te permite crear seguimientos personalizados. Un seguimiento personalizado es un informe sobre la duración de un bloque de ejecución en tu app. Tú defines el inicio y el fin de un seguimiento personalizado mediante 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 capturar un seguimiento personalizado, debes especificar el punto de partida y el punto de detención del seguimiento. Puedes considerar que un seguimiento es 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 de imagen. Esto te dará una idea de cuánto tardan los usuarios del mundo real 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 registrar 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 la imagen del seguimiento personalizado que definimos en el último paso.

1. Busca el seguimiento personalizado del paso anterior (definido en el 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 y el tamaño de la imagen subida.

8. Agrega un atributo personalizado a tu app

Sobre la base de los pasos anteriores, también puedes recopilar atributos personalizados en tus seguimientos personalizados. Los atributos personalizados pueden ayudar a segmentar 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.

1. Usa el seguimiento personalizado definido en el 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 subida.

9. [Extender] Cómo agregar un seguimiento personalizado con la API de User Timing

El SDK de Firebase Performance Monitoring se diseñó para que se cargue de forma asíncrona y no afecte negativamente el rendimiento de las apps web cuando se carga la página. La API de Firebase Performance Monitoring no estará disponible antes de que se cargue el SDK. En esta situación, aún podrás agregar seguimientos personalizados mediante la API de User Timing. El SDK de Firebase Performance recopilará las duraciones de measure() y las registrará como seguimientos personalizados.

Mediremos 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 indicar el final de la carga de las secuencias de comandos de estilo de la aplicación 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 hayas creado aquí. Más adelante, podrás encontrar un seguimiento personalizado llamado loadStyling en Firebase Performance console.

10. Implementa y comienza a enviar imágenes

Cómo realizar 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 tu app.
2. Ejecuta el siguiente comando para implementar los archivos en el 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.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 tu app web que ahora está completamente alojada en Firebase Hosting en dos de tus propios subdominios de Firebase: https://<projectId>.firebaseapp.com y https://<projectId>.web.app.

Verifica que la supervisión de rendimiento esté habilitada

Abre Firebase console y ve a la pestaña Rendimiento. Si ves un mensaje de bienvenida en el que se muestra “Se detectó el SDK”, significa que te integraste correctamente en Firebase Performance Monitoring.

Enviar mensaje de 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 para subir imágenes .
2. Selecciona un archivo de imagen con el selector de archivos.
3. Intenta enviar varias imágenes (algunas se almacenan en public/images/) para que puedas 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 la app web y enviar mensajes de imagen como un usuario, puedes revisar los datos de rendimiento en el panel de supervisión del 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.

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

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 a consultar más tarde si aún no ves ningún dato o pestaña.

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

• En la tabla Cargas de páginas, se muestran las distintas métricas de rendimiento que la supervisión de rendimiento recopila automáticamente mientras se carga la página.
• En la tabla Duraciones, 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 las métricas específicas del seguimiento.

3. Haz clic en Agregar 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 de este seguimiento personalizado.

4. Haz clic en En el tiempo, que se encuentra junto a Agregar 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. Se registraron estos datos específicos debido al atributo imageType que agregaste al 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 control de rendimiento.
2. Haz clic en la pestaña Red para ver una lista de entradas de solicitudes de red para tu app web.
3. Explóralos para identificar solicitudes lentas 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.
• Agregar seguimientos personalizados a tu código
• Se registran métricas personalizadas vinculadas al seguimiento personalizado.
• Segmentación de datos de rendimiento mediante atributos personalizados.
• Comprender cómo usar el panel de control de rendimiento para obtener estadísticas sobre el rendimiento de tu app

Más información:

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