Measuring using the timeline

In this section, we'll look at how to profile our application's performance using the Chrome DevTools, the first of a few tools we'll use to track how our application loads and responds.

Once we have an idea of how it performs, we can improve it according to RAIL principles.

The DevTools are, of course, always under development, so their appearance may differ from the given screenshots. The core functionality should remain the same, however, and so, it's important to pay close attention to the principles at work.

Go to your deployed Firebase application in Chrome and open up DevTools to the Performance tab (I recommend undocking the tools into a separate window via the dropdown menu in the top right, since there’s a lot of content to see); then, refresh the page. After the page finishes loading, you should see something similar to the following:

There's a lot going on here, so let's break it down. We'll start with the Summary tab, the circle graph at the bottom there...