Firebase Performance Monitoring

Firebase Performance Monitoring measures how fast your app loads, how long network requests take, and how quickly your custom code runs. It shows you where users experience slowness so you can fix the right things rather than optimizing blindly.

What Performance Monitoring Tracks

Think of Performance Monitoring as a stopwatch that runs automatically throughout your app. It measures:

• Page load time — how long until the page is interactive
• Network request duration — how long API and Firestore calls take
• Custom traces — specific operations you define and time yourself
• First contentful paint — when the first content appears on screen
• Time to first byte — how long before the server starts responding

Setting Up Performance Monitoring

import { initializeApp } from "firebase/app";
import { getPerformance } from "firebase/performance";

const app = initializeApp(firebaseConfig);
export const perf = getPerformance(app);

After initialization, Firebase automatically starts collecting page load metrics and monitors all fetch and XMLHttpRequest network calls. No additional code is required for automatic tracking.

Custom Traces

A custom trace measures how long a specific block of code takes to run. Use it to time operations that matter to your users — loading a user's dashboard data, generating a report, or processing a form submission.

import { trace } from "firebase/performance";
import { perf } from "./firebase";

async function loadDashboard(userId) {
  // Start the timer
  const dashboardTrace = trace(perf, "load_dashboard");
  dashboardTrace.start();

  try {
    // Load all dashboard data
    const userData = await getUserData(userId);
    const recentPosts = await getRecentPosts(userId);
    const notifications = await getNotifications(userId);

    renderDashboard(userData, recentPosts, notifications);
  } finally {
    // Stop the timer — always stop even if an error occurs
    dashboardTrace.stop();
  }
}

Custom Trace Attributes

Add attributes to traces to break down performance by context:

const reportTrace = trace(perf, "generate_report");
reportTrace.putAttribute("report_type", "monthly_sales");
reportTrace.putAttribute("row_count", "500");
reportTrace.start();

await generateReport();

reportTrace.stop();

In the console, you can filter the generate_report trace by report_type to see whether monthly reports take longer than weekly ones.

Custom Trace Metrics

Record custom numeric metrics within a trace:

const uploadTrace = trace(perf, "batch_upload");
uploadTrace.start();

let filesUploaded = 0;
for (const file of files) {
  await uploadFile(file);
  filesUploaded++;
}

// Record how many files were uploaded in this trace
uploadTrace.putMetric("files_uploaded", filesUploaded);
uploadTrace.stop();

Network Request Monitoring

Firebase automatically monitors network requests made through the browser's Fetch API and XMLHttpRequest. Each request appears in the Performance console with its URL, response code, response size, and duration. You can filter requests by URL pattern to see performance trends for specific endpoints.

To monitor a custom network request manually:

import { getPerformance, trace } from "firebase/performance";

const perf = getPerformance(app);
const networkTrace = trace(perf, "custom_api_call");
networkTrace.start();

const response = await fetch("https://api.example.com/data");
const data = await response.json();

networkTrace.putAttribute("status", response.status.toString());
networkTrace.stop();

Viewing Performance Data

Go to Performance in the Firebase Console. The dashboard shows:

• App start time — how long until your app is ready
• Network requests — average duration per URL
• Custom traces — your named traces with durations over time
• Performance percentiles — p50, p90, p95 response times

Percentile data is more useful than averages. A p95 duration of 5 seconds means 5% of users wait 5 seconds or more — even if the average is 500ms, that 5% represents real users having a bad experience.

Performance Alerts

Set threshold alerts for key metrics: go to Performance > Alerts and configure thresholds. Firebase emails you when a trace's duration exceeds your defined threshold — for example, when page load time rises above 3 seconds.

Key Takeaway

Firebase Performance Monitoring automatically tracks page loads and network requests without configuration. Use custom traces with trace.start() and trace.stop() to measure specific operations. Add attributes to traces to filter performance by context. Monitor p90 and p95 percentiles rather than just averages to understand the worst-case experience your users encounter. Set threshold alerts so slow performance notifies you before users start complaining.