Firebase Performance Monitoring para web

1. Información general

En este laboratorio de código, aprenderá a usar Firebase Performance Monitoring para medir el rendimiento de una aplicación web de chat. Visita 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 Código VS
  • 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).

2. Obtén el código de muestra

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

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

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

Importar la aplicación de inicio

Utilizando su IDE, abrir o importar el 📁 performance-monitoring-start el directorio del repositorio clonado. Este 📁 performance-monitoring-start directorio contiene el código de partida para el laboratorio de programación, que es una aplicación de chat en la web.

3. Crea y configura un proyecto de Firebase

Crea un proyecto de Firebase

  1. En la consola de Firebase , haga clic en Agregar proyecto.
  2. El nombre de su proyecto 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. Registrar la aplicación con el apodo Friendly Chat , y luego seleccione la casilla junto configurar también Firebase Hosting para esta aplicación.
  3. Haga clic en Registro de aplicaciones.
  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 accedan a la aplicación de chat con sus cuentas de Google, vamos a utilizar el inicio de sesión en Google método.

Usted necesita habilitar Google de inicio de sesión:

  1. En la consola Firebase, localice la sección Revelado en el panel izquierdo.
  2. Haga clic en Autenticación, a continuación, haga clic en la pestaña Inicio de sesión método ( ir a la consola ).
  3. Habilitar el inicio de sesión en Google proveedor y, a continuación, haga clic en Guardar.

7f3040a646c2e502.png

Habilitar Cloud Firestore

La aplicación web utiliza la nube Firestore para guardar los mensajes de chat y recibir nuevos mensajes de chat.

Deberá habilitar Cloud Firestore:

  1. En la consola Firebase la sección Revelado, haga clic en Base de datos.
  2. Haga clic en Crear base de datos en el panel de la nube Firestore.
  3. Seleccione la opción de inicio en modo de prueba, a continuación, 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 consola Firebase la sección Revelado, haga clic en Almacenamiento.
  2. Haga clic en Comenzar.
  3. Lee el aviso sobre las reglas de seguridad para su proyecto Firebase y, a continuación, haga clic consiguió.

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

4. Instale 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 aplicación web localmente, así como para implementar tu aplicación web en tu proyecto de Firebase.

  1. Instalar la CLI siguiendo estas instrucciones en los documentos base de fuego.
  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 local de su aplicación performance-monitoring-start el directorio.
  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 programación, vamos a utilizar el alias de default .

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

5. Integrar con Firebase Performance Monitoring

Hay varias maneras de integrar con el rendimiento Firebase Monitoreo SDK para la web (se refieren a la documentación para más detalles). En este laboratorio de programación, vamos a permitir un rendimiento de seguimiento de URL de alojamiento.

Agrega monitoreo de rendimiento e inicializa Firebase

  1. Abrir el src/index.js archivo, a continuación, añadir la siguiente línea debajo del TODO incluir el SDK de Supervisión Firebase rendimiento.

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  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 programación, ya hemos añadido la siguiente línea para usted en la parte inferior de la public/index.html archivo, pero una doble comprobación de que está ahí.

index.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. En el src/index.js archivo, agregue la siguiente línea debajo del TODO para inicializar la supervisión del rendimiento.

index.js

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

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 rastros automáticos de carga de página.

Agregue la primera biblioteca polyfill de retardo de entrada

Retraso primera entrada es útil, ya que el navegador en respuesta a una interacción con el usuario proporciona a los usuarios sus primeras impresiones acerca de la capacidad de respuesta de la 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 public/index.html archivo, a continuación, habilitar la línea siguiente.

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".

6. Agregue un seguimiento personalizado a su aplicación

Supervisión del rendimiento le permite crear trazos 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 src/index.js archivo, obtener un objeto de rendimiento, a continuación, crear un seguimiento personalizado para cargar un mensaje de imagen.

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "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.

index.js

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

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.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.

7. Agregue una métrica personalizada a su aplicación.

Puede configurar, además, un seguimiento personalizado a métricas personalizadas de registro de eventos relacionados con el rendimiento que se producen 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. Localizar el seguimiento personalizado de la etapa anterior (que se define en su src/index.js archivo).
  2. Agregue la siguiente línea debajo del TODO para registrar el tamaño de la imagen cargada.

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 cargada.

8. Agrega un atributo personalizado a tu aplicación.

Sobre la base de los pasos anteriores, usted también puede recoger los atributos personalizados en sus trazos 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 src/index.js archivo.
  2. Agregue la siguiente línea debajo del TODO para registrar el tipo MIME de la imagen cargada.

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 cargada.

9. [Ampliar] Agregue un seguimiento personalizado con la API de sincronización del usuario

El SDK de Firebase Performance Monitoring se diseñó para que se pudiera cargar de forma asincrónica y, por lo tanto, no afectaría 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, que todavía son capaces de añadir trazas personalizados utilizando la API de tiempo de usuario . Firebase SDK rendimiento será recoger las duraciones de medida () y registrarlos como trazas 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 public/index.html archivo, agregue la siguiente línea para marcar el inicio de la carga de scripts de aplicación de estilo.

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. Usted será capaz de encontrar un rastro personalizada llamada loadStyling en el rendimiento de la consola Firebase más tarde.

10. Implemente y comience a enviar imágenes

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 local de su aplicación performance-monitoring-start el directorio.
  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. Visita su aplicación web que ahora está alojado totalmente usando Firebase que recibe en dos de sus propios subdominios base de fuego: https://<projectId>.firebaseapp.com y https://<projectId>.web.app .

Verifique que la supervisión del rendimiento esté habilitada

Abrir Firebase consola 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.

30df67e5a07d03b0.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.

11. Supervisar el tablero

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 la consola de Firebase).

Accede a tu panel

  1. En la consola de Firebase , seleccione el proyecto que tiene su Friendly Chat aplicación.
  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 dispositivo.
  • Se carga la página tabla muestra las diferentes métricas de rendimiento que los resultados del monitoreo automáticamente recoge mientras se carga la página.
  • La tabla indica duraciones cualquier rastro personalizados que ha definido en el código de la aplicación.
  1. Haga clic en la tabla saveImageMessage duraciones para revisar métricas específicas para la traza.

e28758fd02d9ffac.png

  1. Haga clic agregado a 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 tiempo en el que está al lado de agregado en el paso anterior. También puede ver la duración del seguimiento personalizado. Haga clic en Ver más para revisar los datos recogidos en más detalle.

16983baa31e05732.png

  1. En la página que se abre, puede segmentar los datos de duración de imagen de tipo MIME haciendo clic 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

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

  1. Vuelva a la pantalla principal del panel de control de rendimiento.
  2. Haga clic en la ficha Red para ver una lista de entradas de la 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.

26a2be152a77ffb9.png

12. ¡Felicitaciones!

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 en el mundo 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: