Time To Interactive (TTI) is a lab metric used by Google to diagnose issues that could impact site performance.
While a page can look interactive and responsive, it doesn't necessarily have to be, as additional code may be loaded after the initial render. TTI measures the time from when a page begins loading to when the main page resources have been loaded and the page can reliably respond to user activity.
TTI is one of the six metrics analyzed by Lighthouse, so you can easily view the results in the Lighthouse performance section.
In the example above it takes a long time for the page to become interactive, possibly resulting in a poor user experience.
For Lighthouse to recognize that the page is ready for interactions, the following criteria have to be fulfilled:
This timeline view from DebugBear clearly shows that both the network and CPU have become idle at the point where TTI is marked.
As with the other web vitals, the TTI score is color-coded into three distinct ranges: Good, Needs Improvement, and Poor.
|TTI subscore||Max LCP (Mobile)||Max LCP (Desktop)|
While Time To Interactive accounted for 33.3% of the Lighthouse score in Lighthouse v5, in v7 TTI now only represents 15% of the total score.
Note that TTI is related to when Lighthouse finishes a test and stops collecting performance data. It first waits for the network to become idle, then waits for the CPU to also become idle, as can be seen in a code snippet from the Google Chrome Lighthouse repository.
Modern browsers provide a Performance tab in the DevTools which gives you the ability to record page activity. Use this tab to gain insights about how time is spent when loading the page.
Where possible, remove third-party scripts or only load them where necessary.
Every site suffers from different issues causing poor performance. The opportunities section of the Lighthouse report gives specific details of what is causing a poor TTI score, and how the page could be improved. Each opportunity has a link to further helpful documentation on how to implement these fixes.
Here's an example of the opportunities section in a Lighthouse report:
The best way to tackle these suggestions and improve performance quickly is to go from top to bottom, from the biggest issues impacting your page performance to the more low-impact ones.
Various tools can help you optimize your website's performance:
The easiest way to measure Time To Interactive is with PageSpeed Insights. After entering the page URL, PageSpeed Insights will run a performance test and report the relevant data. The TTI score can be found under the Lab Data section of the report.
PageSpeed Insights is based on Lighthouse, and you can also run Lighthouse on your computer. Lighthouse is integrated in the Chrome Developer Tools. The Diagnostics section of the report gives you a great overview of the issues causing a poor TTI. For items that are not self-explanatory, you can open the dropdown to reveal detailed information on how to tackle the issue.
One important thing to note: While Pagespeed Insights runs the test suite for mobile and desktop scan at the same time, in Lighthouse you can only run the test for either desktop or mobile at once. The mobile simulation usually results in a lower performance score, since the test is using a low-end mobile device.
Consider running Lighthouse in Chrome Incognito mode, as browser extensions and other saved data can impact the score negatively.
DebugBear gives provides a comprehensive dashboard that you can use to analyze site performance, including Time to Interactive. By continuously monitoring web performance you can keep track of changes over time. This can be especially helpful when adding new features, refactoring code, or updating changing dependencies.
Time To Interactive is shown directly on the dashboard overview page with an in-depth timeline breaking down what factors contributed to the metric.