Time to Interactive (TTI).

When the page becomes fully interactive — target <= 3.8s

What does this check test?

Time to Interactive measures the time from page load until the page is fully interactive — meaning it has displayed useful content (FCP has fired), event handlers are registered for most visible elements, and the page responds to user interactions within 50ms. Specifically, TTI is identified as the first 5-second window after FCP where there are no long tasks (>50ms) and no more than 2 in-flight network GET requests. Google considers TTI 'good' at 3.8 seconds or less. TTI has been largely superseded by TBT and INP as interactivity metrics, but remains a useful diagnostic.

Why does it matter?

TTI captures the frustrating experience where a page looks ready but does not respond to clicks or taps. This 'uncanny valley' of interactivity is worse than a blank loading screen because users attempt to interact and nothing happens, leading to rage clicks and abandonment. TTI is particularly important for Single Page Applications where the UI renders quickly via SSR but JavaScript hydration takes seconds. Although TTI has been replaced by INP as the Core Web Vital for interactivity, it remains useful as a diagnostic metric for identifying hydration bottlenecks.

Who is affected?

JavaScript-heavy applications using frameworks like React, Angular, or Vue are most affected — especially those using server-side rendering where the HTML arrives fully formed but interactive handlers are not yet attached. E-commerce sites with complex product configurators, SaaS dashboards with many interactive widgets, and content sites with heavy ad scripts tend to have the worst TTI scores.

Where does this apply?

TTI bottlenecks are found wherever JavaScript must execute before the page becomes responsive. Common culprits include: framework hydration code, third-party analytics and ad scripts, large component trees that must mount and attach event handlers, and synchronous initialization logic. The Chrome DevTools Performance panel shows TTI on the Timings lane and highlights the long tasks that delayed it.

How to fix it

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

function Page() {
  return (
    <Suspense fallback={<Skeleton />}>
      <HeavyComponent />
    </Suspense>
  );
}

<script defer src="/analytics.js"></script>

{
  "sideEffects": false
}

References

• Time to Interactive (TTI) — web.dev
• Reduce JavaScript execution time — web.dev
• Code Splitting — React Docs