Time To InteractiveThe perception of a website’s loading speed is an experience that no metric can fully encapsulate. During the loading process, several stages can have an impact on this perception. So, to understand if your site is slow or fast, there are several metrics that you need to look at – including Start Render and Speed Index. But although these can be used to measure the speed at which a page displays, they don’t allow you to assess a page’s level of interactivity, which is a key aspect in the user experience. And that’s why we’re proud to present a new metric: Time To Interactive.

Some sites optimize the speed of content display to the detriment of interactiveness. This can result in a frustrating user experience: the site seems to be loaded, but when the user tries to interact with it, nothing happens.

It’s important to highlight the fact that Time To Interactive is a new metric. As such, it hasn’t been standardized and needs to prove itself, and so it may undergo changes. But while its results should be analyzed with a pinch of salt, Time To Interactive is the closest metric to the concept of interactiveness. However, we believe that interactiveness is something that can’t currently be separated from the user experience and that needs to be taken into account in your webperf monitoring as of now. That’s why we’ve chosen to incorporate it into the webperf ranking that we publish every month with Le Journal Du Net. From now on, the ranking will feature the average of the Speed Index and the Time To Interactive.

What is Time To Interactive?

The TTI (Time To Interactive) metric measures the time a page takes before the user can interact with it – how long before it responds to a click. It depends on when:

  • the page displays useful content (determined by the First Contentful Paint)
  • the most visible elements on the page are interactive (when they are clickable or respond to a mouse-over, etc.)
  • the page responds to user interactions within a maximum time of 50 milliseconds.

source : dev.to

In practice, the algorithm used to calculate the TTI observes both the waterfall and network activity. The three stages involved in determining Time To Interactive are:

  • Choose a relevant starting point, such as the First Contentful Paint or the DOMContentLoadedEnd;
  • From this point, look for a window during which the network is stable for 5 seconds (and that doesn’t contain long tasks);
  • Once this has been found, look back to the end of the last long task and report that time as Time To Interactive.

This means that it’s not possible to estimate the TTI before the analysis of the document is complete.

Here’s an illustration to help you better understand Time To Interactive:

source : Medium, Leonardo Zizzamia

Let’s add a few clarifications:

  • Using the First Meaningful Paint as the starting point is not recommended because this metric hasn’t been standardized yet;
  • TTI can’t be detected when the network isn’t stable, but the real TTI value is always found at the end of a long task;
  • A wait of at least 5 seconds is necessary before a page can be considered interactive and the TTI can be reported.

The measurement doesn’t consider a page to be interactive while the DOM build is incomplete. This means that the TTI waits for DOMContentLoadedEnd, even if this happens in the 5 seconds of network stability mentioned earlier.

Time To Interactive: how to measure it?

Time To Interactive is a new metric. As such, it isn’t yet available for all measurement tools and it should be interpreted with caution. However, you can measure it with the Lighthouse extension (available only on Chrome), via the new Speed Insight page or via WebPageTest.

However, RUM tools can’t easily measure Time To Interactive. As a result, another complementary RUM metric has emerged: First Input Delay.

Time To Interactive: how can it be improved?

Time To Interactive is directly influenced by JavaScript scripts, which can block page rendering. The more scripts there are, the greater the delay to TTI. This can vary across devices in terms of its impact because script performance varies considerably from one device to another. The slower a processor is, the more time it will spend analyzing and compiling scripts. On mobile devices, for example, the CPU is much more limited than it is on a desktop, and as a result these JSs have a much greater impact on sites loaded on mobile and the Time To Interactive is considerably longer.

So, the best way to improve your TTI is to remove or delay your JavaScripts – and, naturally, to do this quickly and effectively, we’d recommend that you use Fasterize, which offers this feature. It’s time for some spring cleaning!

Want to supercharge your web performance?

Ask a demo

Hello SMX Paris !