Google se compromete a impulsar la igualdad racial para las comunidades afrodescendientes. Obtén información al respecto.

Firebase Performance Monitoring para web

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

3b1284f5144b54f6.png

Lo que aprenderás

  • Cómo agregar Firebase Performance Monitoring a su aplicación 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 sus datos de rendimiento con atributos personalizados.
  • Cómo utilizar el panel de control de rendimiento para comprender el rendimiento de su aplicación web.

Lo que necesitarás

  • El IDE o editor de texto de su elección, como WebStorm , Atom , Sublime o VS Code
  • Una terminal / consola
  • Un navegador de su elección, como Chrome
  • El código de muestra del laboratorio de código (consulte la siguiente sección de este laboratorio de código para saber cómo obtener el código).

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

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

Alternativamente, si no tiene git instalado, puede descargar el repositorio como un archivo zip .

Importar la aplicación de inicio

Con su IDE, abra o importe el directorio start performance-monitoring-start desde el repositorio clonado. Este directorio 📁 performance-monitoring-start contiene el código de inicio para el laboratorio de código, que es una aplicación web de chat.

Crea un proyecto de Firebase

  1. En Firebase console , haz clic en Agregar proyecto .
  2. Nombre su proyecto de Firebase FriendlyChat .

Recuerde el ID del proyecto para su proyecto de Firebase.

  1. Haga clic en Crear proyecto .

Agrega una aplicación web de Firebase al proyecto

  1. Haga clic en el icono web 58d6543a156e56f9.png para crear una nueva aplicación web de Firebase.
  2. Registre la aplicación con el sobrenombre de Friendly Chat y luego marque la casilla junto a Configurar también Firebase Hosting para esta aplicación .
  3. Haga clic en Registrar aplicación .
  4. Haga clic en los pasos restantes. No es necesario que siga las instrucciones en pantalla ahora; estos serán cubiertos en pasos posteriores de este codelab.

ea9ab0db531a104c.png

Habilite el inicio de sesión de Google para la autenticación de Firebase

Para permitir que los usuarios inicien sesión en la aplicación de chat con sus cuentas de Google, usaremos el método de inicio de sesión de Google .

Deberá habilitar el inicio de sesión de Google :

  1. En Firebase console, ubique la sección Desarrollar en el panel izquierdo.
  2. Haga clic en Autenticación y luego en la pestaña Método de inicio de sesión ( vaya a la consola ).
  3. Habilite el proveedor de inicio de sesión de Google y luego haga clic en Guardar .

d89fb3873b5d36ae.png

Habilitar Cloud Firestore

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

Deberá 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. Seleccione la opción Iniciar en modo de prueba , luego haga clic en Habilitar después de leer el descargo de responsabilidad sobre las reglas de seguridad.

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

24bd1a097492eac6.png

Habilitar almacenamiento en la nube

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

Deberá habilitar Cloud Storage:

  1. En la sección Desarrollar de Firebase console, haz clic en Almacenamiento .
  2. Haga clic en Comenzar .
  3. Lea el descargo de responsabilidad sobre las reglas de seguridad para su proyecto de Firebase y luego haga clic en Entendido .

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

La interfaz de línea de comandos (CLI) de Firebase te permite usar Firebase Hosting para entregar tu aplicación web localmente, así como para implementar tu aplicación web en tu proyecto de Firebase.

  1. Instale la CLI siguiendo estas instrucciones en los documentos de Firebase.
  2. Verifique que la CLI se haya instalado correctamente ejecutando el siguiente comando en una terminal:
firebase --version

Asegúrese de que su versión de Firebase CLI sea v8.0.0 o posterior.

  1. Autorice Firebase CLI ejecutando el siguiente comando:
firebase login

Hemos configurado la plantilla de la aplicación web para extraer la configuración de su aplicación para Firebase Hosting del directorio local de su aplicación (el repositorio que clonó anteriormente en el laboratorio de código). Pero para extraer la configuración, necesitamos asociar su aplicación con su proyecto de Firebase.

  1. Asegúrese de que su línea de comandos esté accediendo al directorio de performance-monitoring-start local de su aplicación.
  2. Asocie su aplicación con su proyecto de Firebase ejecutando el siguiente comando:
firebase use --add
  1. Cuando se le solicite, seleccione el ID de su proyecto y luego asigne un alias a su proyecto de Firebase.

Un alias es útil si tiene varios entornos (producción, preparación, etc.). Sin embargo, para este laboratorio de código, usemos el alias default .

  1. Siga las instrucciones restantes en su línea de comando.

