Why Lighthouse Dropped Time to Interactive (TTI) and What Replaced It
This article explains why Lighthouse removed the Time to Interactive (TTI) metric after version 10, describes how TTI was calculated, discusses its inaccuracies, and introduces the more reliable replacement metrics such as Total Blocking Time (TBT), First Input Delay (FID) and Interaction to Next Paint (INP) for assessing web performance.
Introduction
Lighthouse is a website auditing tool that provides optimization suggestions and diagnostic information to help developers improve user experience. Starting with version 10.0, Lighthouse removed the Time to Interactive (TTI) metric and shifted its weight to Cumulative Layout Shift (CLS).
TTI
Concept
TTI (Time to Interactive) measures the time from page load start until the main sub‑resources have loaded and the page can reliably respond to user input. In simple terms, it is the latency between a user seeing a page and being able to interact with it.
A common scenario is that the UI is already rendered, but JavaScript responsible for interaction is still loading or blocked, so the page appears static to the user.
Calculation Method
Calculating TTI is complex because it must ensure that all major resources are loaded *and* the page can quickly respond to input. The key difficulty is defining “quickly respond”.
Browsers run JavaScript on the main thread. Any task longer than 50 ms is considered a Long Task . If a user interacts while a long task or rendering update is in progress, the browser must wait for the main thread to finish, causing perceived lag.
The standard TTI calculation consists of four steps:
Start counting from the First Contentful Paint (FCP).
Search forward for a silent 5‑second window that contains no Long Tasks and no more than two concurrent network GET requests.
From the start of that silent window, look backward for the last Long Task before the window; if none is found, stop at FCP.
TTI is the end time of that last Long Task (or FCP if no Long Task exists).
TTI Errors
Inaccuracy
TTI’s design assumes that a page is not truly “loaded” until the main thread is idle, but the metric is highly sensitive to Long Tasks and can produce widely varying scores for sites with very different user experiences.
For example, a page with a single 10 s Long Task and a page with two 51 ms Long Tasks can receive the same TTI score, even though the real user experience differs dramatically.
More Accurate Interaction Metrics
TBT (Total Blocking Time)
TBT measures the total time the main thread is blocked between FCP and TTI. It sums the duration of all Long Tasks in that interval.
By default, TBT calculation stops when TTI is reached; it only accounts for blocking time between FCP and TTI.
In the illustrated timeline, three tasks exceed 50 ms, giving a total TBT of 345 ms, which reflects interaction latency more accurately than TTI.
FID (First Input Delay)
FID measures the delay between a user's first interaction (click, tap, etc.) and the time the browser starts processing the event handler. It captures the real input latency experienced by the user.
FID also occurs between FCP and TTI because the page is partially rendered but not yet reliably interactive.
If no user interaction occurs during the FCP‑TTI window, FID is undefined.
As of 2024‑09‑09, FID is no longer part of Core Web Vitals; it has been replaced by Interaction to Next Paint (INP).
INP (Interaction to Next Paint)
INP extends the idea of FID by measuring latency for *all* user interactions, not just the first one, and includes the time to render the next frame after the event handler runs.
Scope: FID measures only the first interaction; INP considers every interaction.
Metric type: FID captures only main‑thread blocking; INP captures the full end‑to‑end latency of the interaction.
For a full explanation, refer to the Web.dev documentation on INP.
How to Test Web Performance Metrics
The web‑vitals library (≈1.5 KB) provides a simple API to measure core metrics such as FCP, LCP, CLS, FID, etc.
<!-- Append the `?module` param to load the module version of `web‑vitals` -->
<script type="module">
import { onCLS, onFID, onLCP } from 'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.js?module';
onCLS(console.log);
onFID(console.log);
onLCP(console.log);
</script>By importing the appropriate functions and providing callbacks, developers can record metric values during page load. Conclusion The article traces the evolution from Google’s abandonment of TTI as a core metric to the adoption of more precise alternatives like TBT, FID, and INP, explaining why Lighthouse 10.0 removed TTI and how the newer metrics better reflect real user experience. We hope the information helps you understand and improve web performance.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.