Skip to content
Learn Measure Blog Case studies About
On this page
  • What is TTI?
  • How to measure TTI
    • Lab tools
  • What is a good TTI score?
  • How to improve TTI

Time to Interactive (TTI)

Nov 7, 2019 — Updated May 11, 2022
Available in: Español, 日本語, 한국어, Português, Русский, 中文, English
Appears in: Metrics
Philip Walton
Philip Walton
TwitterGitHubHomepage
On this page
  • What is TTI?
  • How to measure TTI
    • Lab tools
  • What is a good TTI score?
  • How to improve TTI
Time to Interactive (TTI) is an important lab metric for measuring load responsiveness. It helps identify cases where a page looks interactive but actually isn't. A fast TTI helps ensure that the page is usable.

What is TTI? #

The TTI metric measures the time from when the page starts loading to when its main sub-resources have loaded and it is capable of reliably responding to user input quickly.

To calculate TTI based on a performance trace of a web page, follow these steps:

  1. Start at First Contentful Paint (FCP).
  2. Search forward in time for a quiet window of at least five seconds, where quiet window is defined as: no long tasks and no more than two in-flight network GET requests.
  3. Search backwards for the last long task before the quiet window, stopping at FCP if no long tasks are found.
  4. TTI is the end time of the last long task before the quiet window (or the same value as FCP if no long tasks are found).

The following diagram should help visualize the steps above:

A page load timeline showing how to compute TTI

Historically, developers have optimized pages for fast render times, sometimes at the expense of TTI.

Techniques like server-side rendering (SSR) can lead to scenarios where a page looks interactive (that is, links and buttons are visible on the screen), but it's not actually interactive because the main thread is blocked or because the JavaScript code controlling those elements hasn't loaded.

When users try to interact with a page that looks interactive but actually isn't, they'll likely respond in one of two ways:

  • In the best-case scenario, they'll be annoyed that the page is slow to respond.
  • In the worst-case scenario, they'll assume the page is broken and likely leave. They may even lose confidence or trust in the value of your brand.

To avoid this problem, make every effort to minimize the difference between FCP and TTI. And in cases were a noticeable difference does exist, make it clear through visual indicators that the components on your page are not yet interactive.

How to measure TTI #

TTI is a metric that's best measured in the lab. The best way to measure TTI is to run a Lighthouse performance audit on your site. See the Lighthouse documentation on TTI for usage details.

Lab tools #

  • Lighthouse
  • WebPageTest
While it's possible to measure TTI in the field, it's not recommended, as user interaction can affect your page's TTI in ways that lead to lots of variance in your reports. To understand a page's interactivity in the field, you should measure First Input Delay (FID) and Interaction to Next Paint (INP).

What is a good TTI score? #

To provide a good user experience, sites should strive to have a Time to Interactive of less than 5 seconds when tested on average mobile hardware.

For details on how your page's TTI affects your Lighthouse performance score, see How Lighthouse determines your TTI score.

How to improve TTI #

To learn how to improve TTI for a specific site, you can run a Lighthouse performance audit and pay attention to any specific opportunities the audit suggests.

To learn how to improve TTI in general (for any site), refer to the following performance guides:

  • Minify JavaScript
  • Preconnect to required origins
  • Preload key requests
  • Reduce the impact of third-party code
  • Minimize critical request depth
  • Reduce JavaScript execution time
  • Minimize main thread work
  • Keep request counts low and transfer sizes small
PerformanceMetrics
Last updated: May 11, 2022 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.