TTI is an important metric that helps determine the responsiveness of a web page. Sometimes a web page looks as if it were fully loaded, but users cannot interact with it yet in real time. A web page with a good TTI score increases page usability by becoming interactive more quickly, so users have a better experience.
This article explains TTI in detail, answering important questions about it, including how to improve TTI scores.
TTI is a website performance metric that estimates the time a web page takes to become fully interactive when a user loads it. Before this metric was introduced, web developers relied on typical performance metrics like page load time and the Onload signal to measure performance. However, the accuracy of these measures was poor when compared with what the user sees as a fully loaded page. TTI is a better alternative to those typical metrics for measuring effective page load time.
We can call a web page ready for full interaction if it satisfies the following three criteria:
The first criterion here uses the First Contentful Paint (FCP) metric, which estimates when the web page starts to show useful content; it means that a web page reaches TTI after achieving FCP. Event handlers define the code to execute when an event triggers, such as when a user clicks on a link, scrolls through the page, etc. Event handlers can respond accurately to user interactions when properly registered. The third criterion is critical because users require a good experience with minimal response delays to avoid frustration.
Sometimes web developers focus on optimizing web page load speed without thinking much about the impact on user interactivity. This may result in a page that loads quickly but has a higher TTI value due to the optimized load speed. Users see that the web page is ready, but it is still not usable because they cannot interact with it. This can lead to frustration that may manifest as “rage clicks,” in turn leading to poor user conversion and a higher bounce rate.
Users will spend more time on a web page that has more interactive content for them, resulting in a lower bounce rate and more page visits. Having such positive SEO metrics affects the ranking of a website.
As mentioned above, FCP measures the time from when the page starts to load to when it starts to display the content. TTI is reached after FCP, and there can be serious page loading issues if the website has a huge gap between FCP and TTI.
First Input Delay (FID) measures the time a webpage takes to respond to a user’s very first interaction with it. Both TTI and FID are related to web page interactivity, and if the web page is not fully interactive, it is not yet ready to respond to user inputs. If the TTI value is low, there is a higher chance of the page having a good FID score.
Total Blocking Time (TBT) estimates the time gap between FCP and TTI where the main thread is blocked. If the main thread gets blocked for a long time, it cannot respond to user interactions until it finishes its tasks. TBT helps measure the severity of non-interactivity of a page. The page can reach TTI faster if the main thread is freed from running long tasks.
Tokopedia is one of the largest e-commerce companies in Indonesia, consisting of around 2.7 million merchant networks nationwide. Its website has over 18 million product listings and receives over 50 million visitors monthly. A case study done by Google claims that Tokopedia’s performance-first culture has enabled it to achieve a 35% increase in click-through rates (CTR), an 8% increase in conversions (CVR), and a 4-second improvement in TTI.
Generally, a good TTI score is under 3.8 seconds, which provides a great user experience and better SEO. The following table shows how the TTI value corresponds to the performance of a web page.
The following example will show you how to measure TTI using WebPageTest (you can also run Lighthouse as an option, but we won’t do that in this example):
In our example, the TTI value is 2.8 s., the FCP value is just 0.486 seconds, and the TBT is less than or equal to 0.30 seconds. Those numbers mean that this page has good interactivity. You can find the test results of the above test conducted on WebPage Test in this link.
To measure TTI using the PageSpeed Insights tool, enter the website URL and click the Analyze button. As you can see in the image below, for our example page it has an overall score of 79 in core web vitals assessment done by PageSpeed Insights and the TTI value is 3.3 s, which is a good value meaning that our web page responds to user interactions quickly.
Google PageSpeedInsight Tools Core Web Vitals Assessment results for the example page
WebPageTest can find such render-blocking resources and highlight them using an orange cross mark. For example, the following image shows the waterfall view of the page https://www.dailymail.co.uk/news/index.html which you can find in this link. It shows render-blocking resources highlighted with orange cross marks.
Hidden offscreen images get downloaded when the page loads but are not immediately visible to users. An example is an image that will be visible only if the user scrolls down through the page. Loading offscreen images can lead to the browser taking too much time to load content that users do not need initially, especially since image files are larger than text-based resources.
For example, the following images show the offscreen images downloaded for the page https://www.dailymirror.lk/ we used in our first example.
To reduce the impact of such images, you can lazy-load offscreen images, ensuring that they will be downloaded only when needed. The browser can then work on only displaying the content that is required for the initial page load.