blog posts

What is time to interactive( tti ) ?

This factor plays an important role in ranking our site in Google Page Speed ​​Insights. Because on the one hand it is related to the speed of the site and on the other hand it can incredibly affect the user experience of our audience. If you want to know what tti is? What role does it play in the user experience and SEO of the site and how is it measured, we suggest you join us in the continuation of this article. At the end of this article, in addition to knowing what time to interactive is, you will also learn about tti site improvement and optimization strategies.

What is time to interactive?

The simplest definition of tti is how long it takes for a page to become interactive. But before we go into detail about what tti is, we want to talk to you about the important concepts that site interactivity underlies. These concepts include FCP, Event handler and Response to user less than 50 ms.

Define site interaction concepts

  • FCP ; FCP, or First Contentful Paint, is a measure of how often a page on our site starts displaying valuable content. tti is created after FCP. In terms of site speed standards, there should not be much distance between these two criteria.
  • Event handler ; Event Handlers are scripts that are executed automatically when an event occurs, such as when a user clicks. These scripts respond to an event by generating the required results, so if Event Handlers are not registered on our site, the site will be unable to respond to user input.
  • Response to user less than 50 ms; To provide a very good user experience, the user must interact with the site in less than 50 milliseconds. If the site has Long Tasks, this time will increase.

Definition of tti in relation to the concepts of interactivity

tti is a factor that estimates the time between site loading and user interaction. Now what is the relationship between site tti and interactivity factors? In response, we must say that the period of time that we refer to in the definition of tti is quite related to these three concepts that we explained in the previous section.

Our site becomes interactive when it provides valuable content to the user in a short period of time, or so-called responds to user interaction. The interval when a user clicks on our site, the site FCP or the display of valuable content, in less than 50 milliseconds (ideally) and displayed with the help of Event Handlers and user interaction is answered, is called tti . The tti value can be easily measured with the free Google Page Speed ​​Insights tool. In the following, we will get acquainted with the effect of this factor on SEO and site ranking.

Measure tti in Google Page Speed

The impact of tti on SEO and site ranking

Sometimes SEOs focus so much on optimizing site loading speed that they are unaware of its impact on user interaction. There is no doubt that site speed optimization is one of the most important SEO technical factors. But sometimes over-optimization can negatively affect the user experience and consequently the SEO of the site! but how?

How does tti affect the site user experience?

When the site speed is optimized regardless of its effect on user interaction, it loads as soon as the site user clicks, but what the user sees is a loaded page! A page whose content is not yet usable and which the user cannot interact with.

This is not a good thing for the user experience and site SEO. Because it causes the user to click on this blank page again and again in frustration so that the result may be visible. Of course, these days, users do not have the patience to wait at all, and this in turn causes their dissatisfaction and increase the site bounce rate.

What effect does tti have on SEO and site ranking?

As we said in the previous section, users want their needs met as quickly as possible. They only stay on one page of the site for a long time, when we have valuable and interactive content. By default, the value of tti should be a maximum of 3800 milliseconds. If the tti of our site is more than this value, users will not wait and will leave the site. As a result, our site experiences a sudden increase in bounce rates and a drop in rankings.

You may not believe it, but the tti criterion accounts for about 15% of the site performance score, so having a tti of less than 3800 milliseconds and optimizing it will significantly improve the audience experience and SEO of the site. To get a deeper insight into site speed optimization factors, we suggest you read the article ” Site Speed ​​Optimization “.

What is the best value of tti?

Improve site tti and its relationship with other factors of Google Core Vital Web

As you know, Google Core Vital Web includes some important factors related to site speed, which we considered necessary to examine the positive effects of site optimization in relation to these factors:

Reduce tti and improve FCP

We mentioned earlier that FCP is a measure of how long it takes to load a page until it starts displaying valuable content. Since tti is measured in terms of time after FCP, if we improve the site tti, the time interval between FCP and TTI will be reduced. As a result, the interactivity of the site increases and the user experience improves.

Optimize tti and improve site FID rating

The FID factor measures how long a page responds to the user’s first interaction. Both tti and FID are related to site interactivity. If a page of our site is not interactive, it will not be ready to respond to user inputs. Therefore, improving the site tti also increases the likelihood of improving the site’s FID score. But how to optimize the site tti?

