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.

What you'll learn

What you'll need

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.

Import the starter app

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.

Create a Firebase project

  1. In the Firebase console, click Add Project.
  2. Name your Firebase project FriendlyChat.

Remember the Project ID for your Firebase project.

  1. Click Create Project.

Add a Firebase Web App to the project

  1. Click the web icon to create a new Firebase Web App.
  2. Register the app with the nickname Friendly Chat, then check the box next to 'Also set up Firebase Hosting for this app'. Click Register app.
  3. Click through the remaining steps. You don't need to follow the instructions now; these will be covered in later steps of this codelab.

Enable Google sign-in for Firebase Auth

To allow users to sign into the chat app with their Google accounts, we'll use the Google sign-in method.

You'll need to enable Google sign-in:

  1. In the Firebase console, locate the Develop section in the left nav.
  2. Click Authentication, then click the Sign-in method tab (or click here to go directly there).
  3. Enable the Google Sign-in Provider, then click Save.

Enable Cloud Firestore

The web app uses Cloud Firestore to save chat messages and receive new chat messages.

You'll need to enable Cloud Firestore:

  1. In the Firebase console's Develop section, click Database.
  2. Click Create database in the Cloud Firestore pane.
  3. Select the Start in test mode option, then click Enable after reading the disclaimer about the security rules.

The starter code for our codelab includes more secure rules. We'll deploy them later in the codelab.

Enable Cloud Storage

The web app uses Cloud Storage for Firebase to store, upload, and share pictures.

You'll need to enable Cloud Storage:

  1. In the Firebase console's Develop section, click Storage.
  2. Click Get Started.
  3. Read the disclaimer about security rules for your Firebase project, then click Got it.

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.

  1. Install the CLI by running the following npm command:
npm -g install firebase-tools
  1. Verify that the CLI has been installed correctly by running the following command:
firebase --version

Make sure the version of the Firebase CLI is v4.1.0 or later.

  1. Authorize the Firebase CLI by running the following command:
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.

  1. Make sure that your command line is accessing your app's local performance-monitoring-start directory.
  1. Associate your app with your Firebase project by running the following command:
firebase use --add
  1. When prompted, select your Project ID, then give your Firebase project an alias.

An alias is useful if you have multiple environments (production, staging, etc). However, for this codelab, let's just use the alias of default.

  1. Follow the remaining instructions in your command line.

There are various ways to integrate with the Firebase Performance Monitoring Web SDK (refer to the documentation for details). In this codelab, we'll enable Performance Monitoring from Hosting URLs.

Add Performance Monitoring and initialize Firebase

  1. Open public/index.html, then add the following line below the TODO to include the Performance Monitoring SDK.

index.html

<!-- TODO: Import the Firebase Performance Monitoring library here. -->
<script src="/__/firebase/6.0.2/firebase-performance.js"></script>
  1. We also need to initialize the Firebase SDK with a configuration object which contains information about the Firebase project and web app we want to use. Since we're using Firebase Hosting, you can import a special script that will do this configuration for you. For this codelab, we've already added the following line for you at the bottom of the public/index.html file, but double check that it is there.

index.html

<script src="/__/firebase/init.js"></script>
  1. In public/scripts/main.js, add the following line below the TODO to initialize Performance Monitoring.

main.js

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

Add the first input delay polyfill library

First input delay is useful since the browser responding to a user interaction gives your 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 public/index.html, 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 Performance Monitoring in your code!

In the following steps, you will learn about adding custom traces using Firebase Performance Monitoring. If you only want to collect the automatic traces, jump to step 9 to deploy your app.

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 beginning and end of a custom trace using the APIs provided by the SDK.

  1. In public/scripts/main.js, get a Performance object, then create a custom trace for uploading an image message.

main.js

// TODO: Create a custom trace to monitor image upload.
const trace = firebase.performance().trace('saveImageMessage');
  1. To record a custom trace, you need to specify the starting point and stopping point for the trace. You can think of a trace as a "timer".

main.js

// 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 custom trace will be recorded if a user sends an image message. This will give you an idea of how long it takes for 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.

  1. Locate the custom trace from the previous step (defined in your public/scripts/main.js file).
  2. Add the following line below the TODO to record the size of the uploaded image.

main.js

 ...

// 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 MIME type might affect the performance.

  1. Use the custom trace defined in your public/scripts/main.js file.
  2. Add the following line below the TODO to record the MIME type of the uploaded image.

main.js

 ...

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

Firebase Performance SDK was designed to be able to be loaded asynchronously, so it won't negatively impact the performance of web app during page load. Before SDK is loaded, the Firebase Performance Monitoring defined api is not available. In this scenario, you are still able to add custom trace by using 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.

  1. In public/index.html, add the following line to mark the starting of app styling scripts load.

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
  1. Add the following lines to mark the ending of app styling scripts load, and measure the duration between start and end.

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>

The entry you have created here will be automatically collected by Firebase Performance Monitoring SDK. You will be able to find a custom trace called "loadStyling" on Firebase Performance console later.

Deploy to Firebase Hosting

After adding Firebase Performance Monitoring to your code, follow these steps to deploy your code to Firebase Hosting:

  1. Make sure that your command line is accessing your app's local performance-monitoring-start directory.
  2. Deploy your files to your Firebase project by running the following command:
firebase deploy
  1. The console should display the following:
=== 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. Visit your web app that's now fully hosted using Firebase Hosting at two of your very own Firebase subdomains: https://<projectId>.firebaseapp.com and https://<projectId>.web.app.

Verify Performance Monitoring is enabled

  1. Open your browser's DevTools, then open the Network tab (instructions for Chrome).
  2. Click Search (instructions for Chrome).
  3. Search for "https://firebaselogging.googleapis.com/" which is the endpoint for receiving performance events. Find the request highlighted in the following screenshot.

  1. Verify that the request was sent successfully (look for Status Code 200).

Send image message

  1. After signing-in to your chat app, click the image upload button .
  2. Select an image file using the file picker.
  3. Try sending multiple images (a few samples are stored in 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).

Access your dashboard

  1. In the Firebase console, select the project that has your Friendly Chat app.
  2. In the left nav, locate the Quality section, then click Performance.

Review On device data

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.

  1. Click the On device tab.
  1. Click "saveImageMessage" in the Durations table to review specific metrics for the trace.

  1. You can review the Aggregate distribution of image sizes, it will show the metric you added to measure the image size for this custom trace.

  1. Click Over time which is next to Aggregate in previous step. You can also check out the Duration of the custom trace. Click View more to review the collected data in more detail.

  1. In the page which opens, you can segment the duration data by image MIME type by clicking imageType. This specific data was logged because of the imageType attribute you added to your custom trace.

Review Network data

An HTTP/S network request is a report that captures the response time and payload size of network calls.

  1. Go back to the main screen of the Performance Monitoring dashboard
  2. Click the Network tab to see a list of network request entries for your web app.
  3. Browse through them to identify slow requests and start working on a fix to improve your app's performance!

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!

What we've covered:

Learn more: