SpeedCurve synthetic monitoring and real user monitoring (RUM) let you track performance metrics, including any custom metrics you choose to create. Here are definitions for the most common metrics our users care about, particularly those metrics that correlate to measuring the user experience.

SpeedCurve Synthetic is built on top of the leading open-source web performance testing framework WebPageTest, so our synthetic metrics are the same as what you're used to seeing in WebPageTest. In addition to those, SpeedCurve Synthetic also tracks unique metrics, such as Hero Rendering Times.

SpeedCurve LUX tracks the same real user monitoring (RUM) metrics you may already be familiar with, as well as unique metrics like Interaction Times and critical blocking resources.

_____________________

Abandonment Rate (LUX)

The percentage of pages where the user leaves the page before it finishes loading (i.e., before the onload event). Abandonment rate is often an indicator that the user thinks the page is too slow and left in frustration.

Async CSS|JS Requests (Synthetic and LUX)

These metrics count the number of stylesheets and scripts that are loaded asynchronously. Refer to Blocking CSS|JS Requests for more information.

Average DOM Depth (Synthetic and LUX)

The DOM is a tree structure. A DOM element's depth is how far it is from the root of the tree, i.e., the number of ancestors. This is the average depth across all DOM elements. It gives an indication of the complexity of the DOM tree which can impact performance, especially for CSS.

Blocking CSS|JS Requests (Synthetic and LUX)

Stylesheets and scripts have the biggest impact on rendering. It's possible to load them asynchronously, but the majority of scripts and stylesheets today are loading synchronously which blocks rendering. Synchronous stylesheets block the entire page, no matter where they occur in the page. But synchronous scripts only block DOM elements that occur after the SCRIPT tag. Therefore, if a script is loaded synchronously but occur after the last visible DOM element, they are not counted as "blocking" (since they don't block rendering of anything visible). 

Bounce Rate (LUX)

Bounce rate is the percentage of Bounced Sessions out of total Sessions. 

Bounced Sessions (LUX)

A bounced session is a session with only one page view. See Sessions for more information.

Backend (Synthetic and LUX)

Sometimes also called "Time to First Byte" or "TTFB". The time from the start of the initial navigation until the first byte of the base HTML page is received by the browser (after following redirects). In LUX this is
responseStart from Navigation Timing specification. This typically includes the bulk of backend processing: database lookups, remote web service calls, stitching together HTML, etc. This is a good approximation of the time it takes your server to generate the HTML on the server and then deliver it over the network to the user's browser.

Connection Type (LUX)

Segmenting real users by connection type is available in LUX. This data comes from the Network Information API. As of January 2019, this is available from Chrome, Opera and Android. LUX reports the effective connection type and maps the values as follows: "slow 2G" => "Very slow", "2G" => "Slow", "3G" => "Medium", and "4G" => "Fast".

CPU time (Synthetic and LUX)

As more and more sites switch to using large Javascript frameworks and manipulating the page using Javascript, the execution time this code takes and the available CPU can instead become the performance bottleneck.

Synthetic

The various CPU metrics show how long the browser main thread spent on computing and rendering the page. The CPU time is split into the categories "Loading, Scripting, Layout, Painting." We then also segment the CPU time by a few of the key browser events like "Start Render, Page Load and Fully Loaded."

For example "CPU Scripting Start Render" tells you how long the CPU spent on Javascript scripting up to the point that the Start Render event fired.

If you just want to know the overall time that a page spent on a CPU category like "Layout" then use the "Fully Loaded" metrics.  

LUX

We use the Long Tasks API to help you track how CPU affects your users. A "long task" is defined as any process that consumes more than 50ms on the browser main thread. As of January 2019, this is available from Chrome, Opera and Android. In LUX, we show:

  • JS CPU Time - the sum of all the Long Tasks
  • Longest JS Task - the longest Long Task from a page
  • Number of JS Tasks - the number of Long Tasks in a page

Customer data (LUX)

You can use the LUX API to gather any data you want – for example, cart size, A/B testing, and conversion information. For more information see the LUX Customer Data support article.

Custom metrics (Synthetic and LUX)

Custom metrics allow you to measure the performance of specific page elements that you've identified as essential to the user experience for your own pages. The W3C User Timing spec provides an API for developers to add custom metrics to their web apps. This is done via two main functions: 

  • performance.mark records the time (in milliseconds) since navigationStart
  • performance.measure records the delta between two marks

There are other User Timing APIs, but mark and measure are the main functions. SpeedCurve supports custom metrics, so once you've added marks and measures on your pages, you can collect data with both SpeedCurve LUX (RUM) and Synthetic.

