:warning: WARNING :warning: we no longer recommend measuring TTI in the field; instead, we recommend measuring FID, which can be done using the web-vitals JavaScript library. TTI will continue to be supported in lab-measurement tools like Lighthouse.

Time to Interactive Polyfill

A polyfill for the Time to Interactive metric. See the metric definition for in-depth implementation details.

Installation

You can install the TTI polyfill from npm by running:

npm install tti-polyfill

Usage

Import the module into your application code and invoke the getFirstConsistentlyInteractive() method. The getFirstConsistentlyInteractive() method returns a promise that resolves to the TTI metric value (in milliseconds since navigation start). If no TTI value can be found, or if the browser doesn't support all the APIs required to detect TTI, the promise resolves to null.

import ttiPolyfill from './path/to/tti-polyfill.js';

ttiPolyfill.getFirstConsistentlyInteractive(opts).then((tti) => {
  // Use `tti` value in some way.
});

Note that this method can be invoked at any time, it does not need to be called prior to interactivity being reached. This allows you to load the polyfill via <script async>, so it doesn't block any other critical resources.

Configuration options

The following table outlines the configuration options you can pass to the getFirstConsistentlyInteractive() method:

The debug version

A debug version of the polyfill ships with this repo that includes helpful console.log() statements that can be used to better understand how the polyfill is working under the hood.

Note: usage for the debug version is exactly the same as the regular version.

Browser support

The TTI polyfill will work in any browser that supports PerformanceObserver and the PerformanceLongTaskTiming entry.

At the moment this is Chrome 58+.