Design the Gap Between First Paint and Interactive
Performance & Reliability · performance, loading, navigation
Updated 2026-08-04
- Treat the moment content appears and the moment it responds as two different events. A page rendered on the server shows text almost immediately, and hydration, the step that makes it work, arrives afterwards, so there is a window where the interface looks ready and is not.
- Design for the click that lands in that window. Tapping a button that does nothing is worse than tapping one that is visibly not ready yet.
- Choose deliberately what a user sees first:
- Server-rendered content, which appears fast and is briefly inert.
- A client-rendered shell, which is interactive sooner but starts blank.
- A static skeleton, which sets expectations and commits to a layout.
- Never let content shift when the interactive layer arrives. A layout that reflows after someone has started reading loses their place and sometimes their click.
- Make the inert state look inert where the difference matters. A disabled style on a critical control for a few hundred milliseconds is more honest than an enabled one that ignores input.
- Capture input rather than discarding it where you can. A keystroke typed into a search box before the handler attaches should still be there afterwards.
- Prioritize what makes the page useful over what makes it complete. The primary action being live matters more than the footer existing.
- Preserve scroll and focus across the handoff. Restoring both is what makes the transition invisible rather than jarring.
A page has two readiness moments, and the interface is judged on the distance between them.
Related guides
UX Handbook