Time to Interactive
Definition
The time until a page is fully loaded and reliably responds to user input, marking when users can actually use the page.
What is Time to Interactive?
Time to Interactive (TTI) measures how long it takes for a page to become fully interactive. This means the main content is visible, event handlers are registered, and the page responds to user interactions within 50 milliseconds.
It's the point where users can reliably click buttons, fill forms, and interact with the page without delays.
Why TTI Matters
Actual Usability
A page that looks complete but doesn't respond is worse than a blank page – it actively frustrates users.
Critical for Web Apps
Sites with significant functionality need fast TTI. Users arrive to do things, not just read.
Bounce Rate Impact
Slow TTI increases bounces as users give up on unresponsive pages.
JavaScript Heavy Sites
Modern JavaScript frameworks often prioritise visual appearance over interactivity. TTI exposes this gap.
TTI Benchmarks
| Rating | TTI |
|---|---|
| Good | Under 3.8s |
| Needs Improvement | 3.8-7.3s |
| Poor | Over 7.3s |
TTI vs Other Metrics
- FCP – When content first appears (visual)
- LCP – When main content is visible (visual)
- TTI – When page reliably responds (functional)
- TBT – Blocking time between FCP and TTI
A page can have good visual metrics but poor TTI if JavaScript execution delays interactivity.
What Delays TTI?
Main Thread Work
JavaScript execution that blocks the main thread delays interactivity.
Large JavaScript Bundles
More code to download, parse, and execute means longer waits.
Framework Hydration
Client-side frameworks making server-rendered content interactive.
Long Tasks
Any task over 50ms blocks interaction during execution.
Third-Party Scripts
External scripts competing for main thread resources.
Improving TTI
Minimise Main Thread Work
Reduce JavaScript execution time through code splitting, optimisation, and deferral.
Lazy Load Non-Critical JavaScript
Only load JavaScript needed for initial interaction. Defer everything else.
Optimise Third Parties
Audit external scripts. Remove unnecessary ones, delay others until after TTI.
Use Progressive Enhancement
Build core functionality that works before JavaScript fully loads.
Consider Server-Side Rendering
SSR with partial hydration can deliver faster interactivity than pure client-side rendering.