In this codelab, you'll learn how to use Firebase Performance Monitoring to measure the performance of a chat web app. Visit https://fireperf-friendlychat.web.app/ to see a live demo.
Clone the codelab's GitHub repository from the command line:
git clone https://github.com/firebase/friendlychat-web
Alternatively, if you do not have git installed, you can download the repo as a zip file.
Using your IDE, open or import the 📁
performance-monitoring-start directory from the cloned repository. This 📁
performance-monitoring-start directory contains the starting code for the codelab, which is a chat web app.
Friendly Chat, and then check the box next to Also set up Firebase Hosting for this app.
To allow users to sign in to the chat app with their Google accounts, we'll use the Google sign-in method.
You'll need to enable Google sign-in:
The web app uses Cloud Firestore to save chat messages and receive new chat messages.
You'll need to enable Cloud Firestore:
The starter code for this codelab includes more secure rules. We'll deploy them later in the codelab.
The web app uses Cloud Storage for Firebase to store, upload, and share pictures.
You'll need to enable Cloud Storage:
The starting code includes a basic security rule, which we'll deploy later in the codelab.
The Firebase command-line interface (CLI) allows you to use Firebase Hosting to serve your web app locally as well as to deploy your web app to your Firebase project.
npm -g install firebase-tools
Make sure that your version of the Firebase CLI is v4.1.0 or later.
We've set up the web app template to pull your app's configuration for Firebase Hosting from your app's local directory (the repository that you cloned earlier in the codelab). But to pull the configuration, we need to associate your app with your Firebase project.
firebase use --add
An alias is useful if you have multiple environments (production, staging, etc). However, for this codelab, let's just use the alias of
There are various ways to integrate with the Firebase Performance Monitoring SDK for web (refer to the documentation for details). In this codelab, we'll enable performance monitoring from Hosting URLs.
public/index.htmlfile, then add the following line below the
TODOto include the Firebase Performance Monitoring SDK.
<!-- TODO: Import the Firebase Performance Monitoring library here. --> <script src="/__/firebase/6.4.0/firebase-performance.js"></script>
public/index.htmlfile, but double-check that it is there.
public/scripts/main.jsfile, add the following line below the
TODOto initialize performance monitoring.
// TODO: Initialize Firebase Performance Monitoring. firebase.performance();
Performance Monitoring will now automatically collect page load and network request metrics for you when users use your site! Refer to the documentation to learn more about automatic page load traces.
First input delay is useful since the browser responding to a user interaction gives users their first impressions about the responsiveness of your app.
First input delay starts when the user first interacts with an element on the page, like clicking a button or hyperlink. It stops immediately after the browser is able to respond to the input, meaning that the browser isn't busy loading or parsing your content.
This polyfill library is optional for performance monitoring integration.
public/index.html file, then uncomment the following line.
At this point, you've finished the integration with Firebase Performance Monitoring in your code!
In the following steps, you learn about adding custom traces using Firebase Performance Monitoring. If you only want to collect the automatic traces, go to the "Deploy and start sending images" section.
Performance Monitoring allows you to create custom traces. A custom trace is a report for the duration of an execution block in your app. You define the start and end of a custom trace using the APIs provided by the SDK.
public/scripts/main.jsfile, get a performance object, then create a custom trace for uploading an image message.
// TODO: Create a custom trace to monitor image upload. const trace = firebase.performance().trace('saveImageMessage');
// TODO: Start the "timer" for the custom trace. trace.start(); ... // TODO: Stop the "timer" for the custom trace. trace.stop();
You have successfully defined a custom trace! After deploying your code, the duration of the custom trace will be recorded if a user sends an image message. This will give you an idea of how long it takes real-world users to send images in your chat app.
You can further configure a custom trace to record custom metrics for performance-related events that occur within its scope. For example, you can use a metric to investigate if the upload time is affected by the size of an image for the custom trace we defined in the last step.
TODOto record the size of the uploaded image.
... // TODO: Record image size. trace.putMetric('imageSize', file.size); ...
This metric enables performance monitoring to record the custom trace duration as well as the uploaded image size.
Building on the previous steps, you can also collect custom attributes on your custom traces. Custom attributes can help in segmenting data by categories specific to your app. For example, you can collect the image file's MIME type to investigate how the MIME type might affect the performance.
TODOto record the MIME type of the uploaded image.
... // TODO: Record image MIME type. trace.putAttribute('imageType', file.type); ...
This attribute enables performance monitoring to categorize the custom trace duration based on uploaded image type.
The Firebase Performance Monitoring SDK was designed so it could be loaded asynchronously, and so it wouldn't negatively impact the performance of web apps during page load. Before the SDK is loaded, the Firebase Performance Monitoring API is not available. In this scenario, you are still able to add custom traces by using the User Timing API. Firebase performance SDK will pick up the durations from measure() and log them as custom traces.
We are going to measure the duration of loading app styling scripts using User Timing API.
public/index.htmlfile, add the following line to mark the start of the app styling scripts load.
The entry you have created here will be automatically collected by Firebase Performance Monitoring. You will be able to find a custom trace called
After adding Firebase Performance Monitoring to your code, follow these steps to deploy your code to Firebase Hosting:
=== 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
https://firebaselogging.googleapis.com/, which is the endpoint for receiving performance events. Find the request highlighted in the following screenshot.
public/images/) so that you can test the distribution of custom metrics and custom attributes.
New messages should display in the app's UI along with your selected images.
After deploying your web app and sending image messages as a user, you can review performance data in the performance monitoring dashboard (in the Firebase console).
After performance monitoring has processed your app's data, you'll see tabs along the top of the dashboard. Make sure to check back later if you don't see any data or tabs yet.
An HTTP/S network request is a report that captures the response time and payload size of network calls.
You have enabled the Firebase SDK for performance monitoring and collected automatic traces and custom traces to measure the real-world performance of your chat app!