javascriptperformancenavigation-timing-apirum

How can I calculate time to interactive client-side?

Chrome's Lighthouse tool and WebPageTest offer "time-to-interactive" (TTI) metrics.

Google offers a minimal definition of TTI:

Time to Interactive is defined as the point at which layout has stabilized, key webfonts are visible, and the main thread is available enough to handle user input.

Note that this metric is in early phases and is subject to change.

WebPageTest breaks them into "time to first interactive" and "time to consistently interactive":

Time to Consistently Interactive Calculation

  • Start looking for TTI at the larger of first contentful paint or DOM Content Loaded
  • Look for the first interactive window where there is a contiguous period of 5 seconds fully contained within the interactive window with no more than 2 in-flight requests
  • TTI is the start of the interactive window from step 2 or the search starting point, whichever is later Time to

First Interactive Calculation

  • Start looking for TTI at the larger of first contentful paint or DOM Content Loaded
  • Look for the first interactive window where there is a contiguous period of 5 seconds fully contained within the interactive window regardless of the number of in-flight requests
  • TTI is the start of the interactive window from step 2 or the search starting point, whichever is later

I would like to calculate WebPageTest's two different TTI metrics client-side and send them back to an API (for RUM purposes).

Is such a calculation possible with current JavaScript APIs? If so, how?

Update:

I haven't found a satisfactory client-side solution, but I have found a more in-depth definition of TTI.

Solution

  • GoogleChromeLabs offers a polyfill for the TTI metric.

    Browsers will eventually expose the metric via built-in APIs:

    Note: this snippet is a temporary workaround, until browsers implement level 2 of the Performance Observer spec and include the buffered flag.