The user perception of how fast a web site loads is something really to grasp with a single metric. We can break down the loading of a page in several steps which all have an impact on the user experience. Hence to understand the user performance, you should take a look at several metrics altogether.

These metrics may include Start Render or Speed Index. Nevertheless while these metrics reflect the loading speed of a page, they do not provide an evaluation of the interactivity of the page. Interactivity is a key factor of digital experience and this is what Time to Interactive measures!

So let’s look at what Time to Interactive is and how to improve it!

Why is Interactivity important?

Some sites optimize the loading speed at the expense of interactivity. This can be frustrating for users. Let’s take an example: imagine you have loaded a page (which happened quite fast) and when you interact with the site (say clicking on a button), nothing occurs… You got it.

That’s the reason why Time to Interactive got introduced in 2019. It has not been standardized and still has to be fine tuned.

What is Time to Interactive?

In a few words, TTI measures the time needed for a page to become interactive for the user (e.g. react to a click). Time to Interactive itself depends on the time by which:

  • the page has loaded the content which is useful (as defined in the first contentful paint or largest contentful paint for example)
  • the most visible elements of the page become interactive (clickable or active)
  • the page responds to user interactions within 50 milliseconds.
Definition of time to interactive

How to measure TTI in practice

In practice, the computation of TTI combines data from the Waterfall and network activity. There are 3 steps needed to define the Time to Interactive.

  1. Define the starting point: it may be the FCP (First Contentful Paint) or Dom Content Loaded End
  2. From this point in time, look for a time window of 5 seconds during which the network is stable (and that contains no long task)
  3. Once you have identified that time window, look back in time and spot the last long task to set the endpoint of the Time to Interactive.

As a side note, you will understand that the TTI cannot be measured before the loading of the whole document has been analyzed.

Here is a simple drawing that clarifies the explanation here above:

How is time to interactive measured and calculated

A few side notes on TTI:

  • First, stay away from First Meaningful Paint as start point for TTI measurement. FMP is not standardized.
  • Secondly, you cannot measure TTI before the network is stable.
  • Third, TTI always corresponds to the end of a long task.
  • Finally, you have to wait for a minimum of 5 seconds to consider a page as interactive and compute the TTI value. The computation does not consider the page interactive until the DOM building is complete. The TTI measurement waits for the DOMContentLoadedEnd, even if the network has been stable for 5 seconds already.

How to measure Time to Interactive

Time to Interactive is only available on browser based tools (like the Lighthouse Chrome extension) and synthetic testing tools (like page speed insights).On the other hand, RUM tools which collect performance data through the NavigationTiming API cannot measure the Time to Interactive.

This is one of the reasons why another metric available both through RUM and synthetic tools has been introduced to measure interactivity: FID, for First Input Delay.

Time to Interactive: how to improve it

The biggest driver of Time To Interactive is the Javascripts: they can block the rendering of the page. As a consequence, the more scripts are loaded, the more the TTI is delayed. Beyond this, the performance of the scripts vary massively depending on the device; this potentially increases the impact of Javascripts on TTI. The slower the device’s processor is, the longer it will take for them to analyze and compile the scripts. As an example, on a mobile device, the CPU is much slower than on a desktop: the mobile users are way more impacted by scripts than the others and for them the TTI will be much higher.
To mitigate this, you have two options:

  1. Delete some scripts
  2. Defer them

If you wish to learn more about this, we strongly recommend that you take a look at this article: First Input Delay