Since some browsers still do not support performance.mark and performance.measure, LUX customers should use LUX.mark and LUX.measure which provide similar functionality, allowing you to collect data even from browsers that don't support the User Timing specification. 

For both LUX and synthetic, you must register your Custom Metrics in your Settings as explained in this article:

DOM Content Loaded (Synthetic and LUX)

The DOM Content Loaded time is measured as the the time from the start of the initial navigation until the end of the DOMContentLoaded event

First Contentful Paint (LUX)

First Contentful Paint is provided by browsers as part of the Paint Timing spec. It's the time at which users can start consuming page content. Specifically, it is "the time when the browser first rendered any text, image (including background images), non-white canvas or SVG." As of January 2019, this is available from Chrome, Opera and Android.

First CPU Idle (Synthetic and LUX)

Formerly known as First Interactive. It changed to First CPU Idle in Lighthouse 3.0 to more clearly describe how it works.

First CPU Idle measures when a page is minimally interactive:

  • Most, but maybe not all, UI elements on the screen are interactive.
  • The page responds, on average, to most user input in a reasonable amount of time.

Specifically, it is the first span of 5 seconds where the browser main thread is never blocked for more than 50ms after First Contentful Paint. As of January 2019, this is available from Chrome, Opera and Android.

First Input Delay (LUX)

First Input Delay (FID) was developed by Google to capture how quickly websites respond to user interaction. It's fairly simple to implement: We add event handlers for click, mousedown, keydown, pointerdown, and touchstart. When the user first interacts with the page in one of those ways, we measure the time between when the event happened and when the event handler was actually called. That delta is FID. By combining FID, Long Tasks, and interaction metrics, you can get insight into how JavaScript on your page hogs the CPU and affects the user experience.

First Meaningful Paint (Synthetic)

First Meaningful Paint (FMP) is "the paint after which the biggest above-the-fold layout change has happened, and web fonts have loaded." Chrome exposes this measurement as a "blink.user_timing" trace event with a name of "firstMeaningfulPaint". Note that this is not a W3C spec so is only available in Chrome.

Frontend (LUX)

The backend time is the time it takes the server to get the first byte back to the client. The frontend time is everything else. This includes obvious frontend phases like executing JavaScript and rendering the page. It also includes network time for downloading all the resources referenced in the page. Specifically it is loadEventStart minus responseStart from Navigation Timing.

Fully Loaded (Synthetic)

The Fully Loaded time is measured as the time from the start of the initial navigation until there was 2 seconds of no network activity after Document Complete.  This will usually include any activity that is triggered by JavaScript after the main page loads.

Google Lighthouse Scores & Audits (Synthetic)

For any synthetic tests run in Chrome we also run a Google Lighthouse audit which checks your page against rules for Performance, PWA, Best Practice and SEO. For each of the categories you get a score out of 100 and recommendations on what to fix which you can find on each test dashboard and aggregated together on the Improve dashboard.

We run the latest release of Lighthouse. The Lighthouse audit is always run using a Fast 3G network speed so that the scores are consistent.  

Hero Rendering Times (Synthetic)

Hero Rendering Times are a set of synthetic metrics that are unique to SpeedCurve. They measure when a page's most important content finishes rendering in the browser. 

Largest Image Render identifies when the largest image in the viewport finishes rendering. This metric is especially relevant to retail sites, where images on home, product, and campaign landing pages are critical elements.

Largest Background Image Render is for those pages where the background image is just as – or more – important than the largest image. We created this metric to ensure that you're not missing out.

H1 Render measures when your first H1 element finishes rendering. This metric is especially useful to media and informational sites. Because the H1 tag is usually wrapped around header copy, there's a reasonable assumption that this is copy you want your users to see quickly. If there are no H1 elements, then H2 is used.

First Painted Hero and Last Painted Hero are synthetic metrics that show you when the first and last pieces of critical content are painted in the browser. These are composite metrics for the Hero Rendering Times:

max(h1, (biggest_img || bg_img))

These composite metrics are computed by taking the minimum and maximum of the largest text time ("h1") and the biggest IMG time (or biggest background image if biggest IMG doesn't exist).

Hero Element Timing – which is based on the Hero Element Timing API – lets you select and annotate specific hero elements on your pages, such as search boxes, image carousels, and blocks of text. Right now, if you're a SpeedCurve user, you can follow the instructions in the API spec to annotate your pages, and see the results in your SpeedCurve results. (As a bonus, when browsers inevitably catch up and adopt the spec, you'll be ahead of the game.)

HTML Size (Synthetic and LUX)

In LUX, this is the size of the HTML document based on the transferSize property from the Resource Timing spec. 

Image ATF Requests (LUX)

This is the number of images that are in the browser's viewport. 

Inline Style/JS Size (Synthetic and LUX)

This is the uncompressed size of all inline <style> and <script> tags in the page at the beginning of the window load event (onload). It only includes content inside the tags, i.e. <script src="page.js"></script> does not count towards the size, whereas <script>alert("hello")</script> has a size of 14 bytes.

Interaction (IX) Metrics (LUX)

For many websites, how quickly users engage with the page is an important user experience metric. If these metrics increase it could be a sign that the page is rendering slower, or a design change has made the site more difficult for users. This category captures metrics about how and how quickly users engage with the page.

  • First IX Type - The first type of interaction the user had with the page: scroll, click, or keypress.
  • First IX Time - When the first interaction time occurred (relative to navigationStart).
  • Element ID clicked - The ID or data-sctrack attribute of the DOM element that was clicked or keypressed. See the LUX data-sctrack API for more information.

Page Load (Synthetic and LUX)

The Page Load time is measured as the time from the start of the initial navigation until the beginning of the window load event (onload). For SPAs using LUX, it's the time between LUX.init and LUX.send. While Page Load can be a useful metric it can also be deceiving as depending on how the page is constructed it doesn't always represent when content is rendered to screen and the user can interact with the page. Unfortunately many organizations and other monitoring tools still default to reporting Page Load as an important performance metric. It's in no way a good measure of the user's experience and something the industry needs to move on from.

Page Views (LUX)

In LUX, metrics are based on a "page view". In normal pages, the LUX data is sent as part of the page onload event. For Single Page Apps, a "page view" is defined by the time between LUX.init and LUX.send. See Using LUX in a Single-Page App (SPA) for more information.

Session Length (LUX)

Session length is the number of page views in a session.

Sessions (LUX)

Page views are grouped into sessions where all the page views are from the same browser and there is no more than 30 minutes between page views. In other words, if a user is visiting your website and stops for an hour lunch, when they return their page views will be grouped into a new session. In addition, sessions are limited to a 24 hour maximum, so after 24 hours a new session ID is created. 

Speed Index (Synthetic)

The Speed Index is the average time at which visible parts of the page are displayed.  It's dependent on size of the view port. It represents how quickly the page rendered the user-visible content (lower is better). Speed Index is often the metric we show by default as it best represents the user's experience as the page rendered over time from starting completely blank to the viewport being visually complete. 

In WebPageTest, the Speed Index is expressed in milliseconds. In SpeedCurve, we convert it to seconds, to make it consistent with your other metrics. 

You can find out more about how WebPageTest calculates Speed Index below.

Start Render (Synthetic and LUX)

The Start Render time is measured as the time from the start of the initial navigation until the first non-white content is painted to the browser display. Any CSS and blocking JS you have on the page has to be downloaded and parsed by the browser before it can render anything to screen. This is called the critical rendering path and the Start Render metric is very important in understanding how long users have to wait before anything is displayed on screen.

In LUX, Start Render is the value of First Paint from the Paint Timing spec. As of January 2019, this is not available in Safari and Mobile Safari, In synthetic, it's based on analyzing the tenth-of-a-second screenshots to see when rendering begins.

Time to First Byte

See Backend.

Time to First Interactive

This metric has been renamed First CPU Idle in order to be consistent with Lighthouse 3.0. (Scroll up for definition.)

Time to Interactive (Synthetic)

Formerly known as Time to Consistently Interactive. Renamed to be consistent with Lighthouse 3.0.

Time to Interactive (TTI) measures how long it takes a page to become interactive. "Interactive" is defined as the point where:

  • The page has displayed useful content, which is measured with First Contentful Paint.
  • Event handlers are registered for most visible page elements.
  • The page responds to user interactions within 50 milliseconds.

Specifically, it is the first span of 5 seconds where the browser main thread is never blocked for more than 50ms after First Contentful Paint with no more than 2 in-flight requests. In other words, it's the same as First CPU Idle but it also checks the number of in-flight network requests.

Visually Complete (Synthetic)

Visually Complete is the time at which all the content in the viewport has finished rendered and nothing changed in the viewport after that point as the page continued loading. It's a great measure of the user experience as the user should now see a full screen of content and be able to engage with the content of your site.

Related:

Did this answer your question?