Time To Interactive

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.

Lighthouse TTI

In the example above it takes a long time for the page to become interactive, possibly resulting in a poor user experience.

How Time To Interactive is Measured

For Lighthouse to recognize that the page is ready for interactions, the following criteria have to be fulfilled:

  • Content is displayed on the page, as measured by the First Contentful Paint
  • The network is quiet, and no more than two GET requests are in progress
  • The page successfully responds to user interactions within 50 milliseconds, as tracked by the First Input Delay – in practice this means that the CPU is also mostly quiet

This timeline view from DebugBear clearly shows that both the network and CPU have become idle at the point where TTI is marked.

DebugBear Timeline

How Time To Interactive affects Lighthouse scores

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)
100 1.8s 1.3s
90 3.7s 2.5s
50 7.4s 4.5s
10 14.2s 8.3s

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.

How to improve Time To Interactive

Since Time To Interactive measures the interactivity of a page, analyzing JavaScript execution on the page is the first step to solving a potential performance bottleneck. The following optimizations are a good place to start.

Reduce and speed up JavaScript code

Remove and optimize as much of the JavaScript payload as possible. This reduces the time spent downloading, parsing, compiling, and running JavaScript code.

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.

Implement code splitting

Use code-splitting to further reduce the impact of JavaScript on page speed. Use dynamic imports to only serve necessary JavaScript code.

Remove Third-Party JavaScript

If your page depends on various external services, chances are that you're be loading too much third-party JavaScript code.

Where possible, remove third-party scripts or only load them where necessary.

Identifying opportunities for optimization using Lighthouse

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:

Lighthouse Opportunities

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.

Measuring Time To Interactive

Various tools can help you optimize your website's performance:

Pagespeed Insights

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.

Lighthouse TTI Detailed

Lighthouse

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.

Lighthouse Diagnostics

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

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.

DebugBear TTI


Still need help? Contact matt@debugbear.com for support.
DebugBear is a website monitoring tool built for front-end teams. Track performance metrics and Lighthouse scores in CI and production. Learn more.