To find the factors that increase the site tti, there is a quick and free solution that we will teach in full in the next section.

The best technique for rapid identification of tti enhancement factors

There is a very simple, fast and free method to be able to have a proper analysis of how pages interact and identify the factors that increase tti; Use Lighthouse Audit Google Chrome.

Lighthouse Audit Google Chrome

To get started, we need to enter the Chrome Performance panel. First, right-click on the desired page and select “Inspect”. Then enter the “Performance” section and click on “Reload”. We’ll have to wait for Chrome to display the Advisor screen below.

Lighthouse audit Google Chromi

The page that Chrome shows us is a detailed analysis of how the page works. If we click on the “main” section, we will see different tasks. Each task displayed in gray with a red flag next to it is a Long task. If we move the mouse closer to this task, the execution time will be displayed. We can also click on “Bottom-Up” to see the exact description of the implementation of that task.

In general, the main factor in increasing the site’s tti are the JavaScript Long tasks. Long tasks usually take more than 50 milliseconds to run, and browsers cannot stop them while they are running; That is, they must be fully implemented.

Long tasks take a considerable amount of time on the main thread, and browsers can not cut them while they are running. Finding and optimizing JavaScript Long Tasks can significantly improve site tti. In the following, we will get acquainted with the methods of improving the site tti.

Get acquainted with tti site optimization solutions

In this free SEO training article , we answered the question of what is tti and thoroughly examined the effect of tti on site SEO. Now it’s time to learn how to optimize it. To improve the site tti, we have to go to JavaScript optimization, because this way we get results much faster. Here are some methods that can be effective in improving the effectiveness of tti in SEO. These methods include:

1. Divide JavaScript code

JavaScript code segmentation has the advantage that instead of running all JS code in the browser at the same time, only the code needed to respond and interact with the user in the first moments of entering the site is sent and executed.

2. Shrink and compress the code file

Using the compression method helps to reduce the file size of the code. Shrinking the code file allows us to get the best results with the least amount of time and energy. In fact, regardless of whether the JS code is problematic or not, it is best to shrink and compress it.

3. Remove unnecessary Main Thread scripts

The operating system of Main Thread scripts is such that they prevent the personal scripts of the site from running on time. We need to identify important scripts and eliminate other unnecessary ones, or plan to run them late. For example, pop-up and ad scripts are not important, so we can delete or delay them.

4. Use the resource hint to make initial connections

It is better to use preconnect and dns-prefetch to establish initial connection with Main Thread servers and receive resources faster.

5. Optimize CSS files and important site images

To improve the site’s interactivity metrics, we need to optimize CSS files as well as important site images. SEO of CSS files and images is effective in reducing tti time. To do this, we can delete unused code from CSS files, select efficient image formats, and remove unnecessary image pixels to reduce the size of the images.

6. Put the use of Web Worker in the tti optimization program

The nature of Web Worker is to run scripts in the background without affecting the Main Thread. So using webworkers can run scripts in the background without affecting the main thread and help optimize long tasks.

7. Minimize the number of requests for the program

It is very important that the number of requests for our application is kept to a minimum. This helps prevent the creation of a chain of important requests and speeds up the loading of key resources.

Frequently Asked Questions

What is the best value of tti ?

Overall, a good tti score is less than 3.8 seconds. If the site tti is below 3.8 seconds, it offers a great user experience and a better SEO ranking.

Which instruments for measuring tti are reliable?

The free Google Chrome Lighthouse and Web Page Test tools are the best and most reliable for measuring site tti.

How can we optimize the value of tti by optimizing images?

Using efficient image formats, removing unnecessary pixels, using inline images such as Base64 or SVG, reducing the size of image files, and using a CDN to deliver images faster can help improve the site’s tti.

How to find long tasks?

One of the best tools to find these is Google Chrome Dev Tools.

Concluding remarks

We hope you are familiar with the concept of tti or time to interactive. This factor plays a very important role in improving the user experience and SEO ranking of the site. You can be sure that by implementing the 7 strategies that we introduced to you to improve the site tti, you can see its positive effects on SEO.