How to use the RUM Performance Detail Page

Summary

Real-User Monitoring allows you to see how real-life users are experiencing your website in real time. The Performance Detail page gives in-depth insights into key performance metrics for different pages, as well as page-view-by-page-view and session-by-session analysis.

In this guide, you'll find out how to:

• Accessing the Performance Detail Page
• Configure 'RUM – Performance Detail'
• Compare at a glance how different pages of your site are performing
• See performance trends for each page or a group of pages
• Analyze individual sessions and page views
• View all page views in an individual session
• Look at object-level performance for a page view
• Metric Definitions

 

Accessing the Performance Detail

This page is available through the left-side navigation menu under 'Real User Monitoring'.

Configure 'RUM – Performance Detail'

To select a particular time period or set of pages in RUM Performance Detail, click on the filter icon in the upper right corner of the screen.

All of the filters on this page are optional. However, to compare specific pages, more than one page name has to be chosen in the Page Name filter. 

• A maximum of fifty page names may be chosen. 
• If your site has fewer than fifty page names, click "Select All" in the drop-down to compare all of the individual page's performance metrics for your site.
• If your site has more than fifty pages, only fifty may be selected at a time for comparison. 
• The default view is to look at the aggregate data for all pages, which occurs when no page names have been selected in the filter. In this view, the performance metrics are averaged across all pages on the site.

Use the date range picker under Time Period in the filtering menu to view performance details for pages of your site during a specific time period.

Click Apply to save your changes.

 

Compare at a glance how different pages of your site are performing

Once one or more pages have been selected in the filter (see above), the Performance Details by Page bar chart will populate at the top of the page. This chart is interlinked with all other data displays on the page.

There are three view options in this feature:

• Combined Pages Average: the default selection for data display, this view gives performance metrics as weighted averages across all selected pages
• Total Pages Duration: this view gives performance metrics as the sum across all selected pages
• Single-Page Performance: clicking on any bar in the chart limits the data displayed to the selected page name

Any one of these selections will change the way Performance Details are displayed in the cards to the right of the bar chart. These cards are clickable too. While the default selection is for Page Onload, selecting any of the other metrics will change the vertical axis in the Performance Details bar chart to the left to the selected performance metric.

While the bar chart is useful for visualizing averages in a concise snapshot, sometimes trending is more useful. And that brings us to the next section.

 

See performance trends for each page or a group of pages

The Page Timings Over Time graph sits beneath the Performance Details by Page section, but they are interlinked. Selecting any of the three page-view options (Combined Pages Average, Total Pages Duration, or selecting a bar in the bar graph) changes which page or pages are trended in the graph.

The length of the trend is determined by the selected Time Period in the filter.

Hovering over the graph will give you performance metrics at specific time intervals (either minutes, hours, or days, toggled by Bucket Size in the filter) along the trend line.

To see the data in a table format, select your desired format using the button to the right of the the graph. The data is sorted by number of page views as a default. Click on any column header to sort by that variable.

Graph View:

Table View:

If you would like to drill down even further and look at performance timings for single page views in the selected time period, read on.

 

Analyze individual sessions and page views

Make sure the desired Time Period is selected in the filter. If you would like to see all page views, deselect any Page Names in the filter. 

Scroll down to the Page Views Scatter Plot. This chart is linked to the Page Timings Over Time graph above it. The window of time shown in the scatter plot corresponds to the vertical highlighted section of the Page Timings graph.

To change the time window of the scatter plot:

• Highlight a different portion of the Page Timings Over Time
• Hover over the trend lines.
• Click any of the trend data points.
• The vertical highlight will appear.
• Use the Previous and Next buttons to the right of the title in the Scatter Plot to navigate to the desired time window.
• Click and drag inside the scatter plot to view a smaller portion of the time window. Hit the Reset zoom button to return to the original view.

By default, the data points are plotted by the time the page view occurred versus the page view’s onload time. To change the performance metric for comparison:

• Click the left-hand drop-down box beneath the scatter plot.
• Select the performance metric for comparison from the drop-down.

By default, the only data points that display are those with resource timings information (also known as Object Level Detail) attached to them. To see all data points in the selected time window:

