Time to Interactive - Defined

Summary:

In this article we'll define the Time to Interactive metric in Blue Triangle and the methodology for measuring it in both Real User and Synthetic Monitoring. 

• General Definition
• Methodology
• Method 1 - Long Task Timing
• Method 2 - Frames Per Second (FPS)

General Definition

The Time to Interactive (TTI) metric 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.

Methodology

The Time to Interactive (TTI) is determined by two methodologies—the Long Task Timing API and the frames per second (FPS). We capture timings using both methods if they are available and report back the lower value from the two methods as the TTI. If neither method produces a Time to Interactive value, nothing (or zero) will be returned for the page measurement.

Method 1 – Long Task Timing

With the Long Task Timing API, we can get visibility into when the page responds slower than 50 milliseconds. Every time the page responds slower than 50m, the slowdown is reported to us. These slowdowns usually result from long running JavaScript on the page. In order to determine that the page is fully interactive, we look for a quiet window of 5 seconds where there are no long running tasks and confirm that the First Contentful Paint has occurred. Note you may configure these values, however the default are considered standard practice.

Method 2 – Frames Per Second (FPS)

The second method we use to determine page slowdowns, or a disruption to interactivity,  is by checking the FPS of a page load. We capture the timestamp for each frame and determine the first 5 second quiet window after the First Contentful Paint. Similar to Method 1, the quiet window and the metric marking "useful content displayed" are configurable.