Time To Interactive (TTI) is one of the six (6) page speed metrics measured by Lighthouse’s performance section. It is defined as the time it takes for a website to become fully interactive for a user.
This metric is essential as modern users demand faster load times and more responsive websites. We’re looking into what TTI is, why it matters, and how you can optimize it to improve your website’s performance.
What Is Time To Interactive?
Time To Interactive (TTI) is a website performance metric that measures the time it takes for a website to become fully interactive for a user. TTI marks the point at which a user can interact with the website, such as by clicking on buttons or filling out forms, without experiencing significant delays.
In other words, TTI measures the time it takes for the website to load and become responsive to user input. TTI is an important metric because some site owners prioritize web design over functionality, which can reduce the likelihood of bounce and conversion rates.
If your site focuses too much on the images and design choices to the detriment of its TTI, you’ll likely see a fall in engagement.
How Do We Measure The TTI Score?
Lighthouse measures TTI. It is measured in the number of seconds it takes for the page to become fully interactive. When is a page fully interactive?
When the final Long Task has been completed, followed by five seconds of main thread inactivity. Once the main thread is idle, it is free to respond to interactivity by the user.
What Is A Long Task In A Browser?
The browser has one main thread of execution, responsible for rendering the page and responding to user input. Nearly all performance issues result from this thread being too busy to do another, more important task.
A ‘Long Task’ is something that the browser is doing that blocks the main thread for more than 50ms. Long tasks are such an important concept that a Long Task API built into the browser may be used to report on long tasks during page load. This API is what Lighthouse uses internally.
Lighthouse TTI Performance Metric
To test a page’s TTI, run a Lighthouse report on the page in question and click the Original Trace link.
The trace shows what the browser did when it started loading the page.
Long tasks are shown in two ways in the above graph. First is the row labeled ‘Long Tasks’. Each task is represented by a blue bar. The darker/hatched part of the bar shows how much the task exceeded its allotted 50ms.
The second way is the ‘Main’ row, representing what the main thread was doing at a given time – if anything. Long tasks have a red upper right corner, and the red hatching also represents the time the task ran over. The TTI time in the above graph is the time at the end of the last long task.
Which Tools Measure TTI Automatically?
Google Search Console is the go-to application for viewing all core web vitals, including TTI. Since Search Console reports the actual field data that Google uses about your page, it’s the best source for your TTI time.
The problem with Search Console is that the data is often several weeks behind. You spend a lot of time improving your site performance, and then it takes Google 2-3 weeks in the usual case to say whether or not you got it right.
When Google gets back to you with the results, you might have completely revamped the site again. Since Google takes so long with field data, you want to work with lab data about a particular page.
Lighthouse is the application for lab data, as we saw above. There are also paid services available such as Pingdom or GTMetrix.
Understand And Improve Time To Interactive
Fixing TTI is done by removing long tasks during page load. Any long tasks should occur as early in the initial load as possible to avoid blocking user interaction on the main thread.
For a page with a bad TTI score, find the long tasks using Lighthouse and determine what is causing them. Common causes include poorly-coded Javascript and re-rendering a page with many DOM elements.
How Can It Be Improved?
Improve your TTIs by incorporating good web development practices, such as:
1.Optimizing JavaScript Execution
Optimize your JavaScript execution to reduce the main thread blocking time and ensure your page responds quickly to users’ inputs. You can minimize the main-thread work by removing unused JavaScript or replacing large JavaScript libraries with smaller ones.
In almost all cases, multiple JS libraries can be used. If your page uses a Javascript library that shows up in the long task list, try other ones. Or, if it’s not adding to the user experience, delete it.
2. Minimize The DOM Size
If the number of elements in the DOM of your page is large, re-rendering the page can take a long time and therefore create a late Long task in the loading process. There are usually multiple ways to implement a given design; some use fewer HTML elements than others.
Graphical tools like page builders are notorious for using a lot of nodes per block, resulting in the DOM becoming significantly larger than necessary. Simplifying the implementation can improve TTI often without changing the visual design.
In other words, the page can look precisely the same but still load faster, improving the performance metric without sacrificing your chosen visual elements.
3. Improve First Input Delay (FID)
Time To Interactive (TTI) and First Input Delay (FID) are closely related, so improving one usually enhances the other. Improving FID includes removing any unnecessary JS or CSS, using the correct size of images and text, and ensuring that anything below the fold is set to lazy loading.
What’s A Good Time To Interactive (TTI) Score?
A TTI of less than 3.8 seconds is considered good. 3.9 to 7.3 seconds needs improvement. Any time over 7.3 is considered slow and will impact your search results and page conversions.
Google determines these numbers based on real-world field data collected from all the sites they index. A good TTI score should get lower as sites evolve and get even faster.
Final Thoughts
To obtain a quicker TTI, you must reduce the number of Long tasks on your site as much as possible. You must find them (Lighthouse is a good resource) and eliminate them to achieve this. Why is a good TTI important?
If users wait to interact with the page, they are more likely to leave your site and find another, faster-loading page. Page experience impacts SEO, too.
We hope this article has given you some insight into what a good Time To Interactive score is and any other questions you may have about the interactive score as a whole!
Mailing Address