• Click the right-hand drop-down box beneath the scatter plot.
• Select Page and Object Level Detail.

The scatter plot should then populate with page views that do not have object-level detail. Page views with associated object-level detail appear as triangles. Page views without object-level detail appear as circles.

Hovering over any of the data points gives information about that page view:

• The performance metric being compared in the scatter plot
• The name of the page being viewed
• The date and time that the page view occurred
• The performance metric measurement

Clicking any of the data points will allow you to view a Performance Breakdown, All Page Views, and Performance Measurement Details for that plot point. The Performance Breakdown will appear in a waterfall chart beneath the scatter plot. This chart displays information about:

• Page-level performance timings
• The name of the page being viewed and the site name
• The browser version used to view the page
• The location where the user accessed the page
• The time of the page view
• The IP address of the user viewing the page
• The URL of the page viewed

There is a detailed explanation of the RUM Session Lookup page available here.

View all page views in an individual session

To see all page views in a session, click on any data point in the Page Views Scatter Plot. Selecting a page view will populate the All Page Views For Selected Session scatter plot.

• The user who hit the selected page in the Page Views Scatter Plot also viewed the other pages shown in the All Page Views scatter plot over the time range on the x-axis.
• Page views with object-level detail appear as triangles. Page views without associated object-level detail appear as circles.

The drop-down box above this scatter plot allows you to change the performance metric for comparison. By default, the performance metric is set to the onload time for each page view.

You can also look up a user session by IP address. If the IP address appears in the Page Views Scatter Plot, typing it in the IP Address Lookup beneath the All Page Views scatter plot will populate it with that user’s session.

Hovering over any of the data points gives information about that page view. Clicking any of the data points will give a Performance Breakdown for that page view in a waterfall chart beneath the scatter plot.

 

Look at object-level performance for a page view

Access the object-level details of a page view by clicking on any triangular data point in either of the scatter plots. To view only the data points with associated object-level detail, make sure Object Level Detail Only is selected in the right-hand drop-down box beneath the Page Views Scatter Plot.

In previous sections, it was shown that clicking on a data point populates the All Page Views scatter plot, as well as the Performance Breakdown waterfall chart beneath the scatter plots.

The object-level detail information appears beneath the Performance Breakdown waterfall chart, in three tabs:

• Domain Level Activity(graph or table)
• Object Level Detail(graph or table)
• Object Activity By Domain

Waterfall View:

Table View:

The Domain Level Activity waterfall chart is the default display for this section. In this chart:

• The domains loading resources on the page are displayed as bars in the order that they are active in the life of the page load.
• Each bar’s position on the graph corresponds to when the domain started to load.
• The length of a bar represents the time it takes each domain to load.
• Hovering over any bar will give the total duration of that domain.
• Onload and DOM Content Loaded appear as vertical lines to compare resource timings to the overall page load.
• Other page performance timings can be selected or deselected from the key at the right for further comparison.

The Domain Level Activity table can be accessed by clicking the Domain Level Activity tab and selecting Table from the drop-down. In this table:

• Domains are listed by the number of files (also known as objects, resources, or elements) that they load on the page.
• Clicking any column header will sort the table by that column’s values.
• The total duration of each domain for the particular page view is listed.
• The average duration for each domain is listed for comparison.
• Other average performance metrics are listed at the domain level, if they are available.

The Object Level Detail waterfall chart can be accessed by clicking the Object Level Detail tab and selecting Graph from the drop-down. In this chart:

• Objects loading on the page are displayed as color-coded bars. The colors correspond to timing information for the file.
• Each bar’s position on the graph corresponds to when the object started to load.
• The length of a bar represents the time it takes each object to load, including blocking time.
• Hovering over any bar will give timing information about that object, as well as the exact URL, and in some cases a thumbnail image of the file.
• Onload and DOM Content Loaded appear as vertical lines to compare each object loading to the page load.
• Other page performance timings can be selected or deselected from the key at the right for further comparison.

The Object Level Detail table can be accessed by clicking the Object Level Detail tab and selecting Table from the drop-down. In this table:

