Request Metrics captures and graphs all kinds of data to help you monitor your site’s performance. But “performance” is a tricky word - it can mean different things depending on context. So when we say performance, what do we mean?
We think the most fundamental metric we capture, and one of the first places to start, is overall load time. That is, how long does it take for a page, or resource, or API endpoint, to load?
Learn more about Performance Metrics in our Definitive Guide to Web Performance
The Load Performance Chart
You’ll find a colorful chart like the one below for every major section of Request Metrics (pages, resources and endpoints). The chart shows your load performance graphed over time. It also shows the number of unique users and overall page/endpoint loads.
So why the different colors? Each color corresponds to a time range “bucket”. A bucket contains all the requests that happened in a specific time range, e.g. from 250-500ms. We find it helpful to bin each request in to a specific bucket, rather than graph an average, so you can get a glanceable look at the varying load-time “strata” of your site. More purple and blue colors are good, the oranges and reds not so much.
Page Load Performance In Action
The graph below is from one of our customers. It shows the last 90 days of page load-time performance data. If you look closely you can see that there was a release that slowed down the performance of their pages.
The giveaway is that there is less of the dark purple color, and more of the green, yellow and orange. Of course, you can hover over each point on the graph and see a detailed breakdown as well.
The red arrow makes it clear where the slowdown occurred, but if you’re not used to looking at these charts it might not be so obvious to you. In addition to the stacked load-time histogram, we provide three other charts to make it even easier to tell if your performance is improving or degrading.
Percentiles are Better Than Averages
Sometimes your customers are on low-powered devices, or sometimes they live in Mongolia. In either case, you might get extreme outlier data for load times. These extreme outliers skew averages and make them mostly useless when looking at web site performance.
Instead of averages, we show percentiles. We provide three different percentile graphs - the median (or 50th percentile), 75th percentile, and 95th percentile load times. This lets you see how your middle-of-the-road user is doing vs. your outliers. It also lets you see if there’s large deviation between 50th and 95th percentiles, meaning your site has extremely variable performance.
Let’s look at the percentile graphs for the customer above:
It’s obvious now when the performance degrading release occurred! You can see a clear jump in all three charts.
All of the charts have a linked tooltip, so hovering over one chart will bring up the tooltip on all charts. This is true across Request Metrics as a whole.
These charts combine to make finding performance problems a cinch.
Percentiles for every Page
In addition to aggregated performance across a site, we show you individual pages and their load time percentiles in a sortable table!
This makes it easy to see which pages need attention! Once you find a problem page you can drill in and see all the same data for that specific URL.
Performance for Resources and Endpoints Too
Performance charts aren’t just for pages. We have them for resources and first-party endpoints too. Since we track six different kinds of resources, we also helpfully color code the 75th percentile color in the left-hand menu for glanceability. It’s almost too easy to see which kinds of resources are slowing down your site.
As with pages, we provide a sortable table for all resource domains and first-party API urls too!
It’s not always easy to convince the marketing department to take the tracking pixels off the performance sensitive pages, but with Request Metrics it’s simple and fast to find out which pages are the problem, and which endpoints need investigation.