Time to Interactive

Why It Matters

• Users try to interact as soon as content appears. The moment people see buttons, links, and forms, they start tapping and clicking. If the page is still busy executing JavaScript in the background, those interactions either fail or queue up, creating a janky experience.
• It measures real usability, not just appearance. First Contentful Paint and Largest Contentful Paint tell you when things show up. TTI tells you when those things actually work. A page can look fully loaded and still be completely unresponsive.
• Long TTI correlates with high bounce rates. Users who click a button and nothing happens tend to leave. They do not wait patiently for your JavaScript to finish parsing — they assume the site is broken and go somewhere else.
• It exposes JavaScript-heavy pages. Pages that rely on massive JavaScript bundles often look painted early but take several more seconds to become interactive. TTI makes this hidden cost visible.

How to Improve It

1. Reduce JavaScript execution time. The main thread cannot respond to user input while it is busy executing scripts. Minimize, split, and defer JavaScript so the browser has breathing room to handle interactions.
2. Break up long tasks. Any JavaScript task that takes more than 50 milliseconds blocks the main thread. Split large operations into smaller chunks using requestIdleCallback or setTimeout so the browser can process user input between pieces.
3. Defer non-critical scripts. Scripts that are not needed for the initial view — analytics, social widgets, below-the-fold features — should load after the page is interactive. Use defer, async, or dynamic imports.
4. Minimize main thread work. Reduce CSS complexity, avoid synchronous layout operations, and limit DOM manipulation during page load. The less work the main thread has to do, the sooner it becomes available for user interactions.
5. Use code splitting. Send only the JavaScript needed for the current page rather than bundling your entire application into one file. Lazy-load additional code as users navigate to features that need it.

Common Mistakes

• Optimizing only for visual speed. Making the page paint faster without reducing JavaScript execution just widens the gap between when the page looks ready and when it actually is. This creates a worse experience, not a better one.
• Loading all JavaScript upfront. Bundling everything into one massive script file means the browser must download, parse, and execute it all before the page becomes interactive. Code splitting and lazy loading prevent this.
• Ignoring third-party script impact. Analytics, ads, and chat widgets all execute JavaScript on the main thread. Each one pushes TTI later. Account for their cost when measuring interactivity.
• Testing only on fast devices. TTI that looks acceptable on a powerful desktop may be terrible on a mid-range phone. JavaScript execution is CPU-bound, and mobile processors are significantly slower. Always test on representative devices.