Hay varias formas de integrarse con el SDK de Firebase Performance Monitoring para web (consulte la documentación para obtener más detalles). En este laboratorio de código, habilitaremos la supervisión del rendimiento desde las URL de alojamiento .

Agrega monitoreo de rendimiento e inicializa Firebase

  1. Abra el archivo public/index.html , luego agregue la siguiente línea debajo de TODO para incluir el SDK de Firebase Performance Monitoring.

index.html

<!-- TODO: Import the Firebase Performance Monitoring library here. -->
<script src="/__/firebase/7.14.2/firebase-performance.js"></script>
  1. También necesitamos inicializar el SDK de Firebase con un objeto de configuración que contiene información sobre el proyecto de Firebase y la aplicación web que queremos usar. Como usamos Firebase Hosting, puede importar un script especial que hará esta configuración por usted. Para este laboratorio de código, ya hemos agregado la siguiente línea al final del archivo public/index.html , pero verifique que esté allí.

index.html

<script src="/__/firebase/init.js"></script>
  1. En el archivo public/scripts/main.js , agregue la siguiente línea debajo de TODO para inicializar la supervisión del rendimiento.

main.js

// TODO: Initialize Firebase Performance Monitoring.
firebase.performance();

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

Agregue la primera biblioteca polyfill de retardo de entrada

El retraso de la primera entrada es útil ya que el navegador que responde a la interacción del usuario les brinda a los usuarios sus primeras impresiones sobre la capacidad de respuesta de su aplicación.

La primera demora de 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 hipervínculo. Se detiene inmediatamente después de que el navegador puede responder a la entrada, lo que significa que el navegador no está ocupado cargando o analizando su contenido.

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

Abra el archivo public/index.html , luego descomente 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, ¡ha terminado la integración con Firebase Performance Monitoring en su código!

En los siguientes pasos, aprenderá a agregar seguimientos personalizados con Firebase Performance Monitoring. Si solo desea recopilar los seguimientos automáticos, vaya a la sección "Implementar y comenzar a enviar imágenes".

Performance Monitoring le permite crear seguimientos personalizados . Un seguimiento personalizado es un informe de la duración de un bloque de ejecución en su aplicación. Usted define el inicio y el final de un seguimiento personalizado utilizando las API proporcionadas por el SDK.

  1. En el archivo public/scripts/main.js , obtenga un objeto de rendimiento y luego cree un seguimiento personalizado para cargar un mensaje de imagen.

main.js

// TODO: Create a custom trace to monitor image upload.
const trace = firebase.performance().trace('saveImageMessage');
  1. Para registrar una traza personalizada, debe especificar el punto de inicio y el punto de parada para la traza. Puedes pensar en un rastro como un temporizador.

main.js

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

 ...

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

¡Ha definido con éxito un seguimiento personalizado! Después de implementar su código, la duración del seguimiento personalizado se registrará si un usuario envía un mensaje de imagen. Esto le dará una idea de cuánto tiempo les toma a los usuarios del mundo real enviar imágenes en su aplicación de chat.

Además, puede configurar un seguimiento personalizado para registrar métricas personalizadas para eventos relacionados con el rendimiento que ocurren dentro de su alcance. Por ejemplo, puede 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. Busque el seguimiento personalizado del paso anterior (definido en su archivo public/scripts/main.js ).
  2. Agregue la siguiente línea debajo de TODO para registrar el tamaño de la imagen cargada.

main.js

 ...

// TODO: Record image size.
trace.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 cargada.

Sobre la base de los pasos anteriores, también puede recopilar atributos personalizados en sus seguimientos personalizados . Los atributos personalizados pueden ayudar a segmentar los datos por categorías específicas de su aplicación. Por ejemplo, puede recopilar el tipo MIME del archivo de imagen para investigar cómo el tipo MIME podría afectar el rendimiento.

  1. Utilice el seguimiento personalizado definido en su archivo public/scripts/main.js
  2. Agregue la siguiente línea debajo de TODO para registrar el tipo MIME de la imagen cargada.

main.js

 ...

// TODO: Record image MIME type.
trace.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 cargada.

El SDK de Firebase Performance Monitoring se diseñó para que pudiera cargarse de forma asincrónica y no afectar negativamente el rendimiento de las aplicaciones 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 escenario, aún puede agregar seguimientos personalizados mediante la API de sincronización del usuario . El SDK de rendimiento de Firebase tomará las duraciones de la medida () y las registrará como seguimientos personalizados.

