Time to interactive: an important metric for the speed of your website

Time to Interactive (TTI) is one of the six elements Google Lighthouse tracks for its performance report. Each element records a certain aspect of the loading speed of the page, including the TTI.

Difference between TTI and CPU Idle

Don’t confuse these metrics. The biggest difference between CPU Idle and TTI is that CPU Idle measures the time it takes that something on the site is interactive, while TTI measures the time it takes the entire page is interactive.

What does TTI exactly measure?

TTI measures the time it takes a web page is completely interactive. According to Google, a page is completely interactive when:

• The page shows useful content. This will be measured by the First Contentful Paint
• Event handlers are registered for the most visible page elements
• The page reacts within 50 milliseconds on user interactions

You can measure this for example by making use of Google Lighthouse directly from your Chrome browser and/or Google Page Speed Insights.

The image above shows a Time to Interactive of 2.8 seconds, which shows in green. Google ranks a TTI of 2.8 as ‘good’.

But when do I get a green score?

Google is really open about this, and quotes the following: ‘The TTI-score is a comparison between your page’s TTI and the TTI of other websites based on the data of the HTTP-registry.

Websites that perform in the 99% scale, have a TTI of around 2.2 seconds. When the TTI of your website is 2.2 seconds, your TTI score will be 99.

The table below shows how you have to interpret your TTI-score. Please pay attention that these values do not match the values when you test your current pagespeed (since the values are based on the average).

Source: web.dev

We can conclude that Google rates a TTI of 5.2 seconds or less as good.

Meanwhile, we see you need to have a lower TTI than you should expect to receive a green score. Websites become faster every day, so the benchmark of Google changes continuously.

Nowadays, we need a TTI of less than 3 seconds to receive a green score. Obviously, the faster the better is applicable for this metric.

Improving your Time to Interactive

How do you improve your Time to Interactive? Two big factors that have an impact on a higher (and worse) TTI are the number of HTTP-requests and third party JavaScript files that are not optimized.

In general, loading JavaScript has a big impact on the speed of your site. Postponing JavaScript will have a positive impact on your TTI-score.

The best you can do is limit the number of JavaScript files. Take a critical look at which Javascript files are loaded and try to find a better solution for this.

Do you have Google Maps in your footer? Delete this JavaScript and load this for example via iframe.

Besides optimizing your JavaScript files, you can do more. Think about:

• Enable Lazy Loading for loading your images
• Use fonts and other elements that are known for loading rapidly
• Make use of browser caching
• Take a critical look at the above-the-fold content

Is TTI getting more important?

Time to Interactive can be seen as a beautiful combination of page speed and user experience. A fast-loading website is nothing when there is no option to interact.

A slow-loading web page where the possibility to interact is faster than other relevant content is also not what we want.

TTI has to do with page speed, but user experience is also really important. This makes TTI a really useful metric to optimize.

Please note: TTI is a metric of Google. Optimizing this metric does not have to be a target. Other search engines may deal differently with this.

Keep in mind that TTI is only a metric ,founded by Google. A good balance between the loading speed on the one hand and the user experience on the other hand should be the aim.