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/codelab-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.
firebase --version
Make sure that your version of the Firebase CLI is v8.0.0 or later.
firebase login
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.
performance-monitoring-start
directory.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 default
.
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.html
file, then add the following line below the TODO
to include the Firebase Performance Monitoring SDK.<!-- TODO: Import the Firebase Performance Monitoring library here. -->
<script src="/__/firebase/7.14.2/firebase-performance.js"></script>
public/index.html
file, but double-check that it is there.<script src="/__/firebase/init.js"></script>
public/scripts/main.js
file, add the following line below the TODO
to 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.
Open the public/index.html
file, then uncomment the following line.
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>
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.js
file, 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.
public/scripts/main.js
file).TODO
to 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.
public/scripts/main.js
file.TODO
to 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.html
file, add the following line to mark the start of the app styling scripts load.<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
<!-- 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>
The entry you have created here will be automatically collected by Firebase Performance Monitoring. You will be able to find a custom trace called loadStyling
in the Firebase Performance console later.
After adding Firebase Performance Monitoring to your code, follow these steps to deploy your code to Firebase Hosting:
performance-monitoring-start
directory.firebase deploy
=== 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://<projectId>.firebaseapp.com
and https://<projectId>.web.app
. Open Firebase console and go to the Performance tab. If you see a welcome message showing "SDK detected", then you have successfully integrated with Firebase Performance Monitoring!
Generate some performance data by sending images in your chat app.
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).
Friendly Chat
app.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!