What Is Time To Interactive (TTI)?

How a site’s loading speed is perceived is something that no metric could fully capture. When the process of loading is being carried out, numerous stages may impact on the user’s perception, so to evaluate your pages’ loading speed there are several indicators which need to be observed, including Speed Index and Start Render.

However, although those may be used for measuring the speed of the page’s display, they are unable to allow assessment of the page’s interactivity level, and this is a vital element of any user experience. In order to do this, optimising your TTI (Time to Interactive) is necessary.

A Brief Overview Of Time To Interactive

The Time to Interactive (TTI) metric allows for interactivity to be evaluated effectively. Deeply linked with the user’s experience, TTI must be borne in mind whenever you monitor your website’s performance since the experience that the user has when visiting your site not only makes an impact on whether they’ll visit your web pages again, but also affects the ranking that the Google search engine will give you due to the algorithms that are in place.

It’s vital to be aware, however, that TTI isn’t a standardised indicator so it can evolve over time. Also, whole this metric is included in Google’s calculation of PageSpeed Insights and Lighthouse scores, its weight fluctuates over time, so it may be given greater weight at some times than at others. Nevertheless, since TTI is important for the user’s experience, it’s well worth taking the time to review it and improve it.

The Time to Interactive (TTI) metric measures the length of time taken from the web page to become interactive for a user so that it can react to a click. It relies on the moment that:

• The page’s most visible elements are interactive.
• Useful content is displayed by the page.
• The page can respond within 50 ms or less to the user’s interaction.

The algorithm used in practice to calculate TTI observes network and waterfall activity. There are three steps involved in the determining of TTI:

1. Choosing a starting point like DOMContentLoadedEnd or FCP.
2. Looking for a window in which there is network stability for at least five seconds without containing any long tasks.
3. Looking back to the last long task’s end and reporting the time as TTI.

That means it’s impossible to estimate TTI before the document’s analysis has been completed.

How Is TTI Measured?

When a site only optimises the speed of displaying content rather than the speed of user interactivity, users easily become frustrated. The site appears to load however when they try interacting with it, nothing takes place. This is why thinking about measuring and optimising TTI is so important.TTI can be monitored with Lighthouse, WebPageTest or PageSpeeds Insights.

What Would be A Good TTI Score?

For users to have the best possible user experience, a website should aim to have a TTI of under 5 seconds if tested on standard mobile hardware.

How Can I Improve My TTI?

There are several ways that your TTI can be improved. These include:

Deferring JavaScript Files

If you defer your JS files they’ll only be loaded once the most vital content has been displayed by the browser. By prioritising the content that should be shown first, your site will be faster since less time will be spent parsing, running and compiling JavaScript files.

Delaying JavaScript and Reducing Unused JavaScript

If you delay JavaScript execution or remove or reduce unused JavaScript, your performance and TTI score will be improved. If all JavaScript files have delayed loading until user interactions have taken place, your site will run more quickly.

Minifying JavaScript And CSS

If you minify your code, any useless punctuation and clutter will be removed. This will speed up your site, freeing up time so the main thread can focus on its most important tasks.

Optimising CSS Delivery While Reducing Unused CSS

Before browsers can render content, all layout and style information needs to be processed for the page. This means that the CSS must be delivered by the browser and this action may prevent the main thread handling other vital processes and tasks. Therefore, you need to optimise how CSS is delivered and also remove all unused CSS.

Reducing TTFB And Server Response Times

To have a low TTI score you need a fast server and you can achieve this by choosing an efficient and speedy hosting provider, using a CDN service, GZIP compression and advanced caching, optimising your database and using the most up-to-date version of PHP.

Prefetching DNS Requests

If your site has 3^rd party code, prefetching its DNS request is essential. It minimises loading resources and time from other websites so your website gets faster.

Preloading Fonts

Font preloading forces the visitor’s browser to load up the most important fonts at an early stage.

Focusing On TTI On Mobile Devices

Improving TTI on mobile devices is important, particularly those with less powerful processors. Removing or postponing unnecessary scripts is the best course of action, so keep your mobile site’s design simple without using excessively heavy elements.

The Importance Of TTI

Optimising your website’s TTI score is very important when it comes to ensuring the best possible experience for your users. The TTI performance metric is extremely important, and optimising it ensures that visitors to your site can interact more rapidly with your page content. When users can interact quickly with the content that they see on your page, they have a far less frustrating experience and this makes them more likely to return to your site in the future.

Since user experience is also a vital metric used by the Google algorithms when calculating the ranking of a website, it couldn’t be more important to ensure that those who use your website are having the best possible experience.

Therefore, taking the time to identify any potential TTI issues that are arising on your site and rectifying them at an early stage is the best course of action to make your site as successful and enjoyable to use as possible.