Vamos a medir la duración de la carga de los scripts de estilo de la aplicación utilizando la API User Timing.

  1. En el archivo public/index.html , agregue la siguiente línea para marcar el inicio de la carga de los scripts de estilo de la aplicación.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
  1. Agregue las siguientes líneas para marcar el final de la carga de los scripts de estilo de la aplicación y para 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>

La entrada que ha creado aquí será recopilada automáticamente por Firebase Performance Monitoring. Podrás encontrar un seguimiento personalizado llamado loadStyling en Firebase Performance console más adelante.

Implementar en Firebase Hosting

Después de agregar Firebase Performance Monitoring a su código, siga estos pasos para implementar su código en Firebase Hosting:

  1. Asegúrese de que su línea de comandos esté accediendo al directorio de performance-monitoring-start local de su aplicación.
  2. Implementa tus archivos en tu proyecto de Firebase ejecutando el siguiente comando:
firebase deploy
  1. 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
  1. Visite su aplicación web que ahora está completamente alojada con Firebase Hosting en dos de sus propios subdominios de Firebase: https://<projectId>.firebaseapp.com y https://<projectId>.web.app .

Verifique que la supervisión del rendimiento esté habilitada

Abra la consola de Firebase y vaya a la pestaña Rendimiento . Si ve un mensaje de bienvenida que muestra "SDK detectado", significa que se ha integrado correctamente con Firebase Performance Monitoring.

ac917a089e9c89d1.png

Enviar mensaje de imagen

Genere algunos datos de rendimiento enviando imágenes en su aplicación de chat.

  1. Después de iniciar sesión en su aplicación de chat, haga clic en el botón de carga de imágenes 13734cb66773e5a3.png .
  2. Seleccione un archivo de imagen con el selector de archivos.
  3. Intente enviar varias imágenes (algunas muestras se almacenan en public/images/ ) para que pueda probar la distribución de métricas personalizadas y atributos personalizados.

Los mensajes nuevos deben aparecer en la interfaz de usuario de la aplicación junto con las imágenes seleccionadas.

Después de implementar su aplicación web y enviar mensajes de imagen como usuario, puede revisar los datos de rendimiento en el panel de control de rendimiento (en Firebase console).

Accede a tu panel

  1. En la consola de Firebase , seleccione el proyecto que tiene su aplicación Friendly Chat .
  2. En el panel izquierdo, busque la sección Calidad y haga clic en Rendimiento .

Revisar los datos del dispositivo

Una vez que la supervisión del rendimiento haya procesado los datos de su aplicación, verá pestañas en la parte superior del panel. Asegúrese de volver a consultar más tarde si aún no ve ningún dato o pestaña.

  1. Haga clic en la pestaña En dispositivo .
  • La tabla de cargas de la página muestra las diversas métricas de rendimiento que la supervisión del rendimiento recopila automáticamente mientras se carga la página.
  • La tabla Duraciones muestra cualquier seguimiento personalizado que haya definido en el código de su aplicación.
  1. Haga clic en saveImageMessage en la tabla Durations para revisar métricas específicas para el seguimiento.

e28758fd02d9ffac.png

  1. Haga clic en Agregar para revisar la distribución de tamaños de imagen. Puede ver la métrica que agregó para medir el tamaño de la imagen para este seguimiento personalizado.

c3cbcfc0c739a0a8.png

  1. Haga clic en Con el tiempo, que está junto a Agregar en el paso anterior. También puede ver la Duración del seguimiento personalizado. Haga clic en Ver más para revisar los datos recopilados con más detalle.

16983baa31e05732.png

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

8e5c9f32f42a1ca1.png

Revisar los datos de la 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. Vuelva a la pantalla principal del panel de control de rendimiento.
  2. Haga clic en la pestaña Red para ver una lista de entradas de solicitud de red para su aplicación web.
  3. Examínelos para identificar solicitudes lentas y comience a trabajar en una solución para mejorar el rendimiento de su aplicación.

1ab598284eea6581.png

Ha habilitado el SDK de Firebase para la supervisión del rendimiento y ha recopilado rastreos automáticos y rastreos personalizados para medir el rendimiento real de su aplicación de chat.

Qué hemos cubierto:

  • Agregar el SDK de Firebase Performance Monitoring a su aplicación web.
  • Agregar seguimientos personalizados a su código.
  • Registro de métricas personalizadas vinculadas al seguimiento personalizado.
  • Segmentación de datos de rendimiento mediante atributos personalizados.
  • Comprender cómo utilizar el panel de control de rendimiento para obtener información sobre el rendimiento de su aplicación.

Aprende más: