Introduction to Performance for AngularJS

Performance Overview

The Performance Overview screen consists of three main elements:

  1. Route change times graph
  2. Routes list

Route change times graph

Route Change Times graph

The Route change times graph will tell you what the average, 95th percentile and 99th percentile route change times were for the selected time period.

The default time period is one hour.

Assuming you’re looking at the past hour, you can see what the average route change time is per minute for the past 60 minutes.

Hovering on the Route Change Times graph

Hover over the graph to see the specifics of a particular minute. If your average route change time for your app in that minute is 40 milliseconds, that means that across all route changes that occurred in that minute, the average route change time was 40 milliseconds.

Percentiles

If you have 100 route changes in your app in that minute, the 95th percentile number will be the route change time of the 95th slowest route change. That means 95% were faster than this number and 5% were slower.

In other words, 95% of route changes were served faster than the 95th percentile number. The average route change time can often hide the fact that there was a host of problematic route changes. The percentiles can help you surface those problematic route changes.

Average Route Change Time

Average Route Change Time

Sometimes, a few long-running route changes are preventing you from seeing what the average is, so you can disable 99th and 95th. Click on any one of the legends in the upper right of the graph area to hide that route change time from the graph.

Routes

Routes list

Use the list of Routes to drill down and find which parts of your app to spend time on.

The Routes list will show you all the route changes that have occurred in the selected time period. In the list you’ll see:

  • Search: Filter the list of routes using the input field.
  • Avg. completion time: For each route, you can see the average completion time for that route only.
  • 95th completion time: Just like the average completion time, you can see what the 95th completion time for a particular route is.
  • RPM (Route changes Per Minute): For the selected time period, how many route changes was made to this route per minute on average.
  • Impact: A visualization of average route change time multiplied by route changes per minute.

Impact

The Impact indicator is a great tool to figure out where you might want to concentrate your efforts when trying to optimize performance. By default, your routes are sorted by Impact.

The Impact indicator is a way to see the collective time spent on changes to a particular route. When you have a route that is only a bit slow but is used constantly, it might be better to spend time improving the route change time for that route, as opposed to one that is 10 times slower but used more rarely.

Clicking on a route will take you to the detail page for that route.

Performance Detail Pages

For each route in your app, you can see the details on the Route Change Time graph. The graph is the same as on the Performance Overview page, but limited to the particular route.

Route Change Time Distribution graph

Route Change Time Distribution graph

The Route change time distribution graph gives you an overview of the distribution of the route change times for this route.

The bars in the distribution graph indicate how many route changes fall into a range of route change times. E.g. you might have 16 route changes that took between 45-90 milliseconds to complete (you can see the number of route changes and the exact range for the selected bucket in the upper right corner of the distribution graph). The distribution of route changes should (depending on a number of factors) form a long tail, with most route changes happening on the left side of the graph, with some outliers to the right.

Clicking on a blue bar in the graph (a “bucket”), the Timeline Breakdown below will show you a sample route change from that bucket.

The Route Change Time Distribution graph is particularly useful to investigate the difference between the fast route changes and the slow route changes. You can drag the cursor across the bars to see how the Timeline Breakdown below changes, when going from fast route changes to slow route changes.

Breakdown: Timeline

Breakdown: Timeline

The Timeline breakdown of a route change will show you what is going on inside the route change from start to finish.

Each horizontal bar is called a trace. They represent an operation that was going on during the change. These include $digest cycles (blue), rendering templates (green), or http requests (purple).

The width of the colored bars in the Breakdown Timeline indicates how long a particular operation took, relative to the total time of the route change. The wider the bar, the more time the operation took.

Hard navigations, soft navigations, and interactions

“Hard navigations” are when a user navigates from one page to another, in other words: “Initial page load”. At this point, Opbeat for AngularJS monitors “soft navigations”, meaning any action that happens during the route change after the page has initially loaded. Soft navigations are usually defined inside your Single Page Application and shouldn’t result in a full page reload.

An interaction is when a user clicks on an interactive element on the page that triggers an action inside your application.