En aquest tema, aprendrem com analitzar les dades de rendiment recollides per Firebase Performance Monitoring. Aquestes dades ens permeten identificar i solucionar problemes de rendiment a les nostres aplicacions.
Objectius
- Entendre com accedir a les dades de rendiment.
- Aprendre a interpretar les mètriques de rendiment.
- Identificar i solucionar problemes comuns de rendiment.
Accés a les dades de rendiment
Pas 1: Accedir a la consola de Firebase
- Inicia sessió a la consola de Firebase.
- Selecciona el teu projecte.
Pas 2: Navegar a Performance Monitoring
- Al menú de navegació de l'esquerra, selecciona Performance.
- Aquí trobaràs una visió general de les dades de rendiment recollides.
Interpretació de les mètriques de rendiment
Mètriques clau
Firebase Performance Monitoring recull diverses mètriques clau que ens ajuden a entendre el rendiment de la nostra aplicació:
- Temps de càrrega de l'aplicació: El temps que triga l'aplicació a carregar-se completament.
- Temps de resposta de la xarxa: El temps que triga una sol·licitud de xarxa a completar-se.
- Temps de renderització de pantalla: El temps que triga una pantalla a renderitzar-se completament.
- Errors de xarxa: El nombre d'errors de xarxa que es produeixen.
Taula de mètriques
| Mètrica | Descripció | Importància |
|---|---|---|
| Temps de càrrega de l'aplicació | Temps total des de l'inici fins que l'aplicació està llesta per a l'usuari | Un temps de càrrega llarg pot frustrar els usuaris i fer-los abandonar l'aplicació. |
| Temps de resposta de la xarxa | Temps que triga una sol·licitud de xarxa a completar-se | Un temps de resposta llarg pot indicar problemes amb el servidor o la xarxa. |
| Temps de renderització de pantalla | Temps que triga una pantalla a renderitzar-se completament | Un temps de renderització llarg pot afectar la percepció de rendiment de l'usuari. |
| Errors de xarxa | Nombre d'errors de xarxa que es produeixen | Un nombre elevat d'errors pot indicar problemes de connectivitat o configuració. |
Identificació i solució de problemes comuns
Problema 1: Temps de càrrega de l'aplicació llarg
- Possible causa: Recursos grans o moltes sol·licituds de xarxa durant la càrrega inicial.
- Solució: Optimitza els recursos carregats inicialment i redueix el nombre de sol·licituds de xarxa.
Problema 2: Temps de resposta de la xarxa llarg
- Possible causa: Problemes amb el servidor o la xarxa.
- Solució: Revisa la configuració del servidor i assegura't que la xarxa és estable.
Problema 3: Temps de renderització de pantalla llarg
- Possible causa: Càrrega de dades o recursos grans durant la renderització.
- Solució: Optimitza la càrrega de dades i recursos, i utilitza tècniques de renderització eficients.
Problema 4: Errors de xarxa elevats
- Possible causa: Problemes de connectivitat o configuració incorrecta.
- Solució: Revisa la configuració de la xarxa i assegura't que els endpoints són accessibles.
Exemple pràctic
Exemple de codi: Monitorització del temps de resposta de la xarxa
// Importa Firebase Performance Monitoring
import { getPerformance } from "firebase/performance";
// Obté una instància de Performance Monitoring
const performance = getPerformance();
// Inicia un traç de xarxa
const trace = performance.trace('network_request');
// Marca l'inici del traç
trace.start();
// Realitza una sol·licitud de xarxa
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
// Marca el final del traç
trace.stop();
console.log('Dades rebudes:', data);
})
.catch(error => {
// Marca el final del traç en cas d'error
trace.stop();
console.error('Error en la sol·licitud de xarxa:', error);
});Explicació del codi
- Importació de Firebase Performance Monitoring: Importem el mòdul de Performance Monitoring de Firebase.
- Obtenció d'una instància de Performance Monitoring: Obtenim una instància de Performance Monitoring per a l'aplicació.
- Inici d'un traç de xarxa: Iniciem un traç per monitoritzar una sol·licitud de xarxa.
- Realització de la sol·licitud de xarxa: Realitzem una sol·licitud de xarxa a un endpoint específic.
- Finalització del traç: Marquem el final del traç quan la sol·licitud es completa o falla.
Exercici pràctic
Exercici: Monitoritzar el temps de càrrega de l'aplicació
Objectiu: Implementar la monitorització del temps de càrrega de l'aplicació utilitzant Firebase Performance Monitoring.
Instruccions:
- Configura Firebase Performance Monitoring al teu projecte.
- Implementa un traç per monitoritzar el temps de càrrega de l'aplicació.
- Analitza les dades recollides a la consola de Firebase.
Solució:
// Importa Firebase Performance Monitoring
import { getPerformance } from "firebase/performance";
// Obté una instància de Performance Monitoring
const performance = getPerformance();
// Inicia un traç de càrrega de l'aplicació
const trace = performance.trace('app_load');
// Marca l'inici del traç
trace.start();
// Simula la càrrega de l'aplicació
window.addEventListener('load', () => {
// Marca el final del traç quan l'aplicació està llesta
trace.stop();
console.log('Aplicació carregada completament');
});Explicació de la solució
- Importació de Firebase Performance Monitoring: Importem el mòdul de Performance Monitoring de Firebase.
- Obtenció d'una instància de Performance Monitoring: Obtenim una instància de Performance Monitoring per a l'aplicació.
- Inici d'un traç de càrrega de l'aplicació: Iniciem un traç per monitoritzar el temps de càrrega de l'aplicació.
- Finalització del traç: Marquem el final del traç quan l'aplicació està completament carregada.
Resum
En aquest tema, hem après com accedir i analitzar les dades de rendiment recollides per Firebase Performance Monitoring. Hem explorat les mètriques clau, com interpretar-les i com identificar i solucionar problemes comuns de rendiment. També hem vist exemples pràctics de com implementar la monitorització del rendiment a les nostres aplicacions.
Amb aquests coneixements, estem preparats per optimitzar el rendiment de les nostres aplicacions i oferir una millor experiència als usuaris.
Curs de Firebase
Mòdul 1: Introducció a Firebase
Mòdul 2: Autenticació de Firebase
- Introducció a l'autenticació de Firebase
- Autenticació amb correu electrònic i contrasenya
- Autenticació amb xarxes socials
- Gestió d'usuaris
Mòdul 3: Base de dades en temps real de Firebase
- Introducció a la base de dades en temps real
- Lectura i escriptura de dades
- Estructura de dades i regles de seguretat
- Capacitats fora de línia
Mòdul 4: Cloud Firestore
- Introducció a Cloud Firestore
- Model de dades de Firestore
- Operacions CRUD
- Consultes avançades
- Regles de seguretat
Mòdul 5: Emmagatzematge de Firebase
- Introducció a l'emmagatzematge de Firebase
- Carregar fitxers
- Descarregar fitxers
- Metadades de fitxers i seguretat
Mòdul 6: Missatgeria en el núvol de Firebase
- Introducció a la missatgeria en el núvol
- Enviar notificacions
- Gestionar notificacions
- Funcions avançades de missatgeria
Mòdul 7: Analítica de Firebase
Mòdul 8: Funcions de Firebase
Mòdul 9: Monitoratge del rendiment de Firebase
- Introducció al monitoratge del rendiment
- Configuració del monitoratge del rendiment
- Analitzar dades de rendiment