Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

Lighthouse: Time to Interactive

Overview

Time to Interactive (TTI) is a performance metric that measures a page's load responsiveness and helps identify situations where a page looks interactive but actually isn't.

TTI measures how long it takes a page to become fully interactive i.e. it measures the time between First Contentful Paint (FCP) and the last long-task on the main-thread and represents the point at which the browser is capable of reliably responding to user input.

In simple terms, a fast TTI helps ensure that the page is usable.

How does your site score on this metric?

What does Time to Interactive measure?

According to Google, "A page is considered fully interactive when it displays useful content, as measured by First Contentful paint; event handlers are registered for most visible page elements, and; the page responds to user interactions within 50 milliseconds."

TTI is an important user-centric metric because it measures how quickly visitors are able to fully interact with your page.

To visitors, a slow TTI can feel like your website is unresponsive, broken or doesn't work.

For example, we've all experienced situations where elements of a website quickly become visible; yet when we try to click/tap on them, nothing happens.

These scenarios are mostly caused by third-party scripts that block the main- thread thus increasing your TTI.

As a result, your visitors may get frustrated and decide to leave your webpage.

Reducing TTI is crucial to your web performance, particularly, on mobile devices where this effect is more pronounced.

Time to Interactive's effect on your Performance Score

The TTI metric accounts for 15% of the total Performance Score, signifying its relatively high importance.

Optimizing this metric can help your visitors perceive a noticeable improvement in how fast they can fully interact with and use your page.

Note that TTI is a companion metric to Total Blocking Time (TBT) and, together, they provide deeper insights into your page's responsiveness to user input.

Thresholds for Time to Interactive

The TTI metric is a synthetic timing that measures how long your page takes to become fully interactive and displays the result in seconds.

Click here to learn more about how TTI is calculated.

TTI thresholds are, as follows:

  • Good - nothing to do here = TTI of 2468 milliseconds or less.
  • Ok, but consider improvement = TTI between 2468 and 3280 milliseconds.
  • Longer than recommended = TTI between 3280 and 4500 milliseconds.
  • Much longer than recommended = TTI higher than 4500 milliseconds.

How to improve Time to Interactive?

Note that the particular audits mentioned below likely contribute the most to your TTI; however, your page's TTI may also be affected by other optimizations that aren't mentioned here.

Improve your TTI metric by incorporating good web development practices, such as:

1) Optimizing JavaScript execution

Optimize your JavaScript execution to reduce main-thread blocking time, and ensure that your page responds quickly to user inputs. Some of the things you can do include:

2) Serving minimal requests

Ensure that you keep request counts as low as possible for the intended application. Similarly, avoid chaining critical requests to speed up the loading of key resources.

3) Using resource hints to establish early connections

Use the preconnect and dns-prefetch resource hints to establish early connections to third-party servers and fetch resources sooner.

Similarly, preload key requests to ensure that your visitors can use your page sooner in the page load timeline.

Note: Some of the Structure audits are related; improving one is likely to improve the others.

Summary