• Objects (also known as files, resources, or elements) are listed by the order that they load on the page (numbered in the Action column).
• Clicking any column header will sort the table by that column’s values.
• Performance metrics for each file are listed, along with the start time and total duration.
• Information about each file is listed.
• Visit a file’s URL by clicking the magnifying glass under the Action
• See a file’s performance trends by clicking on the image icon under the Action 

The Object Activity By Domain graph can be accessed by clicking on the respective tab. In this bar graph:

• Domains loading resources on the page are displayed as vertical bars ordered by size.
• The length of a bar represents the amount of time the domain took to load during the selected page view.
• Hovering over a bar gives the full name of the domain along with the value of the total load time.

As always, the last piece of functionality for the page is the export feature, located at the top right of most charts, tables, and graphs. It appears either as a button with three lines or a button that says Export.

 

Glossary

Base Page: The average time the page takes to fetch the HTML file. This is calculated in the browser as the time elapsed between Response Start and Response End (Base Page = responseEnd - responseStart). See W3C Navigation Timing for more information.

Browser: A piece of software that can access the internet and read HTML files in order to render web pages readable to users. Some examples of browsers are Chrome, Safari, Opera, and Firefox. The combination of browser, operating system, and browser version used whenever a visitor accesses a site or page.

Country: The country where the measurement occurred.

Cumulative Layout Shift: Measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.

Domain Name System (DNS): The structure used for naming resources that access a network, including the Internet. While DNS associates several kinds of information with domains, it is most known for assigning IP addresses to domains. As a performance metric, DNS is the averaged time it takes to retrieve the IP address for the domain being called from the DNS (DNS = domainLookupEnd - domainLookupStart). See W3C Navigation Timing for more information.

DOM Content Loaded: The average time for the browser to parse all HTML and finish constructing the document object model (DOM) for a page once it is requested so that the .domContentLoadedEventEnd event is triggered. For this event to fire, scripts must have access to all elements via the DOM API. No parser can be blocking JavaScript on a page. Time to DOM Content Loaded is the time elapsed between Navigation Start and the DOM Content Loaded event (Time to DOM Content Loaded = domContentLoaded - navigationStart). See W3C Navigation Timing for further information.

DOM Duration:The average time for the browser to download a page's HTML and finish constructing the document object model (DOM) after the page is requested so that the domComplete event is triggered. Visually, this event occurs when the loading spinner stops spinning, which affects user perception of page speed. DOM Duration is measured as the time elapsed between the DOM Loading and DOM Complete events (DOM Duration = domComplete - domLoading). It occurs during the processing of the page. See W3C Navigation Timing for further information.

DOM Interactive: The average time for the browser to parse all HTML and finish constructing the document object model (DOM) for a page once it is requested so that the .domInteractive event is triggered. After this event, users can interact with the page as it continues to load. Time to DOM Interactive is measured as the time elapsed between Nagivation Start and DOM Interactive (Time to DOM Interactive = domInteractive - navigationStart). See W3C Navigation Timing for further information.

First Byte: The amount of time once a page is requested for the first byte of data for the page to reach the user's browser. It indicates the responsiveness of the server. In the browser, this is measured as the time elapsed between Request Start and Response Start (First Byte = responseStart - requestStart). This is sometimes referred to as Round Trip Time (RTT). See W3C Navigation Timing for more information.

First Contentful Paint: First Contentful Paint (FCP) measures the time from navigation to the time when the browser renders the first bit of content from the DOM.

First Input Delay: Measures the time from when a user first interacts with your site (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to respond to that interaction.

IP Address: Internet Protocol address (IP address) is a numerical label assigned to each device connected to a computer network that uses the Internet Protocol for communication. - Wikipedia

ISP: Internet Service Provider of the end user.

JS Errors (sampled): We sample your user traffic at around 1 percent of your visitor traffic to track the amount of JS Errors being logged in your end user's devices. Detailed JS Error Reporting is available in the JS Errors section.

Largest Contentful Paint: Largest Contentful Paint (LCP) measures the time from navigation to the time when the browser renders the largest bit of content from the DOM.

Page Name: The name of a specific page of a website.

Page Onload: Navigation Timings Onload Event (Onload - NavigationStart )