Comparison
HydrationvsTime to interactive
Hydration
the page looks finished but clicking a button does nothing for another two seconds.
Attaching client-side behaviour — event listeners and component state — to server-rendered HTML that is already on screen. It is the price of server rendering in a component framework: the browser downloads the same component code, runs it again, and walks the existing DOM to match it up. Because it is one large synchronous chunk of work, it is the classic cause of a page that is visible long before it is interactive.
Full entry →Time to interactive
the page looked finished for a while before it would actually respond to a click.
The point after which the main thread has been quiet enough for long enough that input will be handled promptly. It captures the gap between looking ready and being ready, which is the defining problem of a hydrated page. It has fallen out of favour as a headline number because it is noisy and easily gamed, but the gap it names is still the thing to look for.
Full entry →