How do you reduce Time to Interactive (TTI)?

TTI is the time from navigation start until the page is reliably responsive to input — usually defined as no long task in the next 5 seconds plus all critical scripts loaded.

What makes TTI slow:

1. Big JS bundles — download time on slow networks dominates.
2. Long tasks — any task > 50ms blocks input. Hydration is the most common culprit.
3. Render-blocking resources — synchronous scripts, non-critical CSS in the head.
4. Third-party scripts — analytics, chat, ads run on the main thread and steal CPU.

The fix list:

• Ship less JS. Tree shaking, dead-code elimination, RSC (server-only code stays on server), heavy libs (charts, editors) lazy-loaded.
• Code-split by route. Each route loads its own chunk, not the whole app.
• Defer non-critical scripts. defer / async / requestIdleCallback / scheduler.postTask. Move analytics off the critical path.
• Reduce hydration cost. Selective hydration (Astro islands, RSC, partial hydration). Only hydrate interactive components.
• Break long tasks. yieldToMain patterns inside long loops.
• Preconnect / preload critical origins early.
• Move third-party off main thread. Partytown for analytics, web workers for CPU.

Measure: Lighthouse for lab data, web-vitals library for field. The new metric to watch alongside TTI is INP (Interaction to Next Paint) — captures the worst real-user interaction, not just initial load.