‘Time to Interactive’ is a very common but non-standardized UI metric that represents the time when a website is ready for user interaction. Here, ‘user interaction’ means when a user can provide an input in form of a click, select an option, insert a text etc.
To make the definition more simply, let’s try to understand it practically. Many times you may face the situation when all the contents of the website are getting loaded completely but you are unable to click on any of the links. It gives an impression that the page is unresponsive. That is due to the non-interactivity of the web page. In such cases, the ‘Time to Interactive’ value will be high and improvement is recommended. Hence ‘Time to Interactive’ indicates the readiness of the website for user interaction. In simple terms, a fast TTI helps ensure that the page is usable.
A quick user interaction of a website depends on the following factors:
- The page must display the useful content i.e. First Contentful Paint must happened.
- A quick activation of event-handler to make the page interactive.
- When a user interacts with the page, the page consistently responds within 50ms
What is the ideal value of Time to Interative?
TTI standard as per Google Lighthouse is:
| TTI (in seconds) | Considered As | Colour Coding |
|---|---|---|
| 0 to 3.8 | Fast | Green |
| 3.9 to 7.3 | Moderate | Orange |
| Over 7.3 | Slow | Red |
How to calculate Time to Interactive?
To calculate TTI, UI performance testing tools use some of the other UI metrics and network activity. The calculation of TTI is based on below three steps:
- Starting point of First Contentful Paint (FCP) or the DOMContentLoadedEnd.
- From starting point (in the first step), look for a window during which the network is stable for 5 seconds (and that doesn’t contain long tasks);
- Once step 2 condition is fulfiled then look back to the end of the last long task (with >50ms) and report that time as Time To Interactive.
Illustration is given below:
How to improve TTI?
- Remove or optimize JavaScript
- Avoid chaining the critical requests
- Use ‘preload’ key request
You may be interested: